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

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

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

I found 类似的问题 https://stackoverflow.com/questions/9345003/can-i-inject-a-css-file-programmatically-using-a-content-script-js-file关于注入CSS，但是我在使用代码时遇到了问题接受的答案 https://stackoverflow.com/a/9345038/272770。这是我的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？

注意：我无法直接从清单中包含样式表。

您可以添加到清单的权限字段；看网络可访问资源 https://developer.chrome.com/extensions/manifest/web_accessible_resources。因此，您可以将其添加到清单中：

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

也可以看看“程序化注入” https://developer.chrome.com/extensions/content_scripts#pi. and insertCSS() https://developer.chrome.com/extensions/tabs#method-insertCSS.

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

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

尽管我知道您不想在这种情况下这样做。