Chrome の `chrome.runtime.onMessage` で `sendResponse` が非同期関数を待機しないのはなぜですか?

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

この問題は、chrome.runtime.onMessage を非同期関数または Promise で使用するときに発生します。リスナーに結果を返します。 Chrome は現在、ManifestV3 と V2 の両方の onMessage の戻り値で Promises をサポートしていません。

問題の根源

onMessage リスナーはリテラルの true 値を保持することを期待しています。 sendResponse 関数用に開いているメッセージング チャネル。ただし、リスナーが非同期として宣言されている場合、リスナーは Promise を返しますが、これは onMessage 実装によって無視され、事実上ポートが閉じられ、呼び出し元に未定義が返されます。

リスナーの互換性の確保

この問題を解決するには、リスナーから async キーワードを削除し、リスナー内で呼び出される別の async 関数を作成します。リスナー:

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

async function processMessage(msg) {
  // Process the message and return the result
}

API へのパッチ適用

代わりに、API にパッチを適用して、非同期リスナーを許可できます:

if ('crbug.com/1185241') { // Check for Chrome version
  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);
  });
}

このパッチを使用すると、次のようにリスナーから直接 Promise または値を返すことができます。だから:

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.runtime.onMessage` で `sendResponse` が非同期関数を待機しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。