Chrome扩展程序:动态执行的脚本添加的取消绑定事件侦听器

时间:2013-05-19 05:11:27

标签: jquery google-chrome-extension

我有一个Chrome扩展程序,当点击浏览器操作时,绑定 mousedown事件监听器在“body”上。当再次单击浏览器操作时,它将取消绑定 mousedown事件。

但由于某种原因,即使日志说代码已执行,unbind也无法正常工作。我尝试过bind()/ unbind()方法也无济于事。

感谢任何帮助。谢谢!

的manifest.json

{
  "name": "My Extension",
  "description": "View Font Info",
  "manifest_version": 2,
  "version": "1",
  "permissions": ["tabs", "http://*/*", "https://*/*"],

  "browser_action": {
    "default_icon": "f.png"
  },

  "background": {
    "scripts": ["background.js"]
  }
}

background.js

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
  toggle = !toggle;
  if(toggle){
    chrome.browserAction.setIcon({path: "f.png", tabId:tab.id});

    chrome.tabs.executeScript(tab.id, {file:"jquery.js"}, function(){
      chrome.tabs.executeScript(tab.id, {file: "on.js"});
    });
  }
  else{
    chrome.browserAction.setIcon({path: "", tabId:tab.id});

    chrome.tabs.executeScript(tab.id, {file:"jquery.js"}, function(){
      chrome.tabs.executeScript(tab.id, {file: "off.js"});
    });
  }
});

on.js(绑定事件的脚本)

console.log("On");
$("body").on('mousedown.custom', function(e){
    e.preventDefault();
    // do something...
}); 

off.js(取消绑定事件的脚本)

console.log('off');
$("body").off('mousedown.custom');

1 个答案:

答案 0 :(得分:1)

单击鼠标执行整个jQuery库对我来说似乎是多余的。它也可以解释你的问题(因为你为ON和OFF都这样做)。尝试加载&在click事件处理程序之外执行jQuery,或者至少确保它不会运行两次。

此外,您与内容脚本进行通信的方式也不理想。您只需使用message passing就不需要不同的文件。

<强> background.js

var isjQueryLoaded = {};

function executeAfterjQuery(tabId, fn) {
    if (isjQueryLoaded[tabId]) {
      fn();
    } else {
      isjQueryLoaded[tabId] = true;
      chrome.tabs.executeScript(tabId, { file:"jquery.js" }, fn);
    }
}

var toggle = false;

chrome.browserAction.onClicked.addListener(function (tab) {
  toggle = !toggle;
  var path  = toggle ? "f.png" : "";
  var state = toggle ? "on" : "off";
  chrome.browserAction.setIcon({ path: path, tabId:tab.id });
  executeAfterjQuery(tab.id, function () {
    chrome.tabs.sendMessage(tab.id, { state: state });
  });
});

<强>的script.js

function on() {
  // ...
}

function off () {
  // ...
}

chrome.extension.onMessage.addListener(
  function (message, sender, sendResponse) {
    (message.state == "on") ? on() : off();
  });