CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
chimbnoião
chimbnoião

Reputation: 9

How to show a different page action icon for each URL

I'm creating a simple extension to show an icon on different URLs.

My background script includes:

chrome.tabs.onUpdated.addListener(function(o,r,m){for(var c=[
"URL1",
"URL2",
],a=0;a<c.length;a++)if(~m.url.indexOf(c[a])){chrome.pageAction.show(o);break}});

I would like to display a different page action icon for each of the two URLs. How should I proceed?

Upvotes: 0

Views: 104

Answers (1)

Makyen
Makyen

Reputation: 33296

You appear to be looking for chrome.pageAction.setIcon().

I have re-written the code to be a bit more readable. I changed your use of Bitwise NOT, ~, to a test for !== -1. I used .some() to both loop through the urlList (a new Object containing both URLs and the icons) and to indicate if a match was found so that the page action icon could be hidden if the URL does not match. I assumed you wanted it hidden on a non-match, given that you were .show()ing it when there was a match.

var urlList=[{
    url:"URL1",
    icon:"/URL1icon.png"
},
{
    url:"URL2",
    icon:"/URL2icon.png"
}];

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
    if(!urlList.some(function(urlInfo){
        if(tab.url.indexOf(urlInfo.url) !== -1) {
            //The urlInfo.url must match the beginning of the tab's current URL.
            chrome.pageAction.show(tabId);
            chrome.pageAction.setIcon(tabId,{
                path:urlInfo.icon
            });
            return true;
        }
        return false;
    })) {
        //Hide the icon if the URL does not match.
        chrome.pageAction.hide(tabId);
    }
});

Upvotes: 1

Related Questions