расширение chrome - sendResponse не ожидает асинхронную функцию

Question

У меня проблема асинхронности (я считаю). sendResponse() in contentscript.js не ожидает возврата getThumbnails().

Я отправляю сообщение в popup.js :

chrome.tabs.sendMessage(tabs[0].id, {message: "get_thumbnails", tabUrl: tabs[0].url},
      function (respThumbnails) {
            const thumbUrl = respThumbnails.payload;
            console.log("payload", thumbUrl)   
      }
);

Затем в contentscript.js I прослушайте для этого сообщения:

chrome.runtime.onMessage.addListener(async function(request,sender,sendResponse) {
    if(request.message === "get_thumbnails") {
        const payload = await getThumbnails();
        console.log("thumbPayload after function:", payload)
        sendResponse({payload:payload});   
    }
});


async function getThumbnails() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        } 
    }
    return tUrl;
};

Но также возможно, что проблема связана с моей функцией getThumnails(), потому что в большинстве случаев полезная нагрузка равна нулю и не является неопределенной. Так что getThumbnails() может вернуться до того, как он будет полностью выполнен. Если это так, я понятия не имею, почему ...

Я также пробовал этот код для getThubnails():

async function getThumbnails() {
  let x = await function() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        } 
    }
    return tUrl;
  }
  return x;
};

Но это не работает, кажется, что мой код нарушен ...

Answer 1

Обратный вызов onMessage должен возвращать true, чтобы внутренний канал обмена сообщениями был открыт, чтобы sendResponse мог работать асинхронно.

Проблема в том, что ваш обратный вызов объявлен с ключевым словом async, что означает, что он возвращает Promise, поэтому он не может возвращать буквальное значение true, так как API расширений Chrome не поддерживает Promise и, следовательно, не может разрешить его, вам нужно использовать стандартный обратный вызов функции.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "get_thumbnails") {
    (async () => {
      const payload = await getThumbnails();
      console.log("thumbPayload after function:", payload)
      sendResponse({payload});
    })();
    return true; // keep the messaging channel open for sendResponse
  }
});