如何解決 Chrome 的 `chrome.tabs.sendMessage` 中的「sendResponse 不等待非同步函數或 Promise 的解析」？

排查「sendResponse 不等待非同步函數或Promise 的解析」

問題：

問題：

問題：

問題分析：

• 在提供的程式碼中，內容腳本 (contentscript.js) 中的 getThumbnails 函數是一個非同步函數，需要時間執行。但是，onMessage 偵聽器中的 sendResponse 函數會立即調用，可能在 getThumbnails 完成執行之前調用。這會導致 sendResponse 在回應中傳回 undefined 或 null。
• 解決方案 1：刪除 Async 關鍵字並聲明單獨的非同步函數

從 onMessage 中刪除 async 關鍵字監聽函數。 建立一個單獨的非同步函數來處理訊息

從 onMessage 偵聽器呼叫單獨的非同步函數並適當處理回應。
• 解決方案2：修補非同步偵聽器的API

在所有使用chrome.runtime.onMessage 的腳本中使用之前新增修補程式

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
}

補丁重新定義了addListener 方法，以在監聽器內啟用Promise或非同步函數響應。

Contentscript.js 中的實現：

// 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中文網其他相關文章！