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（带有d！）。

修复此问题后，您最好将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?。

Answer 2

我几乎和Chrome 23（2012年末）一样，对我来说似乎是

onCreate不再需要（ onUpdated 即使冷启动且未选中标签也会被完全解雇）
changeInfo状态“加载”非常快速地注入脚本，但它可能最终注入两次，甚至更糟，太早（它显示在检查器中，但大多数规则将被覆盖页面的规则;重要的是强制性的）
使用changeInfo状态“完成”脚本插入的时间要晚得多（有时加载时间较长，这可能非常烦人），但它更稳定，并且由于某种原因它没有在检查器中显示。

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status === "complete") {
        chrome.tabs.insertCSS(tabId, {code: "body{border:1px solid red}"});
    }
})

（我不确定这是否是一个答案本身，不幸的是这篇文章太长了不能发表评论 - 对于网址检查我自己当然使用正则表达式，但这已经在上面说过了）

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

2 个答案: