Расширение 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})
    }
  });

}

Теперь, если я отправляю ответ до вызова ajax в getUrlsфункции, ответ отправляется успешно, но в методе успеха вызова ajax, когда я отправляю ответ, он не отправляет его, когда я иду в отладку, я вижу, что Порт является нулевым внутри кода для sendResponseфункции.

Из документации дляchrome.runtime.onMessage.addListener :

Эта функция становится недействительной при возврате прослушивателя событий, если только вы не вернете истину из прослушивателя событий, чтобы указать, что вы хотите отправить ответ асинхронно (это будет держать канал сообщений открытым для другого конца, пока не будет вызван 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, чтобы сделать эту работу как в Chrome, так и в FF с помощью Firefox без обратных вызовов.

Ваш код будет выглядеть так:

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