如何从 Chrome 扩展的选项页面启用/禁用 manifest.json CSS 内容脚本？答案

【问题标题】：How to enable/disable manifest.json CSS content script from Chrome Extension's options page?如何从 Chrome 扩展的选项页面启用/禁用 manifest.json CSS 内容脚本？
【发布时间】：2016-12-11 04:16:47
【问题描述】：

有没有办法从browserAction 或pageAction 图标禁用/启用CSS 内容脚本？我说的是在一组特定的匹配页面上运行清单中定义的 CSS 内容脚本的那种脚本。所以，如果清单包括：

"content_scripts": [
  {
    "matches": [ "*://*.somewhere.com/*" ],
    "css": ["somewhere.css"]
  }
]

这会在somewhere.com 上注入somewhere.css。有没有办法编写一个browserAction 或pageAction 选项弹出窗口来完全启用或禁用 CSS 内容脚本？

我知道我可以编写一个 JavaScript 内容脚本来监听这样的选项弹出窗口，然后在页面中添加/减去 CSS 规则和/或类。但我希望在页面呈现之前插入这个 CSS，据我所知，唯一的方法是使用 CSS 内容脚本。

但是，有没有办法从弹出窗口中完全启用或禁用仅具有 CSS 内容脚本的扩展程序？我看不出有办法做到这一点。

【问题讨论】：

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

【解决方案1】：

不，很遗憾，没有办法关闭manifest.json content_script（CSS 或 JavaScript）的注入。指定的代码将被注入到所有匹配的 URL 中。

为了完全控制注入或不注入，您需要通过tabs.insertCSS() 和/或tabs.executeScript 执行注入。使用这些方法注入或不注入脚本和 CSS 完全由扩展中的 JavaScript 控制。使用这些方法当然可以获得与使用 manifest.json content_script 条目获得的功能相似的功能，但控制性和复杂性更高。

根据您想要做什么，更合适的方法可能是使用包含RequestContentScript 操作的chrome.declarativeContent onPageChanged 规则。然而，有各种迹象表明 Chrome 的稳定版本实际上支持这一点。此外，它无法提供runAt 属性。因此，它可能不适合您正在做的事情。

【讨论】：

但我是否正确，在构造或显示 DOM 之前插入 CSS 的唯一方法是从 manifest.json 文件中注入它？这就是为什么我希望保留它而不是转移到tabs.insertCSS()。
我需要做更多的测试，看看你是否正确。
感谢您的研究。我试图避免在 DOM 渲染后添加样式时发生的闪光。例如，假设我要使用 img { opacity:0; } 之类的 CSS 样式隐藏所有图像；在这种情况下，我不想在图像消失之前短暂地看到它们。相反，我只是不想看到他们。通过 CSS 内容脚本注入即可完成此操作。
@mix 测试表明您可以使用tabs.executeScript() 和runAt:'document_start' 进行注入在manifest.json 进行注入之前 @ 987654340@ 和run_at:"document_start"。当然，在document.head 和document.body 存在之前（即当时它们都是null）。我没有使用tabs.insertCSS 进行测试，因为没有简单的方法可以确定何时发生注入。 DOM 的状态，但我的期望是它会相似（content_script 文档提到 CSS 是在脚本之前注入的）。
@mix，应该注意的是，要获得 tabs.executeScript() 实际注入脚本以使内容脚本在文档开始之前运行的时间有点复杂。然而，这样做似乎可以始终如一地完成（在我进行的有限测试中）。

【解决方案2】：

您无法更改manifest.json 的内容，一旦您在其中指定content_scripts，它们将始终被加载。

如果您在注入内容脚本时需要更大的灵活性，则必须使用新的contentScripts.register() Firefox API 及其Chrome polyfill 来注册和注销脚本。

然而，API 需要重新加载页面才能注入和删除 CSS。您可以改用即时 chrome.tabs.insertCSS，但您仍然无法在不重新加载的情况下删除 CSS。

另外，我写了2个模块来帮助整个过程：add/remove domains + inject CSS or JS

注意：请勿使用chrome.declarativeContent，因为它基本上未被使用且不受支持，特别是breaks with CSS

【讨论】：