Comment résoudre le problème de chrome 'Unchecked runtime.lastError: Le port de message s'est fermé avant qu'une réponse ne soit reçue'?

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

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

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

Si vous êtes un développeur d'extension qui a cherché sur Google votre chemin ici en essayant d'arrêter de provoquer cette erreur:

Le problème n'est pas CORB, car les COR bloqués se manifestent par des avertissements tels que -

Le blocage de lecture d'origine croisée (CORB) a bloqué la réponse d'origine croisé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 une réponse asynchrone mal gérée à runtime.sendMessage. Comme le dit MDN :

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

• retourne true de l'écouteur d'événements. Cela maintient la fonction sendResponse valide après le retour de l'écouteur, afin que vous puissiez l'appeler plus tard.
• renvoyer une promesse de l'écouteur d'événements, 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 aucun de ces mécanismes, l' sendResponseargument fourni àsendMessage devient hors de portée et le résultat est exactement comme le message d'erreur l'indique: votre port de message (l'appareil de transmission de messages) est fermé avant que la réponse ne soit reçu.

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

En fin de compte, si vous voyez que votre extension est à l'origine de ces erreurs, inspectez attentivement tous vos écouteurs onMessage. Certains d'entre eux ont probablement besoin de commencer à renvoyer des promesses (les marquer comme asynchrones devrait suffire). [Merci @vdegenne]

Si vous allez sur chrome: // extensions / , vous pouvez simplement basculer chaque extension une par une et voir laquelle est réellement à l'origine du problème.

Une fois que vous avez désactivé l'extension, actualisez la page où vous voyez l'erreur et faites bouger la souris ou cliquez sur. Les actions de la souris sont les éléments qui génèrent des erreurs.

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

Le message est plutôt ancien et n'est pas étroitement lié au développement d'extensions Chrome, mais laissez-le être ici.

J'ai eu le même problème en répondant au message en rappel. La solution consiste à retourner true dans l'écouteur de message d'arrière-plan.

Voici un exemple simple de background.js . Il répond à tout message 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 popup. Vous obtiendrez des exceptions jusqu'à ce que vous annuliez le commentaire de la ligne "return true" dans le fichier background.js .

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

manifest.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"
  ]
}

J'ai répondu à ce sujet .

Dans mon cas, le problème était dû à Video Downloader professionaletAdBlock

En bref, ce problème se produit en raison de certains plugins Google Chrome

Si la raison de l'erreur est l'extension, utilisez incognito Ctrl+ Shift+ N. En mode navigation privée, Chrome n'a pas d'extensions.

UPD. Si vous avez besoin d'une extension en mode navigation privée, par exemple ReduxDevTools ou tout autre, dans les paramètres d'extension, activez "Autoriser en mode navigation privée"

Pour ceux qui viennent ici pour déboguer cette erreur dans Chrome 73, une possibilité est que Chrome 73 et les versions ultérieures interdisent les demandes d'origine croisée dans les scripts de contenu.

Plus de lecture:

1. https://www.chromestatus.com/feature/5629709824032768
2. https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

Cela affecte de nombreux auteurs d'extensions Chrome, qui doivent maintenant se démener pour corriger les extensions, car Chrome pense que "Nos données montrent que la plupart des extensions ne seront pas affectées par ce changement."

(cela n'a rien à voir avec le code de votre application)

MISE À JOUR : J'ai résolu le problème des COR mais je vois toujours cette erreur. Je soupçonne que c'est la faute de Chrome ici.

Cette erreur est généralement causée par l'une de vos extensions Chrome.

Je recommande d'installer ce désactivateur d'extension en un clic , je l'utilise avec le raccourci clavier COMMAND (⌘)+ SHIFT (⇧)+D - pour désactiver / activer rapidement toutes mes extensions.

Une fois les extensions désactivées, ce message d'erreur devrait disparaître.

Paix! ✌️

Dans mon cas, c'était l'extension Chrome OneTab.

Assurez-vous que vous utilisez la syntaxe correcte.

Nous devrions utiliser la méthode sendMessage () après l'avoir écoutée.

Voici un exemple simple de contentScript.js Il sendRequest à app.js .

contentScript.js

chrome.extension.sendRequest({
    title: 'giveSomeTitle', params: paramsToSend
  }, function(result) { 
    // Do Some action
});

app.js

chrome.extension.onRequest.addListener( function(message, sender, 
 sendResponse) {
  if(message.title === 'giveSomeTitle'){
    // Do some action with message.params
    sendResponse(true);
  }
});

Désactivez si une extension antivirus est installée sur le navigateur. Dans mon cas, l'extension anti-virus était le coupable.

Pour moi, c'était le cas Auto Tab Discard, ce qui jette cette erreur sur les onglets épinglés. J'ai créé un rapport de bogue, https://github.com/rNeomy/auto-tab-discard/issues/101 .

Dans mon cas, c'était un point d'arrêt défini dans ma propre source de page. Si je supprimais ou désactivais le point d'arrêt, l'erreur disparaîtrait.

Le point d'arrêt était dans un morceau de code de rendu moyennement complexe. D'autres points d'arrêt dans différentes parties de la page n'ont pas eu un tel effet. Je n'ai pas pu élaborer un cas de test simple qui déclenche toujours cette erreur.

J'envoyais les données du journal de la console d'un onglet à un autre et je n'avais pas vraiment besoin de la première console. Cependant, le message d'erreur m'a dérangé, j'ai donc cliqué avec le bouton droit de la souris et sélectionné "ne pas afficher les messages du site Web x". C'est peut-être la solution la plus simple :)