Warum wartet „sendResponse()' im „onMessage'-Listener von Chrome nicht auf asynchrone Funktionen?

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

Einführung

Beim Senden einer Nachricht von popup.js zu contentscript.js, der Funktion sendResponse() Es wird erwartet, dass auf den Abschluss der Funktion getThumbnails() gewartet wird. In diesem Szenario wartet sendResponse() jedoch nicht, was zu Problemen mit der Asynchronität führt.

Erläuterung des Problems

Das Hauptproblem besteht darin, dass Chrome immer noch keine Unterstützung für Versprechen im zurückgegebenen Wert von onMessage-Listenern bietet sowohl in Manifest V2 als auch V3. Wenn Ihr Listener das Schlüsselwort async deklariert, gibt er daher ein Promise anstelle des für onMessage erforderlichen wörtlichen wahren Werts zurück. Dies führt dazu, dass das zurückgegebene Versprechen ignoriert wird und der Nachrichtenkanal vorzeitig geschlossen wird.

Lösung: Den Listener kompatibel machen

Um die Kompatibilität mit der aktuellen Chrome-Implementierung sicherzustellen, können Sie das Schlüsselwort async von zuvor entfernen die Funktionsparameter (request, sender, sendResponse) und deklarieren Sie eine separate asynchrone Funktion zur Abwicklung der Nachrichtenverarbeitung:

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

Patching der API für Allow Asynchroner/Promise-Listener

Alternativ können Sie die API patchen, um asynchrone/Promise-Listener zuzulassen, indem Sie jedem Skript mit chrome.runtime.onMessage den folgenden Code hinzufügen:

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

Mit dem Patch angewendet, können Sie den Wert direkt zurückgeben:

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()' im „onMessage'-Listener von Chrome nicht auf asynchrone Funktionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!