Question

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

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

我的问题是：我如何根据复选框检查状态将CSS注入特定页面？

的manifest.json

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

Answer 1

如果您已正确配置了清单，那么您的内容脚本将仅在匹配的页面上执行。有关详细信息，请参阅此处：https://developer.chrome.com/extensions/content_scripts

至于注入CSS，取决于你想做什么。您需要从内容脚本中的存储中读取以明显显示复选框的状态，如果找到则需要注入。

你想要注射的是相当小的吗？如果是这样，最好只使用一些JavaScript，通过在Dom中选择所需的元素并使用您想要设置的属性为它们添加一个类来实现。对于它的价值，添加一个类可能是更改某些元素的CSS而不是直接编辑其样式的最有效方法。

如果它相当大，您可以在选项卡上使用insertCSS方法，如上所述。您需要向清单文件添加选项卡权限（我认为它被称为activeTab或奇怪的东西）。从那里，获取当前选项卡，然后使用原始CSS代码或更好的方法调用insertCSS，对CSS文件的文件引用以及要应用它的当前选项卡的id。有关详细信息，请参阅此处：https://developer.chrome.com/extensions/tabs#method-insertCSS

此外，Chrome拓展示例页面中还有一个带有相关示例的zip文件： https://developer.chrome.com/extensions/examples/api/storage/stylizr.zip

通过chrome扩展选项有条件地注入CSS

1 个答案: