CODEWITHSUNDEEP
google-chrome-extension
petabyte
petabyte

Reputation: 1567

How to change the default icon as soon as page loads?

I have this code to change my icon, but it only works when I click on it. How can I have the icon change as soon as the web page loads?

document.addEventListener('DOMContentLoaded', function () {
  chrome.browserAction.setIcon({path: 'different_icon.png'});

});

Upvotes: 1

Views: 479

Answers (1)

Jude Osborn
Jude Osborn

Reputation: 1798

You'll need to pass a message to the background page and change the icon there. For example, your manifest file would have this content script:

"content_scripts": [
    {
        "matches" : ["<all_urls>"],
        "js" : ["content.js"],
        "run_at": "document_end"
    }
],

As you can see, it runs when the document is done loading. Your content script passes a message to the background page:

chrome.runtime.sendMessage({changeIcon: true});

And finally, your backgound page receives the message and changes the icon:

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.changeIcon) {
            chrome.browserAction.setIcon({path: 'different_icon.png'});
        }
    }
);

Upvotes: 2

Related Questions