google-chrome - 使用 chrome.tabs.* 注入(inject) CSS 或 JavaScript 后，如何删除它？

Question

我使用“chrome.tabs.insertCSS”将 CSS 注入(inject)页面。我想向用户添加一个选项来删除这个 css(带有按钮或其他东西)。

那么问题是 - 我如何从选项卡中删除这个 css/js(以编程方式)添加？

Answer 1

不是自动注入(inject)样式，而是手动创建 <style>带有一些 id 的元素，您可以稍后从 DOM 中删除它。

以下是通过 css 启用和禁用链接下划线的扩展的快照:

//enable.js
var head = document.head;
var style = document.createElement("style");
var rules = document.createTextNode("a {text-decoration:underline !important;}");

style.type = "text/css";
style.id = "__link-highlighter";
if(style.styleSheet) {
    style.styleSheet.cssText = rules.nodeValue;
} else { 
    style.appendChild(rules);
}
head.appendChild(style);


//disable.js
if(document.getElementById("__link-highlighter")) {
    document.head.removeChild(document.getElementById("__link-highlighter"));
}

我将 CSS 规则注入(inject) <style> 的正文中元素，因为它们非常小，如果您需要很多规则，您应该能够创建 <link rel="stylesheet">而是链接到 chrome.extension.getURL("styles.css") .