Warum wartet „sendResponse' nicht auf meine Async-Funktion im „onMessage'-Listener einer Chrome-Erweiterung?

sendResponse wartet nicht auf die asynchrone Funktion oder die Lösung des Versprechens

Problem:
Asynchronitätsproblem, bei dem sendResponse() in contentscript.js hält nicht an, bis getThumbnails() zurückkehrt. Darüber hinaus ist die Nutzlast in getThumbnails() häufig null, was auf eine möglicherweise unvollständige Ausführung hinweist.

Analyse:
Chrome unterstützt keine Promises im zurückgegebenen Wert von onMessage-Listenern in ManifestV3 und V2. Dies bedeutet, dass das vom asynchronen Listener zurückgegebene sendResponse Promise ignoriert wird und der Port sofort geschlossen wird.

Lösung:
Um den Listener kompatibel zu machen:

1. Entfernen Sie das Schlüsselwort async aus dem onMessage-Ereignis Listener.
2. Erstellen Sie eine separate asynchrone Funktion und rufen Sie sie über den Ereignis-Listener auf. Zum Beispiel:

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

So patchen Sie die API, um einen asynchronen/Promise-Listener zu ermöglichen:

1. Fügen Sie oben den folgenden Code hinzu jedes Skript, das chrome.runtime.onMessage verwendet:

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. Sie können dann einfach Geben Sie den Wert vom asynchronen Listener zurück:

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

Das obige ist der detaillierte Inhalt vonWarum wartet „sendResponse' nicht auf meine Async-Funktion im „onMessage'-Listener einer Chrome-Erweiterung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!