Passaggio messaggio estensione Chrome: risposta non inviata

Sto cercando di passare i messaggi tra lo script del contenuto e l'estensione

Ecco cosa ho in content-script

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

E nella sceneggiatura di sfondo che ho

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})
    }
  });

}

Ora se invio la risposta prima della chiamata ajax nella getUrlsfunzione, la risposta viene inviata correttamente, ma nel metodo di successo della chiamata ajax quando invio la risposta non la invia, quando vado nel debug posso vedere che la porta è nulla all'interno del codice per la sendResponsefunzione.

Dalla documentazione perchrome.runtime.onMessage.addListener :

Questa funzione diventa non valida quando il listener di eventi ritorna, a meno che non si restituisca true dal listener di eventi per indicare che si desidera inviare una risposta in modo asincrono (ciò manterrà il canale del messaggio aperto all'altra estremità fino a quando non viene chiamato sendResponse).

Quindi devi solo aggiungere return true;dopo la chiamata getUrlsper indicare che chiamerai la funzione di risposta in modo asincrono.

La risposta accettata è corretta, volevo solo aggiungere un codice di esempio che semplifichi questo. Il problema è che l'API (a mio avviso) non è ben progettata perché costringe noi sviluppatori a sapere se un determinato messaggio verrà gestito in modo asincrono o meno. Se gestisci molti messaggi diversi questo diventa un compito impossibile perché non sai mai se in fondo a qualche funzione un sendResponse passato verrà chiamato asincrono o no. Considera questo:

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

Come posso sapere se in fondo handleMethod1la chiamata sarà asincrona o no? Come può qualcuno che modifica handleMethod1sapere che interromperà un chiamante introducendo qualcosa di asincrono?

La mia soluzione è questa:

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;
    }

});

Ciò gestisce automaticamente il valore restituito, indipendentemente da come si sceglie di gestire il messaggio. Si noti che ciò presuppone che non si dimentichi mai di chiamare la funzione di risposta. Nota anche che il cromo avrebbe potuto automatizzarlo per noi, non vedo perché non lo abbiano fatto.

Puoi usare la mia libreria https://github.com/lawlietmester/webextension per farlo funzionare sia in Chrome che in FF con Firefox senza richiamate.

Il tuo codice sarà simile a:

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 }); });
}) );