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

Question

我正在尝试从JavaScript中注入我的CSS,它是作为内容脚本注入的:

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

我发现了关于注入CSS的类似问题,但是在使用来自已接受答案的代码时遇到了问题.这是我的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);

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

拒绝加载chrome-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css.资源必须列在web_accessible_resources清单键中,以便由扩展名外的页面加载.

有没有什么办法解决这一问题？或者,也许,从该JavaScript文件中注入一些CSS的其他方法？

注意:我不能直接从清单中包含样式表.

Answer 1

您可以添加到清单的权限字段; 请参阅web_accessible_resources.所以你要将它添加到清单:

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

另请参见"程序化注射".和insertCSS().

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

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

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