Light & Dark browserAction icons in Chrome 51

Question

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

Answer 1

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.