13

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

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

3 回答 3

9

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

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

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

好处是它不会在您拥有的基础上增加太多工作，您不必弄清楚如何在第二个样式表中覆盖您的自定义样式（它总是非常烦人且容易出错）并且您甚至在CSS 特异性方面有所收获，因此您的样式更有可能被应用。

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

于 2013-08-30T15:56:38.233 回答
8

我刚刚遇到同样的问题，并认为我会分享我的解决方案。我正在调用一个内容脚本，然后它将像这样加载或卸载 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。但这有在每次页面加载时加载文件的开销。

于 2013-10-01T23:14:57.157 回答
2

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

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

于 2013-08-30T13:19:16.190 回答