0

I'm new to Chrome extensions so bear with me.

I've tried many of the ways that were answered to other very similar questions but nothing seem to work.

In my manifest.json I added this code:

"content_scripts": [
    {
        "matches": ["http://*.website.com/*", "https://*.website.com/*"],
        "js": ["icon.js"]   
    }
]

As far as I know this should inject the script icon.js to the websites in the "matches".

The script icon.js is only this code: chrome.runtime.sendMessage({icon:true}) therefore I expect that "icon:true" is sent as a message to my background script.

In my background.js I have this code (copied from this answer: How to dynamically change a chrome extension's icon? being fairly recent compared to others I have found):

chrome.runtime.onMessage.addListener(function(msg, sender, senResponse) => {
    if(msg.value == true) {
        chrome.runtime.query({active:true, windowType:"normal", currentWindow: true}, function(d) {
            var tabID = d[0].id;
            chrome.browserAction.setIcon({path: 'images/icon_16_red.png'}); 
        })
    }
})

As far as I understood this code should receive the message "icon:true", and change the icon of the extension.

I do not get any Error. It doesn't work either though and I cannot understand why.

I realize that there could be a much easier way to do what I'm trying to do, so feel free to say so.

Thank you!

Edit:

Thanks to @wOxxOm I managed to make my code work. I also realized that the result my code creates is not what I'm looking for and that's a big step forward!

The tweaks to my code were these:

In icon.js chrome.runtime.sendMessage({icon:true});

Forgot the semicolon!

In the background.js

chrome.runtime.onMessage.addListener(function(msg, sender, senResponse) => {
  if(msg.icon == true) {
    chrome.browserAction.setIcon({path: 'images/icon_16_red.png', tabId: sender.tab.id}); 
  }
})

Compared to the one before is way lighter.

This code works! That is as long as you have a "browser_action": {} set in your manifest.json.

The only problem with my needs is that it'll work when you refresh the targeted website and not simply by moving to the tab where the website is already running/loaded.

Jack Conrad
  • 1
  • 3
  • Most probably your manifest lacks `"browser_action": {}`, see also [Accessing console and devtools of extension's background.js](https://stackoverflow.com/a/10258029). BTW indeed there's a better method: [chrome.declarativeContent API](https://developer.chrome.com/extensions/declarativeContent) with SetIcon action so there's no need for a content script. – wOxxOm Sep 03 '20 at 14:11
  • I actually have a "browser_action": {} set. But I'm more interested in the better method, I'll look into it and try to make it work, and in case I'll come back to ask for more! Thank you for the fast reply @wOxxOm – Jack Conrad Sep 03 '20 at 14:15
  • Regarding your current code, replace `msg.value` with `msg.icon`, and remove the entire chrome.runtime.query thing, there's no need for it. – wOxxOm Sep 03 '20 at 14:31
  • Ok, I did those changes and I found another tiny detail that wouldn't make the code work, that is in the content script I was missing the final `";"`. Now though it changes it permanently, so I will have to add another rule that will check any other website apart the one I'm interested in? – Jack Conrad Sep 03 '20 at 14:54
  • In addition to `path` parameter you can specify `tabId: sender.tab.id` – wOxxOm Sep 03 '20 at 15:15
  • That helped to restrain the change to only the specific tab and it's good. But I just realized that my code works only if I refresh the tab with the website I'm interested in, not if I just click on the tab..therefore I guess I hope the other method you mentioned @wOxxOm is what I'm looking for. – Jack Conrad Sep 03 '20 at 15:33

0 Answers0