如何删除注入的 CSS 文件？

Question

我使用chrome.tabs.insertCSS(null, {file: "style.css"}); 在页面中插入一个css文件，它工作正常。

• 但是有没有办法删除文件？
• 另外，如果我注入另一个名为 style.css 的文件，它会覆盖第一个文件吗？
• 顺便问一下，我在哪里可以看到注入的 CSS 文件？脚本可以在（chrome 开发者工具的）“Sources/Content Scripts”中查看，但我找不到 CSS 文件。

Answer 1

我不确定这个问题的上下文是什么，但听起来您可能想以某种方式突出显示页面的特定元素并能够切换该自定义突出显示。 （而不是您的扩展程序将创建的样式元素）

由于您实际上无法删除 CSS 文件或只是通过添加同名文件来删除它，我建议如下：

• 用body.JMaylinCustomStyles 之类的方式包装您的自定义样式
• 使用 JavaScript 向 body 元素添加或删除 JMaylinCustomStyles 类。
• 没有第 3 步。

好处是它不会在你现有的基础上增加太多工作，你不必弄清楚如何在第二个样式表中覆盖你的自定义样式（这总是很烦人且容易出错）并且您甚至可以在 CSS specificity 中获得一些收益，因此您的样式更有可能被应用。

请注意，“包装”样式的最佳方法是使用 Sass 或 LESS，因为您实际上可以在文件顶部添加 body.JMaylinCustomStyles { 并在底部添加 }。

Answer 2

我刚刚遇到了同样的问题，并想分享我的解决方案。我正在调用一个内容脚本，然后它将像这样加载或卸载 css：

function loadCSS(file) {
  var link = document.createElement("link");
  link.href = chrome.extension.getURL(file + '.css');
  link.id = file;
  link.type = "text/css";
  link.rel = "stylesheet";
  document.getElementsByTagName("head")[0].appendChild(link);
}

function unloadCSS(file) {
  var cssNode = document.getElementById(file);
  cssNode && cssNode.parentNode.removeChild(cssNode);
}

根据chrome.storage 中的数据，调用哪个逻辑也在内容脚本中。所以你需要做的就是注入脚本，它会添加/删除 css。

我的情况实际上有点复杂，所以我总是加载内容脚本并向其发送消息以加载或卸载 css。但这有在每次页面加载时加载文件的开销。

Answer 3

没有删除 CSS 文件的 API https://developer.chrome.com/extensions/tabs.html

您最好的选择可能是插入另一个文件，该文件将替换您插入的第一个文件中的所有 CSS 设置。