Chrome Extension Message Passing: Antwort nicht gesendet

Ich versuche, Nachrichten zwischen dem Inhaltsskript und der Erweiterung zu übergeben

Folgendes habe ich im Content-Skript

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

Und im Hintergrundskript habe ich

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

}

Wenn ich nun die Antwort vor dem Ajax-Aufruf in der getUrlsFunktion sende , wird die Antwort erfolgreich gesendet, aber in der Erfolgsmethode des Ajax-Aufrufs, wenn ich die Antwort sende, wird sie nicht gesendet. Wenn ich mit dem Debuggen beginne, kann ich das sehen Der Port ist innerhalb des sendResponseFunktionscodes null .

Aus der Dokumentation fürchrome.runtime.onMessage.addListener :

Diese Funktion wird ungültig, wenn der Ereignis-Listener zurückkehrt, es sei denn, Sie geben vom Ereignis-Listener true zurück, um anzugeben, dass Sie eine Antwort asynchron senden möchten (dies hält den Nachrichtenkanal bis zum Aufruf von sendResponse für das andere Ende offen).

Sie müssen also nur return true;nach dem Aufruf hinzufügen , getUrlsum anzuzeigen, dass Sie die Antwortfunktion asynchron aufrufen.

Die akzeptierte Antwort ist richtig. Ich wollte nur Beispielcode hinzufügen, der dies vereinfacht. Das Problem ist, dass die API (meiner Ansicht nach) nicht gut gestaltet ist, da sie uns Entwickler dazu zwingt, zu wissen, ob eine bestimmte Nachricht asynchron behandelt wird oder nicht. Wenn Sie viele verschiedene Nachrichten verarbeiten, wird dies zu einer unmöglichen Aufgabe, da Sie nie wissen, ob eine übergebene sendResponse in einer bestimmten Funktion als asynchron bezeichnet wird oder nicht. Bedenken Sie:

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

Wie kann ich wissen, ob handleMethod1der Anruf tief im Inneren asynchron ist oder nicht? Wie kann jemand, der Änderungen handleMethod1vornimmt, wissen, dass er einen Anrufer durch die Einführung von etwas Asynchronem unterbricht?

Meine Lösung lautet:

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

});

Dadurch wird der Rückgabewert automatisch verarbeitet, unabhängig davon, wie Sie die Nachricht behandeln. Beachten Sie, dass dies voraussetzt, dass Sie nie vergessen, die Antwortfunktion aufzurufen. Beachten Sie auch, dass Chrom dies für uns hätte automatisieren können. Ich verstehe nicht, warum dies nicht der Fall war.

Sie können meine Bibliothek https://github.com/lawlietmester/webextension verwenden , damit dies sowohl in Chrome als auch in FF mit Firefox ohne Rückruf funktioniert.

Ihr Code sieht folgendermaßen aus:

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