Javascript 多次切换google chrome扩展

所以我有一个我的google chrome扩展，当点击它时，它会将事件监听器附加到页面上的所有元素，并插入CSS（lol.js和style.CSS）

当我再次单击图标时，图标会改变，但我也希望删除JS和CSS。我似乎无法移除它们。所以现在我只是尝试分离事件侦听器

当然，我想当你再次点击扩展图标时，把所有的JS和CSS都添加回去。这可能吗

我现在就是这样设置的：

background.js

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if(toggle){
  chrome.browserAction.setIcon({path: "on.png", tabId:tab.id});
  chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "lol.js" }, function() {
    })
  });
  chrome.tabs.insertCSS(tab.id, {
        file: "style.css"
  });
} else {
  chrome.browserAction.setIcon({path: "off.png", tabId:tab.id});
  chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "undo.js" }, function() {
    })
  });
}
});

lol.js（主js）

var$body=$（'body'）；
$body.append（“”）；
$body.addClass（'steves_sweet_ext'）；
var clearIt=false；
功能myClick（e）{
$（'.active_result_class'）。removeClass（'active_result_class'）；
如果（清除）{
$（'.the_result_one'）.html（''）；
$（'.the_active_class'）.removeClass（'the_active_class'）；
}
if（$（this）.hasClass（'hover-it'））{
e、 预防默认值（）；
$（this.removeClass（'hover-it'）；
}否则{
$（this.addClass（'hover-it'）；
}
e、 停止传播（）；
var target_elem=$（e.target）；
target_elem.addClass（“活动类”）；
if（$（'.the_active_class'）。长度==2）{
var first_one=$（'.活动类：first'）；
var second_one=$（'.the_active_class:last'）；
$（'.the_result_one'）.addClass（'active_result_class'）；
$（'.the_result_one'）.html（calcPos（first_one，second_one））；
$（'.the_active_class'）.removeClass（'the_active_class'）；
clearIt=true；
}否则{
clearIt=false；
}
}
函数myMouseover（e）{
var target_elem=$（e.target）；
target_elem.addClass（'hover-it'）；
}
函数myMouseout（e）{
var target_elem=$（e.target）；
target_elem.removeClass（'hover-it'）；
}
$（'.steves_sweet_ext'）。on（'click'，'*'，myClick）；
$（'s.steves_sweet_ext'）。on（'mouseover'，'*'，myMouseover）；
$（'steves_sweet_ext'）on（'mouseout'，'*'，myMouseout）

在

lol.js

中添加的函数存在于该脚本自己的沙盒中，并且在

undo.js

中不可见，因此无法注销它们

使用消息传递在

lol.js

中正确切换内容：

• lol.js，添加侦听器：

  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
      if ("toggle" in message) {
          var target = $('.steves_sweet_ext');
          var onOff = message.toggle ? "on" : "off";
          target[onOff]('click', '*', myClick);
          target[onOff]('mouseover', '*', myMouseover);
          target[onOff]('mouseout', '*', myMouseout);
      }
  });
  

• background.js

  var toggle = {}; // each tab has its own state
  chrome.browserAction.onClicked.addListener(function(tab) {
      var state = !toggle[tab.id];
  
      chrome.browserAction.setIcon({path: state ? "on.png" : "off.png", tabId:tab.id});
  
      if (tab.id in toggle) {
          // {frameId: 0} will throw on Chrome prior to v41
          try { chrome.tabs.sendMessage(tab.id, {toggle: state}, {frameId: 0}) }
          catch(e) { chrome.tabs.sendMessage(tab.id, {toggle: state}) }
      } else {
          // tabId param is optional, thus omitted
          chrome.tabs.insertCSS({file: "style.css"});
          chrome.tabs.executeScript({file: "jquery.js" }, function() {
              chrome.tabs.executeScript({file: "lol.js" }, function() {
              });
          });
      }
      toggle[tab.id] = state;
  });
  

至于CSS，样式表是在内部注入的，而不是在

文档中。样式表

因此无法“切换”它，但有一些解决方法：

在

style.css

中的所有选择器前面加上一些自定义类：

body.someclass.selector

并在

lol.js

中切换body类（确保名称唯一）：

加载

style.css

内容并将其放入可切换的

元素中（确保id唯一）：

document.body.classList.toggle("someclass", message.toggle)

document.getElementById("someid").disabled = !message.toggle;