对于Google Chrome扩展程序，如何在Popup中定义样式表切换？

Question

当用户点击扩展程序的浏览器图标时，它会显示已定义的弹出窗口。

当用户点击在弹出窗口中的按钮时，我需要创建一个切换按钮来打开/关闭特定页面/域的样式表。

例如，当用户使用Adblock扩展程序时，当用户点击浏览器图标时，会弹出弹出窗口，其中包含一系列链接。其中一个链接是“不在此页面上运行”，然后更改为“启用”，用户可以单击该链接将其重新打开。

另一个例子（更好的例子）：经典弹出窗口阻止程序在弹出窗口上有一个按钮，上面写着“将此页面添加到黑名单”，一旦点击就会更改为“从黑名单中删除”。

经典的弹出窗口拦截器通常是我想要扩展的功能（它没有用广告或弹出窗口阻止做任何事情，这只是一个例子），所以当用户点击弹出窗口上的按钮时，它会变成一个样式表打开或关闭我已写入并保存为扩展名中的.css文件。

我希望我已经明确表达了这一点。

---

SCREENS

这是我拍摄的照片，以便您可以看到我想要做的事情：

---

再次拍照，看看点击按钮后会发生什么：

---

Answer 1

您可以使用chrome.tabs.executeScript方法动态注入/移除CSS（需要tabs中的manifest.json权限）：

chrome.tabs.executeScript(null, {code:
    'document.documentElement.setAttribute("RWchooseStyle", "style1.css");'
}, function() {
    chrome.tabs.executeScript(null, {file: 'myscript.js'});
});

在myscript.js中，检测您是否已插入CSS。如果没有，请添加新的<style>或link元素，并为其分配id。否则，请替换样式表。

myscript.js的

示例：

var selectedStyle = document.documentElement.getAttribute('RWchooseStyle');
var id, link;
if (selectedStyle) {
    id = 'RW_style_' + selectedStyle.replace(/\W/g,'');   // Sanitize id
    // Remove previous sheet, if available.
    link = document.getElementById(id);
    if (link) {
        link.parentNode.removeChild(link);
    }
}
if (id) {
    // Insert new sheet
    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.extension.getURL(selectedStyle);
    link.id = id;
    (document.head||document.documentElement).appendChild(link);
}

// Remove temporary attribute
document.documentElement.removeAttribute('RWChooseStyle');

在此示例中，必须在扩展目录中定义CSS文件。当然，如果<style>，您也可以使用<link>，并动态设置样式的内容。

注意：不要忘记将样式表添加到清单文件的web_accessible_resources部分。