Is there a way to show/hide a chrome extension's icon based on the current tab's URL/location?
I'm writing a utility that I only want to use on certain sites, and I would like to be able to access it in one click while on those sites (i.e. not in the extension overflow menu) but hide it otherwise.
The DeclarativeContent API almost provides what I'm looking for, but it only greys out the icon, rather than hiding it entirely.
Is this possible?
Unfortunately this isn't possible (anymore). Declarative content or not, the presence of your extension's icon near the address bar is only decided by the user by pinning/unpinning it from the extension menu. In older versions of Chrome using chrome.pageAction would result in the extension icon being shown inside the address bar only for the matching websites declared in the manifest. However, things changed a while ago (actually quite some time, maybe >1y, can't recall exactly when): now all extension icons are on the right side outside the address bar and can be pinned/unpinned by the user, meaning they are either always shown or never shown. Pinned icons that use pageAction are greyed out when inactive (see this documentation page).
When an extension is installed in chrome, a popup comes up which says [Extension_name] has been added to chrome.
This is the default popup having extension icon and some message. I want to modify this popup data. is there any api which we can use to modify it.
There is no such API, but you can use onInstalled event to open new tab with your own description.
In addition to Deliaz's answer, you can create either a browser action or a page action popup. You can change popup html dynamically to make it look completely different depending on the situation but you can't open it programmatically (desktop notifications could be used for alerts).
Here's another reference which might also help.
Each Time I'm using this console I'm struggeling with my mouse to click on the editable line.
So two question :
Is there a way of enlarging this line so it easier to click on it ?
Is there a command to navigate to it ?
The only way to enlarge it is to create a custom theme for DevTools, enable the experiment for using custom themes, and then installing your extension. That way you can get custom CSS into the top-level DevTools scope to modify things.
You may open a bug report on the chromium issue tracker against the DevTools so the team can assess the UX to see if there is anything they should modify internally.
I want to build app that would allow me to open website, select some data from this website and send them to my server. I imagine that it works in this way:
Application id displayed in browser sidebar sidebar
I open certain website
Select address (City) on opened website
Click "City" button on sidebar
"City" value is copied from website to sidebar
Select address (Zip code) in browser
Click "Zip code" button on side bar
"Zip code" value is copied from website to sidebar
... (and so on)
Finally I click "submit" button on sidebar and data is send to server.
What will be better option for such use case? Chrome app or chrome extension? I am not sure if there is way to display sidebar using chrome extension. I also haven't seen in reference option to open certain url in chrome app. Any advises will be appreciated.
I guess an extension would be more appropriate as it is just one click away from the website you want to select some data from. The user interaction could be done in various ways:
select text and use the context menu (right mouse click) to activate the extension logic
activate extension via toolbar and add UI as a part of the website being viewed or in a separate window
You can pop up a window, but it will disappear when you click back on the website. You can manually create a "sidebar" by having your extension open a new window whose url is inside the extension and subsequently manually placing it alongside the browser window.
Unfortunately there is no sidebar feature for chrome extensions. That would be cool if there were, though.
When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.