Chrome.browserAction.setIcon does nothing

Question

I am making a chrome extension, and the extension has two modes: always on ( alwaysOn ) or only when the user clicks on it ( onClick ). I want the icon to be blue or red depending on the user mode, so they can see it at a glance. However, after adding the line chrome.browserAction.setIcon() icon still does not change when necessary. It just stays on the default logo.

Here is my background.js:

 // Get the behavior of the plugin; the default is set to "onClick", the other option is "alwaysOn" chrome.storage.sync.get({ extensionBehavior: 'onClick' }, function(items) { if(items.extensionBehavior == 'onClick'){ chrome.browserAction.setIcon({path: "blue-logo.png"}); chrome.browserAction.onClicked.addListener(function() { // When the extension icon is clicked, send a message to the content script chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response){}); }); }); } else { chrome.browserAction.setIcon({path: "red-logo.png"}); chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete') { // When the HTML loads, send a message to the content script chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response){}); }); } }); } }); 

Everything else works fine, and console.log () does not show any errors. Is there any reason javascript will skip these specific lines of code? ("These specific lines of code" are chrome.browserAction.setIcon({path: "blue-logo.png"}); and chrome.browserAction.setIcon({path: "red-logo.png"}); ). The images in question are in the same folder as my background.js, content_script.js, etc., so I'm not sure if the path is just read incorrectly or what.

EDIT: I opened the console and I got the message "Unchecked runtime.lastError when starting the browserAction.setIcon: icon is invalid." What does it mean? If I specify the full path starting with C: \ Users ... \ blue-logo "I cannot find the error message.

Answer 1

I do not know why, but you cannot use the setIcon function with an icon exceeding the width and height of 190px.

Error or function that I do not know. The documentation does not tell us ...

Strange, you can use the same icon in the manifest.json file.

Answer 2

Your code is OK!

For it to work, the icon sizes should be 16x16, 48x48 or 128x128 px, as recommended in the official documentation:

https://developer.chrome.com/extensions/manifest/icons