chrome.browserAction.setIcon not doing anything

Question

I am making a chrome extension, and the extension has two modes: always on (alwaysOn), or only when the user clicks it (onClick). I want to change the icon to be blue or red depending on the user's mode, so they can see it at a glance. However, after adding the chrome.browserAction.setIcon() line, the icon still doesn't change when it needs to. 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 runs perfectly, and the console.log() doesn't show any errors. Is there any reason javascript would be "skipping over" these particular lines of code? ("These particular lines of code" being 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 being read wrong or what.

EDIT: I opened the console and I get the message "Unchecked runtime.lastError while running browserAction.setIcon: Icon invalid." What does this mean? If I specify the full path starting from C:\Users...\blue-logo" I get the error message could not find.

Answer 1

I don't know why, but you can't use setIcon function with icon bigger than 190px width and height.

Bug or feature i don't know. Documentation don't tell us...

The strange thing is, you can use the same icon in the manifest.json file.

Answer 2

Your code is fine!

For it to work, Icon dimensions should 16x16, 48x48 or 128x128 px, as recommended on the official documentation:

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