Повідомлення з розширенням Chrome проходить: відповідь не надіслана

Я намагаюся передавати повідомлення між скриптом вмісту та розширенням

Ось що я маю у content-script

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