javascript - 通过 chrome 扩展选项有条件地注入(inject) CSS

Question

我有一个带有选项页面的 chrome 扩展程序，其中包含几个用于启用或禁用某些 CSS 样式的复选框(在一个特定的匹配 URL 上)。

当前复选框 true 或 false 值存储在 chrome.storage 中。存储或检索复选框选中状态没有问题。

我的问题是:如何根据复选框的选中状态将 CSS 注入(inject)特定页面？

list .json

"permissions": [
  "storage",
  "tabs",
  "management",
  "https://www.some-specific-website/home/*"
]

Answer 1

如果您正确配置了您的 list ，那么您的内容脚本将只在匹配的页面上执行。详情请看这里:https://developer.chrome.com/extensions/content_scripts

至于注入(inject)CSS，就看你想干什么了。您需要从内容脚本中的存储中读取以明确获取复选框的状态，如果找到则需要注入(inject)。

您要注入(inject)的东西是否相当小？如果是这样，最好只使用一些 JavaScript，方法是在 Dom 中选择您需要的元素，并向它们添加一个具有您要设置的属性的类。就其值(value)而言，添加类可能是更改某些元素的 CSS 而不是直接编辑其样式的最有效方法。

如果它相当大，您可以像您提到的那样在选项卡上使用 insertCSS 方法。您需要将选项卡权限(我认为它称为 activeTab 或其他奇怪的东西)添加到您的 list 文件中。从那里获取当前选项卡，然后使用原始 CSS 代码或更好的方式调用 insertCSS，即对 CSS 文件的文件引用以及要应用它的当前选项卡的 ID。有关更多信息，请参见此处:https://developer.chrome.com/extensions/tabs#method-insertCSS

另外，这里的 chrome 扩展示例页面中有一个带有相关示例的 zip 文件: https://developer.chrome.com/extensions/examples/api/storage/stylizr.zip