Question

所以我有一个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）

＆＃13;

var $body = $('body');

$body.append('<div class="the_result_one"></div>');
$body.addClass('steves_sweet_ext');

var clearIt = false;

function myClick(e) {
  $('.active_result_class').removeClass('active_result_class');
  if (clearIt) {
    $('.the_result_one').html('');
    $('.the_active_class').removeClass('the_active_class');
  }
  if ($(this).hasClass('hover-it')) {
    e.preventDefault();
    $(this).removeClass('hover-it');
  } else {
    $(this).addClass('hover-it');
  }
  e.stopPropagation();
  var target_elem = $(e.target);
  target_elem.addClass('the_active_class');
  if ($('.the_active_class').length == 2) {
    var first_one = $('.the_active_class: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;
  } else {
    clearIt = false;
  }
}

function myMouseover(e) {
  var target_elem = $(e.target);
  target_elem.addClass('hover-it');
}

function myMouseout(e) {
  var target_elem = $(e.target);
  target_elem.removeClass('hover-it');
}

$('.steves_sweet_ext').on('click', '*', myClick);

$('.steves_sweet_ext').on('mouseover', '*', myMouseover);

$('.steves_sweet_ext').on('mouseout', '*', myMouseout);

＆＃13;

undo.js （尝试撤消lol.js事件侦听器）

＆＃13;

$('.steves_sweet_ext').off('click', '*', myClick);
$('.steves_sweet_ext').off('mouseover', '*', myMouseover);
$('.steves_sweet_ext').off('mouseout', '*', myMouseout);

＆＃13;

Answer 1

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，样式表是在内部注入的，而不是document.styleSheets注入的，因此无法切换＆＃34;切换＆＃34;它，但有解决方法：

将style.css中的所有选择器添加到一些自定义类：body.someclass .selector，并在lol.js中简单地切换正文类（确保名称是唯一的）：
```
document.body.classList.toggle("someclass", message.toggle)
```
加载style.css内容并将其放入<style id="someid">元素中，您可以切换（确保ID是唯一的）：
```
document.getElementById("someid").disabled = !message.toggle;
```

多次切换谷歌浏览器扩展程序

1 个答案: