Question

我知道如何使用此方法https://stackoverflow.com/a/7619104/1157283

将CSS注入指定的URL

但是，如果我只想在点击浏览器操作时将其注入这些页面，该怎么办？我正在阅读有关程序化注入http://developer.chrome.com/extensions/content_scripts.html#pi的内容，这使得您似乎必须获取要将CSS注入的所有页面的tabID，然后循环它们以为每个tabID注入CSS？ / p>

这是必需的还是我在这里完全不合适？看起来它应该比我建议的更直接。谢谢！

Answer 1

不要害怕我的朋友，这是解决问题的正确方法。

<强>的manifest.json 我们将指定要注入css的URL以及权限指令中的选项卡。

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

<强> background.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://*/*的所有页面的权限，则可以跳过匹配部分。这为内容脚本提供了更大的灵活性，内容脚本只通过匹配触发;请记住，与任何CSS一样，您需要指定适当的规则来覆盖页面，以便查看更改，大多数情况下这意味着在您的CSS中使用important!标记。

Chrome扩展程序 - 点击浏览器操作后向网页注入css

1 个答案: