how to change extension icon based on page url and alert differently in different icons

google-chrome-extension, javascript

Solution

I guess i found a solution: in background.js:

 var alertError = function(arg){
                if(arg.url.match(/https:\/\/google\.com\/*/) == null){
                    alert('Something');
                }
            };
chrome.browserAction.onClicked.addListener(alertError);
chrome.tabs.onActivated.addListener(function(info){
chrome.tabs.get(info.tabId, function(change){
        if(change.url == undefined){
            chrome.browserAction.setPopup({tabId: info.tabId, popup: ''});
            chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: info.tabId});
            console.log('undefined');
        }
        else if(change.url.match(/https:\/\/google\.com\/*/) == null){
            chrome.browserAction.setPopup({tabId: info.tabId, popup: ''});
            chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: info.tabId});
            console.log('not matching');
        }
        else{
            chrome.browserAction.setPopup({tabId: info.tabId, popup: '../html/popup.html'});
            chrome.browserAction.setIcon({path: '../icons/icon.png', tabId: info.tabId});
            console.log('matched');
        }
    });
});
chrome.tabs.onUpdated.addListener(function (tabId, change, tab){
    if(tab.url == undefined){
        return;
    }
    else if(tab.url.match(/https:\/\/google\.com\/*/) == null){
        chrome.browserAction.setPopup({tabId: tabId, popup: ''});
        chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: tabId});
        console.log('not matching');
    }
    else{
        chrome.browserAction.setPopup({tabId: tabId, popup: '../html/popup.html'});
        chrome.browserAction.setIcon({path: '../icons/icon.png', tabId: tabId});
        console.log('matched');
    }
});

and in manifest:

"browser_action": {
    "default_title" : "Title",
    "default_icon" : "icons/icon.png",
    "default_popup": "html/popup.html"
 },

Problem

I am building a chrome extension and I need to display some icon indicating disabled if the url doesnt matches to some specific pattern and alert if the user clicks on disabled icon and no popup is shown. Icon is the chrome browserAction icon. But if the user clicks on icon which is indicating enabled, the default popup should show. Basically the popup should not open when the page url is not matching and should give an alert. i am current using this in the background page but its looks very inefficient, most of the time it works but shows alert only after page reload: `background.js` ``` var alertError = function(arg){ alert('Something'); }; chrome.tabs.onActivated.addListener(function(info){ chrome.tabs.get(info.tabId, function(change){ if(change.url == undefined){ chrome.browserAction.setPopup({tabId: info.tabId, popup: ''}); chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: info.tabId}); chrome.browserAction.onClicked.removeListener(alertError); chrome.browserAction.onClicked.addListener(alertError); console.log('undefined'); } else if(change.url.match(/https:\/\/google\.com\/*/) == null){ chrome.browserAction.setPopup({tabId: info.tabId, popup: ''}); chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: info.tabId}); chrome.browserAction.onClicked.removeListener(alertError); chrome.browserAction.onClicked.addListener(alertError); console.log('not matching'); } else{ chrome.browserAction.setPopup({tabId: info.tabId, popup: '../html/popup.html'}); chrome.browserAction.setIcon({path: '../icons/icon.png', tabId: info.tabId}); console.log('matched'); } }); }); chrome.tabs.onUpdated.addListener(function (tabId, change, tab){ if(change.url == undefined){ return; } else if(/https:\/\/google\.com\/*/) == null){ chrome.browserAction.setPopup({tabId: tabId, popup: ''}); chrome.browserAction.setIcon({path: '../icons/icon-disabled.png', tabId: tabId}); chrome.browserAction.onClicked.removeListener(alertError); chrome.browserAction.onClicked.addListener(alertError); console.log('not matching'); } else{ chrome.browserAction.onClicked.removeListener(alertError); chrome.browserAction.setPopup({tabId: tabId, popup: '../html/popup.html'}); chrome.browserAction.setIcon({path: '../icons/icon.png', tabId: tabId}); console.log('matched'); } }); ``` EDIT manifest file: ``` { "manifest_version": 2, "name": "Something", "description": "Something", "version": "2.5", "permissions": [ "tabs", "<all_urls>", "storage" ], "background": { "scripts" : ["js/localstoragedb.min.js", "js/background.js"] }, "icons":{ "16" : "icons/icon16.png", "48" : "icons/icon48.png", "128" : "icons/icon128.png" }, "browser_action": { "default_title" : "Title", "default_icon" : "icons/icon.png" }, "web_accessible_resources": ["js/inject.js"] } ```

Original source