sendResponse 不等待异步函数或 Promise 的解析[重复]

我遇到了异步问题（我相信）。sendResponse() in 内容脚本.js不等待getThumbnails()回来。

我正在发送一个message in 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)   
      }
);

然后，在内容脚本.js I listen对于此消息：

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

但这不起作用，它似乎破坏了我的代码......

问题是你的监听器声明为async关键字，所以它返回一个Promise，不是字面意思true价值为required https://developer.chrome.com/extensions/runtime#event-onMessage通过 onMessage 实现，但是Chrome在ManifestV3和V2中的onMessage监听器的返回值中仍然不支持Promise，报告于https://crbug.com/1185241 https://crbug.com/1185241。你返回的 Promise 被忽略，端口立即关闭，调用者收到undefined作为回应。

解决方案

去除async之前的关键字(request, sender, sendResponse)， 然后...

解决方案1致电async可以作为 IIFE 嵌入的函数：

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

解决方案2声明一个单独的async函数并从 onMessage 监听器调用它：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.message === "get_thumbnails") {
    processMessage(msg).then(sendResponse);
    return true; // keep the messaging channel open for sendResponse
  }
});

async function processMessage(msg) {
  console.log('Processing message', msg);
  // .................
  return 'foo';
}