javascript - Chrome 扩展 - 在浏览器操作 onclicked 上将 css 注入(inject)页面

Question

我知道如何使用此方法将 CSS 注入(inject)指定的 URLS https://stackoverflow.com/a/7619104/1157283

但是，如果我只想在单击浏览器操作时将其注入(inject)到这些页面中怎么办？我正在阅读有关程序化注入(inject)的信息 http://developer.chrome.com/extensions/content_scripts.html#pi这使得您似乎必须获取要将 CSS 注入(inject)其中的所有页面的 tabID，然后遍历它们以为每个 tabID 注入(inject) CSS？

这是必需的还是我在这里完全偏离了目标？看起来应该比我建议的更直接。谢谢!

Answer 1

不要害怕我的 friend ，这里有一个适合您问题的解决方案。

list .json我们将指定要将 css 注入(inject)到的 url，以及权限指令中的选项卡。

"permissions":[
  "tabs",
  "https://google.com.mx/*"
],

背景.js添加适当的 onClick 监听器。

chrome.browserAction.onClicked.addListener(browserListener);

监听器看起来像这样

var browserListener = function(tab) {
    var regexPage = new RegExp(/https:\/\/www.google.com.mx\//); // We use a regular expresion to check which page was given.
    var match = regexPage.exec(tab.url); // We then check if the given page matches our expression.
    // If it matches and the status of the tab is complete...
    if(match && tab.status === 'complete') {
        //We insert the css
        chrome.tabs.insertCSS(tab.id, {
            file: "css/test.css"
        });
    }
}

如果您在权限指令中使用 https://*/* 请求对所有页面的权限，则可以跳过匹配部分。这使您对内容脚本具有更大的灵 active ，它们仅通过匹配触发；请记住，与任何 CSS 一样，您需要指定适当的规则来覆盖页面的规则以查看更改，这在大多数情况下意味着在您的 css 中使用 important! 标签.