Chrome 扩展：如何在注入后删除内容脚本 CSS？答案

【问题标题】：Chrome Extension: How to remove content script CSS after injection?Chrome 扩展：如何在注入后删除内容脚本 CSS？
【发布时间】：2017-04-07 14:53:27
【问题描述】：

我需要删除从 content_scripts (manifest.json) 注入的 CSS 文件 styles.css

"content_scripts": [{
  "matches": ["*://*.youtube.com/*"],
  "css": ["styles.css"],
  "js": ["jquery-3.1.1.min.js", "content.js"]
}],

我想在我的扩展中做一些解释。

首先styles.css 被加载，它改变了页面上的一些代码。它有效。

然后，用户想要点击按钮并关闭扩展。它有效。

但是styles.css 必须被删除。它不起作用。

一段时间后，用户想要打开扩展程序并且必须再次添加styles.css。

当我试图这样解决它时：

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

效果不佳，因为当扩展程序启动时，页面会闪烁几毫秒。

【问题讨论】：

问题已结束。我很无聊。谢谢。
“问题已结束”是否意味着您不再对这个话题感到疑惑，因为您不再关心（除了您找到解决方案之外的其他原因），或者您找到了问题的解决方案，或者是其他东西？如果您找到了问题的解决方案，那么您应该发布对此问题的答案。 Self-answered questions are encouraged.
所以。是的。稍后我会告诉您解决方案:)
是的，请分享您的解决方案，以免其他人花时间为您提出不必要的解决方案。

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

【解决方案1】：

我查看并找到了解决此问题的方法。

manifest.json

manifest.json

  "content_scripts": [{
    "matches": ["*://*.youtube.com/*"],
    "js": ["jquery-3.1.1.min.js", "content.js"],
    "run_at" : "document_start" // It runs content.js first until page loads
  }],

  "web_accessible_resources": ["styles.css"] // It provides styles.css for use in content.js

和 content.js

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

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

content.js 只加载html标签中的file.css（提供的styles.css）直到页面加载

【讨论】：

所以“不建议使用 X 之类的代码”和您的代码之间唯一真正的区别是 run_at?
是的。起初我用"run_at" : "document_end"（这是默认值）运行代码并发生闪烁。然后我发现了限制"run_at" : "document_start"，一切都很好。只是我不知道我最近遇到了 google API。
我更新了问题以更好地反映这一点，我会支持你的答案。