Chrome Uzantısı: chrome.runtime.onMessage.addListener içindeki kod hiçbir zaman yürütülmez

Question

SendMessage yöntemini kullanarak bir içerik komut dosyasından popup.js'ye bir değişken geçirmeye çalışırken çok fazla sorun yaşıyorum.

Bu, bir DOM düğümünün çocuk sayısını içeren arka plan komut dosyasına bir mesaj gönderdiğim içerik komut dosyasıdır:

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

Ardından background.js mesajı dinler ve aynı değişkenle popup.js'ye bir mesaj gönderir:

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

Popup.js'de, "incomingChatsNumber" 0'dan fazlaysa (dom kapsayıcısının alt öğeleri varsa) bazı kodları tetikleyecek bir düğmem var:

  $("#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();
      }
    });
  });

Benim için tuhaf olan şey, popup.js'nin değeri doğru almasıdır, hatta console.log'u bile yapabilirim, ancak bunun üzerine daha fazla kod koyar koymaz, koşulluysa, koşul tamam olsa bile kod asla çalıştırılmaz.

GÜNCELLEME:

Ehab tarafından önerilen değişiklikleri yaptıktan sonra, chrome.runtime.onMessage.addListener öğesinin zaman uyumsuz doğası nedeniyle değişkenin her zaman "tanımsız" olduğunu fark ettim:

İçerik Komut Dosyası:

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

Background.js:

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

Popup.js (incomingChatsNumber değişkeninin değerini kullanmam gereken yer burasıdır):

  let latestIncomingChatsNumber;

  chrome.runtime.onMessage.addListener(function (message) {
    let incomingChatsNumber = message.incomingChatsNumber;
    latestIncomingChatsNumber = incomingChatsNumber;
    //This Works
    console.log(latestIncomingChatsNumber);
  });
  //This will give me an undefined value
  console.log(latestIncomingChatsNumber);

Sorunumun chrome. * API'lerinin zaman uyumsuz olması gerçeğiyle ilgili olduğunu anlıyorum, bu nedenle chrome.runtime ... ve console.log (...) aynı anda yürütülecek, dolayısıyla hata. Öyleyse, bir tıklama olayının içinde en yeniIncomingChatsNumber değişkenini nasıl kullanabilirim? Önce chrome.runtime.onMessage.addListener içindeki yerel depolamaya "latestIncomingChatsNumber" kaydetmem gerekir mi?

Answer 1

Bir olay dinleyicisini başka bir olay işleyicisinin içine koymamalısınız, bu, yapması gerektiğini düşündüğünüz şeyi yapsa bile son derece kötü bir uygulamadır, bu sizin için bellek sızıntılarına neden olur ve kodu okumayı zorlaştırır ve anlamsal olarak zorlaştırır. yanlış.

Görünüşe göre kodunuza baktığınızda sorun, tıklamaya eklenen önceki olay dinleyicileri nedeniyle ileti işleyicisinin birden çok kez çağrılmasıdır.

 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_stateiyi bir iş çıkarsa paylaştığım kod çalışmalı