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

【问题标题】：Inject CSS conditionally via chrome extension options通过 chrome 扩展选项有条件地注入 CSS
【发布时间】：2016-05-07 15:25:25
【问题描述】：

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

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

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

manifest.json

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

【问题讨论】：

尝试将style 元素添加到文档中？
当我只希望它发生在匹配的 url 上时，我该怎么做？
“当前复选框 true 或 false 值存储在 chrome.storage 中。存储或检索复选框选中状态没有问题。” 检查location.href at onchange 复选框事件？
我认为在开发 chrome 扩展时这是错误的方法。除非你能纠正我。根据我在 chrome 扩展文档上阅读的内容，您应该使用“chrome.tabs.insertCSS”。问题是我不知道如何根据 content_scripts 有条件地这样做。
未尝试 chrome.tabs.insertCSS ，之前尝试在 html 调整 css 文档 github.com/guest271314/toggleStyles-chromium-extension

标签： javascript css google-chrome google-chrome-extension

【解决方案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

【讨论】：