Pourquoi « sendResponse » n'attend-il pas les fonctions asynchrones dans « chrome.runtime.onMessage » de Chrome ?

sendResponse n'attend pas la fonction asynchrone ou la résolution de la promesse

Ce problème survient lors de l'utilisation de chrome.runtime.onMessage avec une fonction asynchrone ou une promesse qui renvoie le résultat dans l'écouteur. Chrome ne prend actuellement pas en charge les promesses dans la valeur renvoyée de onMessage pour ManifestV3 et V2.

Racine du problème

L'écouteur onMessage s'attend à conserver une valeur vraie littérale le canal de messagerie ouvert pour la fonction sendResponse. Cependant, lorsque l'écouteur est déclaré asynchrone, il renvoie une promesse, qui est ignorée par l'implémentation onMessage, fermant effectivement le port et renvoyant undéfini à l'appelant.

Rendre l'écouteur compatible

Pour résoudre ce problème, on peut éliminer le mot-clé async de l'écouteur et créer une fonction asynchrone distincte qui est invoquée dans le écouteur :

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
}

Correction de l'API

Comme alternative, un correctif peut être appliqué à l'API, permettant des auditeurs asynchrones :

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

Avec ce patch, vous pouvez renvoyer une promesse ou une valeur directement depuis l'auditeur comme ceci :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!