CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Anthony
Anthony

Reputation: 671

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

Upvotes: 14

Views: 17734

Answers (4)

Sanjay RD
Sanjay RD

Reputation: 91

Use this in v3 : use "icons" in manifest remember icons object have key value pair where key define the size of icon and value is the path of the icon.

chrome.action.setIcon({
    path : {
      "19": "images/icon-19.png"
    }
});

Upvotes: 0

Seth Samuel
Seth Samuel

Reputation: 355

Use this in Chrome V3

chrome.action.setIcon({ path: "media/background1.png" });

Upvotes: 1

Julian
Julian

Reputation: 767

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'
});

Upvotes: 10

Xan
Xan

Reputation: 77523

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.

Upvotes: 37

Related Questions