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

「sendResponse」が非同期関数や Promise の解決を待たない

はじめに

popup.js からメッセージを送信する場合contentscript.js に、 sendResponse() 関数は、getThumbnails() 関数が完了するまで待機することが期待されます。ただし、このシナリオでは、sendResponse() が待機していないため、非同期性の問題が発生します。

問題の説明

主な問題は、Chrome がまだ onMessage リスナーの戻り値の Promise をサポートしていないことです。マニフェスト V2 と V3 の両方にあります。その結果、リスナーが async キーワードを宣言すると、onMessage で必要なリテラルの true 値の代わりに Promise が返されます。これにより、返された 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';
}

非同期/Promise リスナーを許可するための API へのパッチ適用

または、Chrome を使用して次のコードを各スクリプトに追加することで、API にパッチを適用して非同期/Promise リスナーを許可することもできます。 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);
  });
}

パッチを適用すると、値を返すことができます直接:

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