why is this chrome.browserAction.setIcon method not working?

Question

I'm looking at the documentation page and I can't figure out whats wrong in my code:

chrome.browserAction.setIcon({
  details.imageData = {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

the documentaion says :

Note that 'details.imageData = foo' is equivalent to 'details.imageData = {'19': foo}'

so I'm extremely confused

Answer 1

Your code is basically a big syntax error. A JavaScript object literal expects to be a list of pairs key: value. You can't (and don't need) any assignments there in the key part.

So, fixing only the syntax error, it will be:

// Still wrong:
chrome.browserAction.setIcon({
  imageData : {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

This will fail. imageData expects binary blobs of pixel data obtained, for example, from <canvas>. If you want to supply paths, you need to use path property:

// Still wrong:
chrome.browserAction.setIcon({
  path : {
    "48": "Icons/iconfavorite48x.png",
    "64": "Icons/iconfavorite64x.png",
    "128": "Icons/iconfavorite128x.png"
  }
});

Note that you can only provide sizes it expects. If you include any other, it will fail. Quoting the docs:

If the number of image pixels that fit into one screen space unit equals scale, then image with size scale * 19 will be selected. Initially only scales 1 and 2 will be supported.

A normal-sized icon is 19x19 pixels; on high-DPI screens Chrome may show a 38x38 icon.

Update: since Chrome has switched to Material Design in 53, this now expects 16x16 and 32x32 respectively. You can supply both old and new sizes without errors.

So you can do this:

// Correct
chrome.browserAction.setIcon({
  path : {
    "19": "Icons/iconfavorite19x.png",
    "38": "Icons/iconfavorite38x.png"
  }
});

// Also correct
chrome.browserAction.setIcon({
  path : {
    "19": "Icons/iconfavorite19x.png"
  }
});

// Also correct
chrome.browserAction.setIcon({
  path : "Icons/iconfavorite19x.png"
});

The images don't have to have these dimensions, they will be scaled if necessary; but it's of course better to be exact.

Answer 2

For manifest version 3 you have to use chrome.action.setIcon instead of chrome.browserAction.setIcon.

For example, gray images in a separate folder:

   chrome.action.setIcon({
        path: {
            "16": "/icons/gray/icon16.png",
            "19": "/icons/gray/icon19.png",
            "32": "/icons/gray/icon32.png",
            "48": "/icons/gray/icon48.png",
            "128": "/icons/gray/icon128.png"
        }
    });

Alternatively, if not part of the question, it could be solved via setBadgeText:

state is my own variable.

chrome.action.setBadgeText({
  text: (state ? 'off' : '')
});

chrome.action.setBadgeBackgroundColor({
  color: '#2f2f2f'
});