Przekazanie wiadomości rozszerzenia Chrome: odpowiedź nie została wysłana

Próbuję przekazywać komunikaty między skryptem zawartości a rozszerzeniem

Oto, co mam w skrypcie zawartości

chrome.runtime.sendMessage({type: "getUrls"}, function(response) {
  console.log(response)
});

A w tle mam skrypt

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type == "getUrls"){
      getUrls(request, sender, sendResponse)
    }
});

function getUrls(request, sender, sendResponse){
  var resp = sendResponse;
  $.ajax({
    url: "http://localhost:3000/urls",
    method: 'GET',
    success: function(d){
      resp({urls: d})
    }
  });

}

Teraz, jeśli wyślę odpowiedź przed wywołaniem ajax w getUrlsfunkcji, odpowiedź zostanie wysłana pomyślnie, ale w metodzie sukcesu wywołania ajax, kiedy wysyłam odpowiedź, nie wysyła jej, kiedy przechodzę do debugowania, widzę to port ma wartość null w kodzie sendResponsefunkcji.

Z dokumentacji dlachrome.runtime.onMessage.addListener :

Ta funkcja staje się nieprawidłowa, gdy detektor zdarzeń zwraca, chyba że zwrócisz wartość true z detektora zdarzeń, aby wskazać, że chcesz wysłać odpowiedź asynchronicznie (spowoduje to, że kanał wiadomości będzie otwarty na drugi koniec do momentu wywołania sendResponse).

Musisz więc tylko dodać return true;po wywołaniu to, getUrlsaby wskazać, że będziesz wywoływać funkcję odpowiedzi asynchronicznie.

Przyjęta odpowiedź jest prawidłowa, chciałem tylko dodać przykładowy kod, który to uprości. Problem polega na tym, że API (moim zdaniem) nie jest dobrze zaprojektowane, ponieważ zmusza nas programistów do tego, aby wiedzieć, czy dana wiadomość będzie obsługiwana asynchronicznie, czy nie. Jeśli obsługujesz wiele różnych wiadomości, staje się to niemożliwe, ponieważ nigdy nie wiesz, czy w głębi duszy jakaś funkcja przekazana sendResponse zostanie nazwana asynchroniczną, czy nie. Rozważ to:

chrome.extension.onMessage.addListener(function (request, sender, sendResponseParam) {
if (request.method == "method1") {
    handleMethod1(sendResponse);
}

Skąd mam wiedzieć, czy w głębi duszy handleMethod1połączenie będzie asynchroniczne, czy nie? Jak ktoś, kto modyfikuje, może handleMethod1wiedzieć, że zepsuje dzwoniącego, wprowadzając coś asynchronicznego?

Moje rozwiązanie jest takie:

chrome.extension.onMessage.addListener(function (request, sender, sendResponseParam) {

    var responseStatus = { bCalled: false };

    function sendResponse(obj) {  //dummy wrapper to deal with exceptions and detect async
        try {
            sendResponseParam(obj);
        } catch (e) {
            //error handling
        }
        responseStatus.bCalled= true;
    }

    if (request.method == "method1") {
        handleMethod1(sendResponse);
    }
    else if (request.method == "method2") {
        handleMethod2(sendResponse);
    }
    ...

    if (!responseStatus.bCalled) { //if its set, the call wasn't async, else it is.
        return true;
    }

});

Spowoduje to automatyczną obsługę zwracanej wartości, niezależnie od wybranego sposobu obsługi wiadomości. Zauważ, że zakłada to, że nigdy nie zapomnisz wywołać funkcji odpowiedzi. Zauważ też, że chrom mógł to dla nas zautomatyzować, nie rozumiem, dlaczego tego nie zrobił.

Możesz użyć mojej biblioteki https://github.com/lawlietmester/webextension, aby ta działała zarówno w Chrome, jak i FF z Firefoksem bez wywołań zwrotnych.

Twój kod będzie wyglądał następująco:

Browser.runtime.onMessage.addListener( request => new Promise( resolve => {
    if( !request || typeof request !== 'object' || request.type !== "getUrls" ) return;

    $.ajax({
        'url': "http://localhost:3000/urls",
        'method': 'GET'
    }).then( urls => { resolve({ urls }); });
}) );