Переключить расширение google chrome несколько раз

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)

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 (попытка отменить lol.js слушателей событий)

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

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 так что нет никакого способа, чтобы «переключить», но есть обходные пути:

1. PREPEND все селекторы в style.css с некоторым пользовательским классом: body.someclass .selector и в lol.js просто переключать класс тела (убедитесь, что имя является уникальным):

2. нагрузки на style.css содержимое и поместить его в <style id="someid"> элемент, который вы можете переключать (убедитесь, что идентификатор уникален):

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