Jordan
Jordan

Reputation: 495

Changing chrome extension icon

So i know how to change the icon for the extension-

chrome.browserAction.setIcon({
    path : "green.png"
});

But how would I make it so im not changing the icon and instead i'm adding a little image to the in-browser icon? Im really not sure what to call it... It would be similar to the extension "AdBlock" where it has its icon then a number in the bottom left of the icon telling you how many ads have been blocked.

For my extension, i'm trying to display the "status" of the extension by showing a green/yellow/red square on the in-browser icon of the extension.

How would I make it so, say, a green square popped up in the bottom left of the icon, similar to the number of ads being blocked? Right now, I have 3 different images and I change the icon to the respective image but I feel there is a much more intuitive way to do this.

EDIT:

So I came up with this code, but the badge color stays red regardless of anything I do-

chrome.browserAction.setBadgeText( { text: " " } );

function setIconStatus(status){
    if (status == 1){
        chrome.browserAction.setBadgeBackgroundColor({color:"green"})
    } else if (status == 0){
        chrome.browserAction.setBadgeBackgroundColor({color:"red"})
    } else {
        chrome.browserAction.setBadgeBackgroundColor({color:"yellow"})
    }
}

And I get this console error-

Unchecked runtime.lastError while running browserAction.setBadgeBackgroundColor: Unknown error.
at setIconStatus (chrome-extension://blnceljpkdfniagjdagcnfeceanjcipe/rap.js:17:24)
at chrome-extension://blnceljpkdfniagjdagcnfeceanjcipe/rap.js:86:3reportIfUnchecked @ extensions::lastError:133handleResponse @ extensions::sendRequest:78

jquery.js:5 POST https://shibboleth.buffalo.edu/idp/Authn/Stateless 500 (Internal Server Error)x.support.cors.e.crossDomain.send @ jquery.js:5x.extend.ajax @ jquery.js:5x.(anonymous function) @ jquery.js:5(anonymous function) @ rap.js:116l @ jquery.js:3c.fireWith @ jquery.js:3k @ jquery.js:5(anonymous function) @ jquery.js:5

Upvotes: 1

Views: 4418

Answers (3)

George 2.0 Hope
George 2.0 Hope

Reputation: 648

Note: If your using Chrome Extension Manifest V3, the API has changed from either:

  • "chrome.pageAction.setIcon()"
  • "chrome.browserAction.setIcon()"

... to the unified ...

  • "chrome.action.setIcon()"

Ref: Migrating to Manifest V3 (MV3) >> Action API unification

If you attempt to use either pageAction or browserAction with MV3, you will receive the following error:

Error handling response: TypeError: Cannot read properties of undefined (reading 'setIcon')

Upvotes: 3

nick
nick

Reputation: 1207

Because you simply want a colored box to appear:

var status = " ";
chrome.browserAction.setBadgeText( { text: status } );
                                           // Red, Green, Blue, Alpha
chrome.browserAction.setBadgeBackgroundColor({color: [0,255,0,255]});

Other than that you could make dynamic changes to the icon image using an html canvas element. and then update browseActionIcon with the edited image.

Upvotes: 9

Sungguk Lim
Sungguk Lim

Reputation: 6218

For now, chrome.browserAction.setBadgeBackgroundColor(object details) doesn't support css style color keyword.

As described on https://developer.chrome.com/extensions/browserAction#method-setBadgeBackgroundColor, you can use hexadecimal RGB value or color array.

Upvotes: 2

Related Questions