如何删除注入的CSS文件？

Question

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

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

- JMaylin

---

当我遇到这个问题时，我已经在这里询问了你的第三个问题，关于为什么注入的CSS不会显示在开发工具中。看起来没有人尝试在这里回答它，所以我将保留我的回答。 - foobarbecue

Answer 1

我不确定这个问题的背景是什么，但似乎您想以一定的方式突出网页的特定元素，并能够切换自定义高亮。 （而不是样式化扩展创建的元素）

由于您无法实际删除CSS文件或通过添加相同名称的文件来擦除它，因此建议采取以下措施：

• 将自定义样式包装在类似 body.JMaylinCustomStyles 的东西中
• 使用JavaScript向 body 元素添加或删除 JMaylinCustomStyles 类。
• 没有第三步骤。

好处是它不会增加太多工作量，您不必弄清如何在第二个样式表中覆盖自定义样式（这总是非常烦人和容易出错），甚至可以在CSS优先级上获得一些优势，从而更有可能应用您的样式。

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

- Timothée Boucher

---

谢谢Timothée，我会这样做的。 - JMaylin

没有第三步。 - e382df99a7950919789725ceeec126

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。但这会导致每次页面加载时都需要加载文件的开销。

- David Gilbertson

---

谢谢分享，David。这是一个有趣的解决方案。 - JMaylin

@JMaylin 不客气。扩展程序已完成，这里是链接，代码是原始的，所以您应该能够解压缩并检查 https://chrome.google.com/webstore/detail/skinny/lfohknefidgmanghfabkohkmlgbhmeho?utm_source=chrome-ntp-icon - David Gilbertson

我喜欢你的扩展程序，但我们是竞争对手，这是我的一个扩展程序之一：https://chrome.google.com/webstore/detail/read-fast-speed-reading-e/pnffahcjemjliibgcafjpklgmbeknldi :D - JMaylin

Answer 3

没有API可以删除CSS文件。您最好的选择可能是插入另一个文件，该文件将替换您插入的第一个文件中的所有CSS设置。 https://developer.chrome.com/extensions/tabs.html

- Ryan Erb

---

当我尝试注入一个空的style.css时，它无法覆盖先前的样式。 - JMaylin

你可能需要明确地覆盖所有选项。例如，如果你将背景颜色更改为蓝色，你就必须将其设置回白色。 - Ryan Erb

那是一个选项。但在我的情况下，它不起作用，因为我不应该知道默认值。 - JMaylin

另一个选择是使用Javascript保存所有当前的CSS设置，然后同样使用Javascript设置您的新设置。这将需要更多的代码，但您会拥有更多的控制权。http://www.w3schools.com/jquery/jquery_css_classes.asp - Ryan Erb

是的，如果我找不到其他解决方案，我可以这样做。 - JMaylin