Chrome扩展:Chrome.runtime.onMessage.AddListener内的代码从不执行

Question

尝试使用sendMessage方法将变量从内容脚本传递到popup.js时遇到了很多麻烦。

这是我向后台脚本发送消息的内容脚本，该消息包含DOM节点的子节点数:

let incomingChatsNumber = incomingChatsContainer.children().length;
chrome.runtime.sendMessage({ incomingChatsNumber: incomingChatsNumber });

然后background.js监听消息并将带有相同变量的消息本身发送给popup.js:

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  let incomingChatsNumber = message.incomingChatsNumber;
  chrome.runtime.sendMessage({ incomingChatsNumber: incomingChatsNumber });
});

在popup.js中，我有一个按钮，如果“IncomingChatsNumber”大于0（dom容器有子级），它将触发一些代码:

  $("#js-toggleSorting").on("click", function () {
    chrome.runtime.onMessage.addListener(function (message) {
      let incomingChatsNumber = message.incomingChatsNumber;
      if (incomingChatsNumber <= 0) {
        $(".message").html("<p>No Chats To Sort, You Joker</p>");
      } else {
        $(".message").html("<p>Sorting Chats</p>");
        //This code never gets executed
        if ($("#js-toggleSorting").attr("data-click-state") == 1) {
          $("#js-toggleSorting").attr("data-click-state", 0);
          $("#js-toggleSorting").html("SORT INCOMING CHATS");
          sortFunction(false);
        } else {
          $("#js-toggleSorting").attr("data-click-state", 1);
          $("#js-toggleSorting").html("STOP SORTING INCOMING CHATS");
          sortFunction(true);
        }
        save_button_state();
      }
    });
  });

对我来说奇怪的是，popup.js获得了正确的值，我甚至可以对其进行console.log，但一旦我在if条件上添加了更多代码，即使该条件可以运行，代码也永远不会被执行。

Answer 1

你不应该把一个事件侦听器放在另一个事件处理程序中，这是一个非常糟糕的做法，即使它做了你认为它应该做的事情，这将导致内存泄漏，并使代码难以阅读和语义错误。

从您的代码来看，问题似乎是消息的处理程序被多次调用，这是因为在click evet中添加了先前的事件侦听器

 let latestIncomingChatsNumber
 chrome.runtime.onMessage.addListener(function (message) {
      let incomingChatsNumber = message.incomingChatsNumber;
      // save this into the application state, i will use a parent scope variable you could use something else 
       latestIncomingChatsNumber = incomingChatsNumber
    });
    
 $("#js-toggleSorting").on("click", function () {
      if (latestIncomingChatsNumber <= 0) {
        $(".message").html("<p>No Chats To Sort, You Joker</p>");
      } else {
        $(".message").html("<p>Sorting Chats</p>");
        //This code never gets executed
        if ($("#js-toggleSorting").attr("data-click-state") == 1) {
          $("#js-toggleSorting").attr("data-click-state", 0);
          $("#js-toggleSorting").html("SORT INCOMING CHATS");
          sortFunction(false);
        } else {
          $("#js-toggleSorting").attr("data-click-state", 1);
          $("#js-toggleSorting").html("STOP SORTING INCOMING CHATS");
          sortFunction(true);
        }
        save_button_state(); // i believe this function saves the attributes to the dom elements
      }
  });

如果save_button_state做得很好，那么我共享的代码应该可以工作