javascript - 如何根据页面 url 更改扩展图标并在不同图标中以不同方式提醒

Question

我正在构建一个 chrome 扩展程序，如果 url 与某些特定模式不匹配，我需要显示一些指示已禁用的图标，如果用户单击已禁用的图标并且没有显示弹出窗口，则需要提醒。图标是 chrome browserAction 图标。但是，如果用户单击指示已启用的图标，则应显示默认弹出窗口。
基本上，当页面 url 不匹配时，弹出窗口不应打开，并且应发出警报。
我目前在后台页面中使用它，但它看起来效率很低，大部分时间它都有效，但仅在页面重新加载后才显示警报:

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');
    }
});

编辑
list 文件:

 {
  "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"]
}

Answer 1

我想我找到了一个解决方案:

在 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');
    }
});

在 list 中:

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