如何设置永久禁用/启用 chrome 扩展样式表的选项？

Question

我发现this other question是哪种答案但没有。我很想做同样的事情。

但该问题的答案并不会永久更改样式表，因为在页面重新加载时，样式表会恢复并且没有任何更改。

For a Google Chrome extension, how do I define a stylesheet toggle within the Popup?

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

我需要创建一个切换按钮来打开/关闭样式表 当用户单击位于 弹出窗口。

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

另一个例子（更好的例子）：经典弹出窗口拦截器有一个 弹出窗口上显示“将此页面添加到黑名单”的按钮，然后一次 点击更改为“从黑名单中删除”。

image1 i.stack.imgur.com/92gVx.jpg

image2 i.stack.imgur.com/Xvyyp.jpg

这是我目前在 HTML 文件中的内容。这样就有一个简单的复选框，如果选中它就会运行 javascript：

<script type="text/javascript">
  $("#button").click(function(){
    chrome.extension.sendRequest({ msg: "toggle" });
    });
</script>
<input type="checkbox" checked="checked" id="button" /> TOGGLE IT

Answer 1

您可以基于某种切换来注入它，而不是基于用户交互来注入它。只需为chrome.tabs.onUpdated 事件添加一个侦听器并针对您希望受影响的网站过滤它，然后如果您的切换设置为true，则注入css。例如：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  //assuming `cssToggle` is defined
  if(tab.url && cssToggle == "true"){
    // assuming `url` is the url you want to change
    if(tab.url.indexOf(url) >-1)
      chrome.tabs.insertCSS(tabId, {file:"style.css", runAt: "document_start"});
  }
});

使用选项页面切换样式表的示例：

ma​​nifest.json

"options_page": "options.html",

options.html

<script src="options.js"></script>
[...]
<select id="cssSelect">
  <option value="true">Enabled</option>
  <option value="false">Disabled</option>
</select>

options.js

$('#cssSelect').change(function(){
  chrome.runtime.sendMessage({method: 'setCSS', css:$(this).val()});
});

background.js

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  if(message.method == 'setCSS')
    cssToggle = message.css;
});

原谅 jQuery，这是我使用的，我不想将它转换为纯 JS 并给你不正确的代码。所以我在清单中定义了一个选项页面，在该选项页面上我有一个带有启用/禁用选项的选择。更改后，我将新值发送到我的后台页面并相应地更新 cssToggle var。请注意，我现在正在针对字符串进行测试，因为那是我在消息中发送的内容，它只会减少代码。

就具有多个样式切换而言。如果只是几个，那么你可以有多个，但如果它不止于此，我建议做一些不同的事情。也许将其定义为一个对象数组，其中包含 url、toggle 和要注入的文件，如下所示：

[{url:url1,toggle:toggle1,file:file1},{url:url2, toggle:toggle2, file:file2},...]