javascript - how to change extension icon based on page url and alert differently in different icons - Stack Overflow

admin管理员组

文章数量:1332345

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\\/*/) == 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\\/*/) == 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"]
}

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\.\/*/) == 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\.\/*/) == 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"]
}

• javascript
• google-chrome-extension

Share Improve this question Follow edited Jul 9, 2014 at 11:00 user3815678 asked Jul 9, 2014 at 9:58 user3815678user3815678 16111 silver badge77 bronze badges 4

• Apologies, but I'm still not clear on what the problem is with your code: is it that it only works if you re-load the page? – FuzzyAmi Commented Jul 9, 2014 at 11:14
• no, it didnt work if you reload multiple times and meanwhile try to open the popup – user3815678 Commented Jul 9, 2014 at 11:45
• In your answer, could you explain what you changed? Its a pain to have to 'diff' the question and the answer. thx! – FuzzyAmi Commented Jul 9, 2014 at 11:49
• i added check in alertError function so that i dont need to add and remove listeners and added default popup. Earlier 'somehow' on reload the popup disappeared and alert didnt show but now since the alert has a check it shows when needed and since there is a default popup it never fails. Also if the url and tab changes the events(onUpdate and onActivated) are fired that do required changes. Tell me if i missed any other case that may affect this. – user3815678 Commented Jul 9, 2014 at 12:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I guess i found a solution:

in background.js:

 var alertError = function(arg){
                if(arg.url.match(/https:\/\/google\.\/*/) == 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\.\/*/) == 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\.\/*/) == 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"
 },

本文标签：