Chrome拡張メッセージの受け渡し：応答が送信されていません

コンテンツスクリプトと拡張機能の間でメッセージをやり取りしようとしています

これは私がコンテンツスクリプトに持っているものです

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

そして私が持っているバックグラウンドスクリプトで

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

}

getUrls関数のajax呼び出しの前に応答を送信すると、応答は正常に送信されますが、ajax呼び出しの成功メソッドでは、応答を送信しても送信されません。デバッグに入ると、sendResponse関数のコード内ではポートはnull です。

以下からのドキュメントchrome.runtime.onMessage.addListener：

この関数は、イベントリスナーからtrueを返して非同期に応答を送信することを示す場合を除き、イベントリスナーが戻ると無効になります（これにより、sendResponseが呼び出されるまでメッセージチャネルが相手側に開いたままになります）。

したがってreturn true;、呼び出しgetUrls関数の後にを追加して、応答関数を非同期的に呼び出すことを示す必要があります。

受け入れられた答えは正しいです。私はこれを単純化するサンプルコードを追加したかっただけです。問題は、特定のメッセージが非同期で処理されるかどうかを開発者に知らせなければならないため、API（私の見方では）がうまく設計されていないことです。多くの異なるメッセージを処理する場合、渡されたsendResponseが非同期で呼び出されるかどうかが関数の深いところにあるかどうかわからないため、これは不可能な作業になります。このことを考慮：

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

handleMethod1通話の深部が非同期になるかどうかはどうすればわかりますか？変更を行う誰かが、handleMethod1非同期を導入することによって発信者を破壊することをどのようにして知ることができますか？

私の解決策はこれです：

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

});

これにより、メッセージの処理方法の選択に関係なく、戻り値が自動的に処理されます。これは、応答関数の呼び出しを忘れないことを前提としています。また、クロムがこれを自動化していた可能性があることにも注意してください。なぜそうしなかったのかわかりません。

私のライブラリhttps://github.com/lawlietmester/webextensionを使用して、コールバックなしのFirefoxの方法でChromeとFFの両方でこれを機能させることができます。

コードは次のようになります。

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