javascript - 删除事件监听器时遇到问题

Question

尝试使用 Chrome 扩展程序。我创建了一个制表符限制器，但它有问题。

我希望通过单击浏览器操作图标来打开和关闭扩展程序。我相信我已经正确设置了。打开时，它会从 chrome.tabs API 创建一个监听器，但关闭时，我很难删除此监听器。

我已经尝试了 Stack Overflow 上的一些常见答案(如下所示)来删除监听器，但没有一个对我来说可以正常运行。

这是background.js

var tabUrls, bookmarkFolder, currentWindow;
var toggle = false;

chrome.browserAction.onClicked.addListener(function(tab){
  toggle = !toggle;

  if(toggle) {
    chrome.browserAction.setBadgeText({"text": "ON"});

    console.log("I'm listening to the browser action");

    runExtension();

  } else {
    console.log("i shouldn't be working now.");

    chrome.browserAction.setBadgeText({"text": ""});

    // Need to remove the listener somehow.  This isn't working.

    chrome.tabs.onCreated.addListener(doStuff);
  }
});

  // Functions

  // Potential function to removeListener. Not working.
  function doStuff(tab){
    chrome.tabs.onCreated.removeListener(doStuff);
  }

  var runExtension = function(){
    chrome.tabs.onCreated.addListener(function(tab){
  
      // Find and set reference to the current window
      chrome.windows.getCurrent(function(window){
        currentWindow = window;
      });

      // Logic to limit tabs (remove window, create bookmarks, play audio, manipulate DOM on new window)
      chrome.tabs.getAllInWindow(function(tabs) {
        tabUrls = lengthRequirement(tabs);
    
        console.log(tabUrls);

        if (typeof tabUrls != "string") {

          createBookmarkFolder(tabUrls);
          chrome.windows.remove(currentWindow.id);
          playAudioClip();
          chrome.windows.create({ "url": "http://www.justinstewart.info/"});  
          chrome.tabs.executeScript({file: "content_script.js"});

        }
      });
    });
  }

  var playAudioClip = function(){
    var audio = new Audio("audio_file.mp3");
    audio.play();
  }

  var createBookmarkFolder = function(tabUrls){
    chrome.bookmarks.create(
      {'title': "Caroline Strikes Again @ " + new Date()},
      function(bookmark){
        createBookmarks(tabUrls, bookmark);
      }
    )
  }

  var createBookmarks = function(urls, folder){
    for(i=0; i<urls.length; i++) {
      chrome.bookmarks.create({
        'parentId': folder.id,
        'url': urls[i][0],
        'title': urls[i][1]
      })
    }
  }

  var lengthRequirement = function(tabsArray){
    if (tabsArray.length > 9) {
      var urls = [];
  
      for(i=0; i<tabsArray.length; i++) {
        info = [];
        info.push(tabsArray[i].url);
        info.push(tabsArray[i].title);

        urls.push(info);
      }
      return urls;
    } else {
      return "Not there yet.....";
    }
  }

---

manifest.json 文件:

{
  "manifest_version": 2,
  "name": "Caroline",
  "version": "0.2",

  "description": "A fun tab limiter to help increase productivity and focus.",

  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png" 
  },

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "browser_action": {
    "default_icon": "icon48.png",
    "default_title": "Sweet Caroline" 
  },

  "permissions": [
    "tabs", "bookmarks", "*://*/"
  ]
}

非常感谢任何帮助!

Answer 1

仅当 func 与之前添加的事件监听器之一相同时，.removeListener(func) 才会删除监听器。

首先，删除runExtension中的匿名函数，因为如果是匿名的，就无法再获取函数对象的引用:

var runExtension = function(){
<s>    chrome.tabs.onCreated.addListener(function(tab){</s>
    ...
<s>    });</s>
};

然后，将 runExtension() 替换为 .addListener(runExtension);，并在需要时使用 .removeListener(runExtension);删除监听器:

chrome.browserAction.onClicked.addListener(function(tab){
    toggle = !toggle;
    if (toggle) {
        ...
        chrome.tabs.onCreated.addListener(runExtension);
    } else {
        ...
        chrome.tabs.onCreated.removeListener(runExtension);
    }
});