为什么 Chrome 的 onMessage 监听器中的 sendResponse() 不等待异步函数？

"sendResponse" 不等待异步函数或 Promise 的 Resolve

简介

从 popup.js 发送消息时到 contentscript.js，sendResponse() 函数预计会等待 getThumbnails() 函数完成。然而，在这种情况下，sendResponse() 没有等待，导致异步问题。

问题说明

主要问题是 Chrome 仍然缺乏对 onMessage 监听器返回值中的 Promise 的支持在清单 V2 和 V3 中。因此，当您的侦听器声明 async 关键字时，它会返回一个 Promise，而不是 onMessage 所需的字面 true 值。这会导致返回的 Promise 被忽略，过早关闭消息通道。

解决方案：使监听器兼容

为了确保与当前 Chrome 实现的兼容性，您可以删除之前的 async 关键字函数参数（request、sender、sendResponse）并声明一个单独的异步函数来处理消息处理：

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);
  // ... asynchronous processing code
  return 'foo';
}

修补 API对于允许异步/承诺侦听器

或者，您可以通过使用 chrome.runtime.onMessage 将以下代码添加到每个脚本来修补 API 以允许异步/承诺侦听器：

if ('crbug.com/1185241') { // replace with a check for Chrome version that fixes the bug
  const {onMessage} = chrome.runtime, {addListener} = onMessage; 
  onMessage.addListener = fn => addListener.call(onMessage, (msg, sender, respond) => {
    const res = fn(msg, sender, respond);
    if (res instanceof Promise) return !!res.then(respond, console.error);
    if (res !== undefined) respond(res);
  });
}

With应用补丁后，可以直接返回值：

chrome.runtime.onMessage.addListener(async msg => {
  if (msg === 'foo') {
    const res = await fetch('https://foo/bar');
    const payload = await res.text();
    return {payload};
  }
});

以上是为什么 Chrome 的 onMessage 监听器中的 sendResponse() 不等待异步函数？的详细内容。更多信息请关注PHP中文网其他相关文章！