如何从每页的背景页面运行chrome.tabs.insertCSS？

Question

我想在没有内容脚本的页面中添加自定义样式表.我的CSS没问题,但下面的代码,使用onUpdated和onCreated事件监听器不起作用.

部分manifest.json:

"permissions": [
      "http://www.site_domain.com/*",
      "tabs"],

background.html:

chrome.tabs.onUpdated.addListener(function (tab) {
    var tabUrl = tab.url;
    if (tabUrl.indexOf("site_domain") != -1) {
        changeBgkColor();
    }
});

chrome.tabs.onCreated.addListener(function (tab) {
    var tabUrl = tab.url;
    if (tabUrl.indexOf("site_domain") != -1) {
        changeBgkColor();
    }
});

function changeBgkColor(){
    chrome.tabs.insertCSS(null, {file:"css/styles.css"})
};

Answer 1

chrome.tabs.onCreate必须替换chrome.tabs.onCreated(使用广告!).

修复此问题后,您最好tabId将chrome.tabs.insertCSS方法传递给该方法.此外,通过合并事件侦听器来减少代码重复:

chrome.tabs.onCreated.addListener(do_something);
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    if (info.status == 'complete') do_something(tab);
});

function do_something(tab) {
    var tabUrl = tab.url;
    if (tabUrl && tabUrl.indexOf("site_domain") != -1) {
        // changeBgkColour() here:
        chrome.tabs.insertCSS(tab.id, {
            file: "css/styles.css"
        });
    }
}

由于在创建选项卡后立即调用这些事件.每个规则可能必须足够!important,以防止规则被页面上的样式表覆盖.

根据文档onCreated,url当事件被触发时可能不会设置属性,因此添加tabUrl &&条件,以防止可能的错误.

此外,您的域名检查不足..indexOf('google.com')也会匹配http://stackoverflow.com/q/x/what-is-google.com?.