Chrome 拡張機能の `onMessage` リスナーで非同期関数が `sendResponse` を待機しないのはなぜですか?

sendResponse が非同期関数または Promise の解決を待機していません

問題:
sendResponse() での非同期の問題contentscript.js では、getThumbnails() が返されるまで一時停止しません。さらに、getThumbnails() のペイロードは頻繁に null となり、実行が不完全である可能性があることを示しています。

分析:
Chrome は ManifestV3 と ManifestV3 の両方で onMessage リスナーの戻り値の Promises をサポートしていません。 V2。これは、非同期リスナーによって返された sendResponse Promise が無視され、ポートがすぐに閉じられることを意味します。

解決策:
リスナーに互換性を持たせるには:

1. onMessage イベントから async キーワードを削除しますlistener.
2. 別の非同期関数を作成し、イベント リスナーから呼び出します。例:

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

非同期/Promise リスナーを許可するように API にパッチを適用するには:

1. 次のコードを先頭に追加します。使用する各スクリプトchrome.runtime.onMessage:

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

2. その後、単純に非同期リスナーから値を返すことができます:

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 中国語 Web サイトの他の関連記事を参照してください。