切换谷歌chrome扩展多次

Toggle a google chrome extension multiple times

本文关键字：扩展 chrome 谷歌      更新时间：2023-09-26

所以我有一个我的谷歌chrome扩展，当点击它附加事件监听器到页面上的所有元素，并插入CSS (loll .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('<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);

undo.js(尝试撤销llo .js事件监听器)

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

在lol.js中添加的函数存在于该脚本自己的沙盒中，并且在undo.js中不可见，因此您无法注销它们。

使用消息传递来切换lol.js:

  • llo .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中，所以没有办法"切换"它，但有变通办法:

  1. 在style.css的所有选择器前加上一些自定义类:body.someclass .selector和在lol.js中简单地切换主体类(确保名称是唯一的):

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

  2. 加载style.css的内容，并把它放到一个<style id="someid">元素，你可以切换(确保id是唯一的):

    document.getElementById("someid").disabled = !message.toggle;
相关文章：