Light & Dark browserAction icons in Chrome 51

Question

In Chrome 51, incognito windows now have a dark toolbar background, and previous versions used a light background. In general, this is not possible for a single 16x16 image to provide good contrast in both situations:

When displaying information to the user through the browserAction icon, what mechanism can an extension with dark and thematic icons be and switch between them depending on the current color of the toolbar?

Link to the source code for the displayed extension

Answer 1

There is no such simple mechanism (yet), and it sounds like a great feature request to do , at least for the manifest.

You can approximate this by finding open tabs incognito and replacing the browser action icon only for this tab.

 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 use the "split" incognito behavior (not the default), you can simply detect this 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 invoke the browser action icon, you can pass this.

Obviously, you can do this with imageData instead of path , just like your case.

You might want to check the version of Chrome while you are on it; I do not know a better way than mentioned here .