如何根据页面URL更改扩展图标,并在不同的图标中以不同方式发出警报

时间:2014-07-09 09:58:50

标签: javascript google-chrome-extension

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

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


修改
清单文件:

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

1 个答案:

答案 0 :(得分:3)

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

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

并在清单中:

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