如何解决 Chrome 的 `chrome.tabs.sendMessage` 中的'sendResponse 不等待异步函数或 Promise 的解析”？

排查“sendResponse 不等待异步函数或 Promise 的解析”

问题：
Chrome 的 chrome。 tabs.sendMessage的sendResponse函数不等待异步函数或 Promise 解决方案。

问题分析：

在提供的代码中，内容脚本 (contentscript.js) 中的 getThumbnails 函数是一个异步函数，需要时间执行。但是，onMessage 侦听器中的 sendResponse 函数会立即调用，可能在 getThumbnails 完成执行之前调用。这会导致 sendResponse 在响应中返回 undefined 或 null。

解决方案 1：删除 Async 关键字并声明单独的异步函数

• 从 onMessage 中删除 async 关键字监听函数。
• 创建一个单独的异步函数来处理消息
• 从 onMessage 侦听器调用单独的异步函数并适当处理响应。

解决方案 2：修补异步侦听器的 API

• 在所有使用 chrome.runtime.onMessage 的脚本中使用之前添加补丁
• 补丁重新定义了 addListener 方法，以在监听器内启用 Promise 或异步函数响应。

Contentscript.js 中的实现：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "get_thumbnails") {
    getThumbnails().then(payload => {
      sendResponse({ payload });
      return true;  // Keep messaging channel open for sendResponse
    });
  }
});

async function getThumbnails() {
  // Your code to retrieve thumbnails
}

实施补丁：

// Patch to allow async/Promise listener
if ('crbug.com/1185241') {  // Replace with Chrome version check
  const { onMessage } = chrome.runtime;
  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);
  });
}

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

以上是如何解决 Chrome 的 `chrome.tabs.sendMessage` 中的'sendResponse 不等待异步函数或 Promise 的解析”？的详细内容。更多信息请关注PHP中文网其他相关文章！