52

我正在尝试从作为内容脚本注入的 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 的其他方式？

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

4

2 回答 2

102

您可以添加到清单的权限字段；请参阅web_accessible_resources。因此，您可以将其添加到清单中：

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

另见“程序注入”。和insertCSS()。

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

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

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

于 2012-07-19T04:50:29.647 回答
0

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

于 2021-04-26T04:31:22.687 回答