Question

我正在尝试从JavaScript注入我的CSS，这是作为内容脚本注入的：

"content_scripts": [
   {
      "matches": ["http://www.google.com/*"],
      "js": ["script.js"]
   }
],

我发现有关注入CSS的similar question，但在使用accepted answer中的代码时遇到了问题。这是我的script.js内容：

var link = document.createElement("link");
link.href = chrome.extension.getURL("style.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

加载某些页面后，此消息显示在控制台中：

拒绝加载镀铬的扩展：//phkgaaiaakklogbhkdnpjncedlbamani/fix.css。资源必须按顺序列在web_accessible_resources清单键中由扩展名以外的页面加载。

有什么方法可以解决这个问题吗？或者，也许，从该JavaScript文件中注入一些CSS的其他方法？

注意：我不能直接在清单中包含样式表。

Answer 1

您可以添加到清单的权限字段;见web_accessible_resources。所以你要将它添加到清单中：

    , "web_accessible_resources": [
        "fix.css"
    ]

另见"Programmatic injection"。和insertCSS()。

对于大多数应用程序，忘记所有createElement代码，只需将CSS文件添加到清单中：

"content_scripts": [
   {
      "matches":    ["http://www.google.com/*"],
      "css":        ["fix.css"],
      "js":         ["script.js"]
   }
],

虽然我知道你不想在这个确切的例子中这样做。

Answer 2

您可以使用 element.classList.add("my_new_class") 在元素中添加新类，在 css 中您可以使用新添加的类来设置该元素的样式。所以 onClick 只添加类，然后只运行该元素的 css。

如何在Chrome扩展程序中使用内容脚本文件注入CSS？

2 个答案: