Mengapa `sendResponse()` Tidak Menunggu Fungsi Asynchronous dalam Pendengar `onMessage` Chrome?

"sendResponse" Tidak Menunggu Fungsi Asynchronous atau Promise's Resolve

Pengenalan

Apabila menghantar mesej daripada popup.js kepada contentscript.js, the Fungsi sendResponse() dijangka menunggu untuk fungsi getThumbnails() selesai. Walau bagaimanapun, dalam senario ini, sendResponse() tidak menunggu, menyebabkan isu dengan Asynchronicity.

Penjelasan Isu

Isu utama ialah Chrome masih kekurangan sokongan untuk janji dalam nilai yang dikembalikan pendengar onMessage dalam kedua-dua Manifes V2 dan V3. Akibatnya, apabila pendengar anda mengisytiharkan kata kunci async, ia mengembalikan janji dan bukannya nilai sebenar literal yang diperlukan oleh onMessage. Ini menyebabkan janji yang dikembalikan akan diabaikan, menutup saluran pemesejan lebih awal.

Penyelesaian: Menjadikan Pendengar Serasi

Untuk memastikan keserasian dengan pelaksanaan Chrome semasa, anda boleh mengalih keluar kata kunci async dari sebelumnya parameter fungsi (permintaan, penghantar, sendResponse) dan mengisytiharkan fungsi tak segerak yang berasingan untuk mengendalikan mesej pemprosesan:

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

Menampal API untuk Allow Async/Promise Listener

Sebagai alternatif, anda boleh menampal API untuk membenarkan pendengar asynchronous/promise dengan menambahkan kod berikut pada setiap skrip menggunakan 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);
  });
}

Dengan tampalan digunakan, anda boleh mengembalikan nilai secara langsung:

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

Atas ialah kandungan terperinci Mengapa `sendResponse()` Tidak Menunggu Fungsi Asynchronous dalam Pendengar `onMessage` Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!