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

我想在页面中添加一个自定义样式表，而不需要内容脚本。我的CSS是好的，但下面的代码，使用onUpdated和onCreated事件侦听器不起作用。的manifest.json如何从每个页面的背景页面运行chrome.tabs.insertCSS？

部分：

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

来源

2012-03-20 arathunku

我想我找到了一个地方，我的解决方案是...控制台与错误... – arathunku 2012-03-20 21:36:25

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?。

来源

2012-03-20 21:49:47

我编辑了“onCreate”，而你正在写答案，对不起。现在它工作正常，但加载完成后tab.url以某种方式未定义，我不能使用indexOf/match。 – arathunku 2012-03-20 22:41:27

@arathunku更新了答案。 ['chrome.tabs.onCreated']（http://code.google.com/chrome/extensions/tabs.html#event-onCreated）的事件监听器只有一个参数（tab），而['chrome.tabs .onUpdated']（http://code.google.com/chrome/extensions/tabs.html#event-onUpdated）收到3：tabId，updateInfo，标签。 – 2012-03-20 22:47:37

谢谢！我必须更仔细地阅读参考资料; / – arathunku 2012-03-21 08:06:14

我几乎做同样的Chrome 23（2012年末），并以我看来，

的onCreate不需要了（onUpdated将即使是冷启动燃煤完美和选项卡未选中）
changeInfo状态“loading”注入脚本的速度很快，但最终可能会注入两次，甚至更糟糕，这种方式太早了（它显示在检查器中，但大多数规则将被覆盖该页面的规则;进口商是强制性的）
with changeInfo status“complete”脚本插入得太晚（有时载入时间较长，这可能会很烦人），但它更稳定，并且由于某种原因它不会在检查器中显示。

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

（我真的不知道，如果它是一个答案本身，遗憾的是这篇文章太长是注释 - 为URL检查我自己用，当然正则表达式，但是这已经上面注意到）

来源

2012-11-24 10:55:19 Szabi

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

回答

相关问题