Comment résoudre le problème 'Unchecked runtime.lastError : Le port de message s'est fermé avant la réception d'une réponse" ?

Question

J'utilise VueJS et Laravel pour mon projet. Ce problème a commencé à apparaître récemment et il apparaît même dans les anciennes branches git.

Cette erreur n'apparaît que dans le navigateur Chrome.

Answer 1

J'ai désactivé toutes les extensions installées dans Chrome - cela fonctionne pour moi. J'ai maintenant une console claire sans erreurs.

Answer 2

Si vous êtes un développeur d'extensions et que vous avez cherché sur Google à ne plus provoquer cette erreur :

Le problème n'est pas le CORB (comme le dit une autre réponse ici) mais les COR bloqués. se manifestent par des avertissements comme -

Blocage de la lecture d'origine croisée (CORB) : réponse d'origine croisée bloquée. https://www.example.com/example.html avec le type MIME text/html. Voir https://www.chromestatus.com/feature/5629709824032768 pour plus de détails.

Le problème est probablement dû à une réponse asynchrone mal gérée à runtime.sendMessage. Comme MDN dit :

Pour envoyer une réponse asynchrone, il existe deux options :

• retourner vrai à partir de l'écouteur d'événement. Cela permet à la fonction sendResponse reste valide après le retour de l'écouteur, afin que vous puissiez l'appeler plus tard.
• renvoyer une Promise depuis l'écouteur d'événement, et résoudre lorsque vous avez la réponse (ou la rejeter en cas d'erreur).

Lorsque vous envoyez une réponse asynchrone mais que vous n'utilisez pas l'un ou l'autre de ces mécanismes, la réponse asynchrone fournie par l'utilisateur ne sera pas prise en compte. sendResponse argument pour sendMessage sort de son champ d'application et le résultat est exactement ce que dit le message d'erreur : votre port de messages (l'appareil de transmission des messages) est fermé avant la réception de la réponse.

Les auteurs de Webextension-polyfill ont déjà écrit à ce sujet en juin 2018 .

En résumé, si vous constatez que votre extension provoque ces erreurs, examinez attentivement tous vos écouteurs onMessage. Certains d'entre eux ont probablement besoin de commencer à retourner des promesses (les marquer comme asynchrones devrait suffire). [Merci @vdegenne]

Answer 3

Si vous allez à chrome://extensions/ Si vous n'êtes pas en mesure de le faire, vous pouvez simplement basculer chaque extension une par une et voir laquelle déclenche le problème.

Une fois que vous avez désactivé l'extension, rafraîchissez la page où vous voyez l'erreur et déplacez la souris, ou cliquez. Ce sont les actions de la souris qui provoquent les erreurs.

J'ai donc pu identifier l'extension qui causait le problème et la désactiver.

Answer 4

L'article est plutôt ancien et n'est pas étroitement lié au développement des extensions Chrome, mais laissons-le ici.

J'ai eu le même problème en répondant à un message dans le callback. La solution est de retourner vrai dans le récepteur de messages en arrière-plan.

Voici un exemple simple de background.js . Il répond à tout message provenant de popup.js.

chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) {
    // setTimeout to simulate any callback (even from storage.sync)
    setTimeout(function() {
        sendResponse({status: true});
    }, 1);
    // return true;  // uncomment this line to fix error
});

Voici popup.js qui envoie un message sur le popup. Vous obtiendrez des exceptions jusqu'à ce que vous décommentez la ligne "return true" dans le fichier background.js fichier.

document.addEventListener("DOMContentLoaded", () => {
    chrome.extension.sendMessage({action: "ping"}, function(resp) {
        console.log(JSON.stringify(resp));
    });
});

manifeste.json juste au cas où :) Faites attention à la section des autorisations d'alarme !

{
  "name": "TestMessages",
  "version": "0.1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "src/popup.html"
  },
  "background": {
    "scripts": ["src/background.js"],
    "persistent": false
  },
  "permissions": [
    "alarms"
  ]
}

Answer 5

J'ai répondu sur ce .

Dans mon cas, le problème était dû à Video Downloader professional et AdBlock

En résumé, ce problème est dû à certains plugins de Google Chrome.