¿Cómo solucionar el problema de Chrome 'Runtime.lastError no verificado: el puerto de mensajes se cerró antes de recibir una respuesta'?

Estoy usando VueJS y Laravel para mi proyecto. Este problema comenzó a aparecer últimamente y se muestra incluso en las antiguas ramas de git.

Este error solo se muestra en el navegador Chrome.

Deshabilité todas las extensiones instaladas en Chrome, funciona para mí. Ahora tengo la consola clara sin errores.

En caso de que sea un desarrollador de extensiones que buscó en Google tratando de dejar de causar este error:

El problema no es CORB, ya que los COR bloqueados se manifiestan como advertencias como:

El bloqueo de lectura de origen cruzado (CORB) bloqueó la respuesta de origen cruzado https://www.example.com/example.html con el tipo de texto MIME / html. Consulte https://www.chromestatus.com/feature/5629709824032768 para obtener más detalles.

El problema es muy probablemente una respuesta asíncrona mal manejada a runtime.sendMessage. Como dice MDN :

Para enviar una respuesta asincrónica, hay dos opciones:

• devuelve verdadero del oyente del evento. Esto mantiene la función sendResponse válida después de que el oyente regresa, por lo que puede llamarla más tarde.
• devolver una Promesa del oyente del evento y resolver cuando tenga la respuesta (o rechazarla en caso de error).

Cuando envía una respuesta asíncrona pero no utiliza ninguno de estos mecanismos, el sendResponseargumento suministrado sendMessagequeda fuera de alcance y el resultado es exactamente como dice el mensaje de error: su puerto de mensaje (el aparato de paso de mensaje) se cierra antes de que la respuesta fuera recibido.

Los autores de Webextension-polyfill ya lo escribieron en junio de 2018 .

En resumen, si ve que su extensión está causando estos errores, inspeccione de cerca todos sus oyentes onMessage. Algunos de ellos probablemente necesiten comenzar a devolver promesas (marcarlas como asíncronas debería ser suficiente). [Gracias @vdegenne]

Si va a chrome: // extensiones / , puede alternar cada extensión de una en una y ver cuál está desencadenando el problema.

Una vez que desactive la extensión, actualice la página donde está viendo el error y mueva el mouse o haga clic. Las acciones del mouse son las cosas que arrojan errores.

Así que pude determinar qué extensión estaba causando el problema y deshabilitarlo.

La publicación es bastante antigua y no está estrechamente relacionada con el desarrollo de extensiones de Chrome, pero déjalo aquí.

Tuve el mismo problema al responder un mensaje en la devolución de llamada. La solución es devolver verdadero en escucha de mensajes en segundo plano.

Aquí hay un ejemplo simple de background.js . Responde a cualquier mensaje 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
});

Aquí está popup.js , que envía un mensaje en la ventana emergente. Obtendrá excepciones hasta que descomente la línea "return true" en el archivo background.js .

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

manifest.json , por si acaso :) ¡Presta atención a la sección de permisos de alarma!

{
  "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"
  ]
}

He respondido sobre esto .

En mi caso, el problema fue por Video Downloader professionalyAdBlock

En resumen, este problema ocurre debido a algunos complementos de Google Chrome

Si la razón del error es la extensión, use incógnito Ctrl+ Shift+ N. En modo incógnito, Chrome no tiene extensiones.

UPD Si necesita alguna extensión en modo incógnito, por ejemplo, ReduxDevTools o cualquier otra, en la configuración de la extensión, active "Permitir en modo incógnito"

Para aquellos que vienen a depurar este error en Chrome 73, una posibilidad es que Chrome 73 en adelante no permita las solicitudes de origen cruzado en los scripts de contenido.

Más lectura:

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

Esto afecta a muchos autores de extensiones de Chrome, que ahora necesitan luchar para arreglar las extensiones porque Chrome piensa que "Nuestros datos muestran que la mayoría de las extensiones no se verán afectadas por este cambio".

(no tiene nada que ver con el código de su aplicación)

ACTUALIZACIÓN : Solucioné el problema de los COR pero aún veo este error. Sospecho que es culpa de Chrome aquí.

Este error generalmente es causado por una de sus extensiones de Chrome.

Recomiendo instalar este Deshabilitador de extensiones con un clic , lo uso con el atajo de teclado COMMAND (⌘)+ SHIFT (⇧)+ D- para deshabilitar / habilitar rápidamente todas mis extensiones.

Una vez que las extensiones están deshabilitadas, este mensaje de error debería desaparecer.

¡Paz! ✌️

En mi caso fue la extensión OneTab Chrome.

Asegúrese de estar utilizando la sintaxis correcta.

Deberíamos usar el método sendMessage () después de escucharlo.

Aquí está un ejemplo sencillo de contentScript.js Se sendRequest a 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);
  }
});

Deshabilite si hay alguna extensión antivirus instalada en el navegador. En mi caso, la extensión antivirus fue la culpable.

Para mí fue Auto Tab Discard, lo que arroja ese error en las pestañas ancladas. Creé un informe de error, https://github.com/rNeomy/auto-tab-discard/issues/101 .

En mi caso, fue un punto de interrupción establecido en mi propia fuente de página. Si eliminé o deshabilité el punto de interrupción, el error desaparecería.

El punto de interrupción estaba en una porción moderadamente compleja de código de representación. Otros puntos de interrupción en diferentes partes de la página no tuvieron tal efecto. No pude resolver un caso de prueba simple que siempre desencadena este error.

Estaba enviando datos de registro de la consola de una pestaña a otra y realmente no necesitaba la primera consola. Sin embargo, el mensaje de error me molestó, así que hice clic derecho y seleccioné "no mostrar mensajes del sitio web x". Quizás esta sea la solución más fácil :)