Pourquoi « sendResponse » n'attend-il pas ma fonction asynchrone dans l'écouteur « onMessage » d'une extension Chrome ?

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

Problème :
Problème d'asynchronicité où sendResponse() dans contentscript.js ne s'arrête pas jusqu'au retour de getThumbnails(). De plus, la charge utile dans getThumbnails() est souvent nulle, ce qui indique une exécution potentiellement incomplète.

Analyse :
Chrome ne prend pas en charge les promesses dans la valeur renvoyée des écouteurs onMessage dans ManifestV3 et V2. Cela signifie que la promesse sendResponse renvoyée par l'écouteur asynchrone est ignorée et que le port est fermé immédiatement.

Solution :
Pour rendre l'écouteur compatible :

1. Supprimer le mot-clé async de l'événement onMessage écouteur.
2. Créez une fonction asynchrone distincte et appelez-la à partir de l'écouteur d'événement. Par exemple :

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

Pour corriger l'API afin d'autoriser un écouteur asynchrone/Promise :

1. Ajoutez le code suivant en haut de chaque script qui utilise 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);
  });
}

2. Vous pouvez alors simplement renvoie la valeur de l'écouteur asynchrone :

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!