In Chrome 51, incognito windows now have a dark toolbar background, while previous versions used a light background. It's generally infeasible for a single 16x16 image to provide good contrast in both situations:
When displaying information to the user through a browserAction icon, by what mechanism can an extension provide dark-themed and light-themed icons, and switch between them depending on the current toolbar color?
Link to source code for the pictured extension
There is no such simple mechanism (yet), and it sounds like an excellent feature request to make at the very least for the manifest.
It's possible to approximate this though, by detecting incognito tabs being open and replacing the browser action icon for that tab only.
var incognitoIcons = {
19: "incognito19.png",
38: "incognito38.png"
};
chrome.tabs.onCreated.addListener(function(tab) {
if (tab.incognito) {
chrome.browserAction.setIcon({
path: incognitoIcons,
tabId: tab.id
});
}
});
If you're using a "split" incognito behavior (non-default), you can simply detect that and change the global icon for the incognito instance:
// Somewhere in background during initialization
if (chrome.extension.inIncognitoContext) {
chrome.browserAction.setIcon({path: incognitoIcons});
}
Note that content scripts can always rely on inIncognitoContext, so if you trigger a browser action icon change from them you can pass that along.
Obviously, you can do that with imageData instead of path, as is your case.
You may want to check the Chrome version while you're at it; I'm not aware of a better way than mentioned here.
Related
Is there any way of setting the browser's tab background color (not the favicon image) and text color with the help of an browser extension/addon.
I've searched the internet to and fro and found nothing in the APIs. So I think it is not possible. But maybe someone has a solution for that.
What I want to achieve is to tint the colors of TYPO3 tabs according to the application context (Development, Production/Staging, Staging). I managed to set the top-bar color in the TYPO3 backend depending in the application context, so the logic works well. What I'd like to have now is a way of tinting the tab.
You are right: there's nothing in Firefox or Chrome API that allows you to color individual tabs easily. But there are some workaround ideas..
Colorful Tabs uses theme override to style individual tabs, including (by default) based on domain, using the browser.theme API that only Firefox supports. However, after trying it out, it might not fit your requirements: in current Firefox version it only affects the color of the currently selected tab (and the address bar), not providing you with a good overview.
Some other extensions for Firefox, for example TST Colored Tabs use sidebar tab representation that duplicates the tab bar, with possible enhancements. Also not ideal, and also Firefox-specific.
For Chrome, there's a Chrome-specific API tabGroups that can add color outline to tabs, but only by adding them to a group. You can have many groups, but it's still going to be ugly if your tabs are interspersed or moved around.
So let me propose an out of the box solution: use a custom favicon per application context instead of trying to change how the tab UI looks. That would be always visible in the tabs strip without any code on the browser's part. You could also override favicons from extension code if there's no easy way to do it on the application side.
I've tried searching for this, and the closest related question that I could find was from 3+ years ago and had to do with the incognito window being dark, while a normal chrome window was light back then.
Now that we have the ability to have a light or dark mode browser, it's hard to find an icon design and color that looks good for both light and dark modes. Here's an example:
In the image above you can see that the first and third icons are black, so they are hard to see when using dark-mode. The middle icon (the one I'm using for my extension)looks great on dark mode, but terrible on light mode. See below:
So does anyone know if there is there a way to detect the browser mode (light or dark) and swap out the icon?
Thanks to wOxxOm I was able to figure this out.
First, I needed to create a content script (which I called toggleIcon.js) and add it to the manifist.json file.
Then I added the following to toggleIcon.js - which sends scheme: "dark" to my background.js file if window.matchMedia matches prefers-color-scheme: dark.
Then in my background.js file I listen for that message, and if request.scheme == "dark" I use chrome.broserAction.setIcon to change the paths for each of my icons to the dark version.
This effectively overrides my original icon paths as declared in the manifest.json file (as shown below).
The only downside I see is that this requires a content_script, which if you want your extension to work on any page, requires you to also add "matches": ["<all_urls>"] to your extension, which slows down the approval process. Which is why in my comments above I mentioned I had been avoiding using a content_script.
Also, I think it makes sense to use the version of your icons that work best on light-mode as your default, because I think the chrome extension page will pull from these for some of the icons they use (and that page has a white background). As an example, here's how my old icon looked (not enough contrast).
Hopefully this helps someone else!!
Is there a way to force a certain tab to render, even without currently being the active tab?
The reason i need to do this is because my extension uses chrome.tabs to open multiple tabs and switch between them, and whenever I switch to a tab which has not yet been active, the tab has not rendered yet, which causes a white flash to appear on the tab until the tab renders. The duration of the white flash is also proportional to how heavy the web page is to render.
What I've noticed though, is that if you switch to a tab which was active at least once in the past, the white flash does not appear (since it has been rendered at least once in the past)
I need to force a tab to be rendered before switching to it, so that the white flash doesn't appear.
I am writing on chrome version 38 (due to technical restrictions)
Thanks
No. You can't control it.
The white flashing is indeed an annoying known issue.
The only wild idea that can be implemented right now:
create a new minimized window with a blank url or about:blank,
move the tab you need into that window via chrome.tabs.move
now that the tab is active Chrome should render it even in a minimized window
then after a while move the tab back and activate it
In a Chrome extension I want to change the viewport size, something like DevTools responsive view. I am looking into https://developer.chrome.com/extensions/tabs#type-ZoomSettingsMode and see methods for changing the zoom but not the actual width/height.
Dev Tools achieve this through debugger protocol.
You can try and emulate that, but you'll need to use chrome.debugger API.
The relevant command seems to be this: Emulation.setDeviceMetricsOverride - note that this is not part of the "stable" protocol and may change without warning.
I'm trying to create a chrome extension that will allow me to display the current URL in a modal or popup window. The URL will be enlarged so that it is easier for students to see in the classroom. My goal is to get away from my current method, which is to copy/paste the URL into notepad and enlarge the font so that students in the back of the room can see it. It would be great if I could simply click on an extension and have the URL displayed in a nice large font. Unfortunately, this is the first chrome extension I've ever written, so I'm running into all sorts of n00b issues.
Anyway, I've gotten close by following this post:
How can I get the URL of the current tab from a Google Chrome extension?
Here's my code:
chrome.tabs.getSelected(null,function(tab) {
var tablink = tab.url;
document.write("<h1 style='font-size: 100px;'>" + tablink + "</h1>");
});
The problem is this code opens the URL in a popup with a horizontal scroll bar.
I either need to:
figure out a way to turn on word-wrap (to eliminate the scroll bar) ... or
adjust the width of the popup window so that it takes up the entire width of the screen ... or
find a different window solution (modal, new window that's alwaysOnTop, etc)
I tried chrome.windows.create but I couldn't figure out how to adapt the code above to use chrome.windows.create, and I also couldn't figure out how to make the resulting new window have active focus (focused: true didn't seem to work for me).
I also read that chrome.tabs.getSelected has been deprecated and I should be using chrome.tabs.query. However, I've had trouble getting the query method to work.
Again, this is my first chrome extension, so your patience, understanding, and help is greatly appreciated. Thanks!