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

How to inject CSS using content script file in Chrome extension?

本文关键字：脚本 文件 CSS 注入 Chrome 扩展      更新时间：2023-11-12

我正试图从JavaScript中注入我的CSS，JavaScript被注入为内容脚本：

"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);

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

拒绝负载铬-extension://phkgaaiaakklogbhkdnpjncedlbamani/fix.css.资源必须按顺序列在web_accessible_resources清单键中由扩展之外的页面加载。

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

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

您可以添加到清单的权限字段；请参阅web_accessible_resources。所以你应该把这个添加到清单中：

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

另请参阅"程序注射"。和CCD_ 2。

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

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

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

您可以使用element.classList.add（"my_new_class"）在元素中添加新类，在css中，您可以使用新添加的类对该元素进行样式设置。因此，单击仅添加类，然后仅运行该元素的css。

相关文章：