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

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

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 19×19 pixels; on high-DPI screens Chrome may show a 38×38 icon.

Update: since Chrome has switched to Material Design in 53, this now expects 16×16 and 32×32 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.