Reputation: 495
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
Reputation: 648
Note: If your using Chrome Extension Manifest V3, the API has changed from either:
... to the unified ...
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
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
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