Livia Zhang Livia Zhang - 5 months ago 19
Javascript Question

Chrome Extension: Programmatically setting browser action icon causes the icon to pixelate

I tried to change the browser action icon in background.js using the following code

chrome.browserAction.setIcon({path: "img/logo-off.png", tabId:tab.id});


However, this is causing the icon to be pixelated really bad (flappy bird style).

Has anyone had the same problem? How should I solve it.

Xan Xan
Answer

I just finally got my hands on Chrome 38 on a high-DPI Windows screen, and it shows the same behavior.

For high-DPI screens, you need to provide higher-resolution icons, and update the icon providing alternatives:

chrome.browserAction.setIcon({
  path: {
    19: "img/logo-off.png",
    38: "img/logo-off-hidpi.png"
  },
  tabId: tab.id
});

Chrome will select appropriate image based on screen DPI. It currently supports only 19x19 and 38x38 scales.

Edit (June 2016):

Chrome appears to be moving towards Material Design for its toolbar, and that changes browser icon requirements to 16x16 (32x32 for HiDPI). It's advised to provide those as well to be ready for the switch (which already happened in Linux, intentionally or not).