Come risolvere "Unchecked runtime.lastError: la porta del messaggio chiusa prima che fosse ricevuta una risposta" problema di Chrome?

Sto usando VueJS e Laravel per il mio progetto. Questo problema ha iniziato a manifestarsi di recente e si manifesta anche nei vecchi rami git.

Questo errore viene visualizzato solo nel browser Chrome.

Ho disabilitato tutte le estensioni installate in Chrome - funziona per me. Ora ho una console chiara senza errori.

Nel caso in cui tu sia uno sviluppatore di estensioni che ha cercato su Google qui cercando di smettere di causare questo errore:

Il problema non è CORB, poiché i COR bloccati si manifestano come avvisi come:

Cross-Origin Read Blocking (CORB) ha bloccato la risposta all'origine incrociata https://www.example.com/esempio.html con testo / html di tipo MIME. Vedi https://www.chromestatus.com/feature/5629709824032768 per maggiori dettagli.

Molto probabilmente il problema è una risposta asincrona non gestita a runtime.sendMessage. Come dice MDN :

Per inviare una risposta asincrona, ci sono due opzioni:

• restituisce true dal listener di eventi. Ciò mantiene valida la funzione sendResponse dopo il ritorno del listener, quindi è possibile chiamarla in un secondo momento.
• restituire una promessa dal listener di eventi e risolverla quando si ha la risposta (o rifiutarla in caso di errore).

Quando si invia una risposta asincrona ma non si utilizza uno di questi meccanismi, l' sendResponseargomento fornito non sendMessagerientra nell'ambito e il risultato è esattamente come dice il messaggio di errore: la porta del messaggio (l'apparato di passaggio del messaggio) viene chiusa prima che la risposta fosse ricevuto.

Gli autori di Webextension-polyfill ne hanno già scritto a giugno 2018 .

In conclusione, se vedi l'estensione che causa questi errori, controlla attentamente tutti i tuoi ascoltatori onMessage. Alcuni di loro probabilmente hanno bisogno di iniziare a restituire le promesse (contrassegnarle come asincrone dovrebbe essere sufficiente). [Grazie @vdegenne]

Se vai su chrome: // extensions / , puoi semplicemente attivare ogni estensione una alla volta e vedere quale sta effettivamente causando il problema.

Una volta disattivata l'estensione, aggiorna la pagina in cui viene visualizzato l'errore e muovi il mouse o fai clic. Le azioni del mouse sono le cose che generano errori.

Quindi sono stato in grado di individuare quale estensione stava effettivamente causando il problema e disabilitarlo.

Post è piuttosto vecchio e non strettamente correlato allo sviluppo delle estensioni di Chrome, ma lascia che sia qui.

Ho avuto lo stesso problema quando rispondevo al messaggio in richiamata. La soluzione è restituire true nel listener di messaggi in background.

Ecco un semplice esempio di background.js . Risponde a qualsiasi messaggio di 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
});

Ecco popup.js , che invia un messaggio su popup. Otterrai eccezioni finché non annullerai il commento della riga "return true" nel file background.js .

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

manifest.json , per ogni evenienza :) Prestare attenzione alla sezione delle autorizzazioni di allarme!

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

Ho risposto a questo .

Nel mio caso, il problema era a causa di Video Downloader professionaleAdBlock

In breve, questo problema si verifica a causa di alcuni plugin di Google Chrome

Se il motivo dell'errore è l'estensione, utilizza l'incognito Ctrl+ Shift+ N. In modalità di navigazione in incognito Chrome non ha estensioni.

UPD. Se hai bisogno di un'estensione in modalità di navigazione in incognito, ad esempio ReduxDevTools o di qualsiasi altra, nelle impostazioni dell'estensione attiva "Consenti in incognito"

Per coloro che vengono qui per eseguire il debug di questo errore in Chrome 73, una possibilità è perché Chrome 73 in poi non consente le richieste di origine incrociata negli script di contenuto.

Più lettura:

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

Ciò influisce su molti autori di estensioni di Chrome, che ora devono rimescolarsi per sistemare le estensioni perché Chrome pensa che "I nostri dati mostrano che la maggior parte delle estensioni non saranno interessate da questa modifica".

(non ha nulla a che fare con il codice dell'app)

AGGIORNAMENTO : ho risolto il problema dei COR ma vedo ancora questo errore. Ho il sospetto che sia colpa di Chrome qui.

Questo errore è generalmente causato da una delle tue estensioni di Chrome.

Consiglio di installare questo Disabilitato per l'estensione con un clic , lo uso con la scorciatoia da tastiera COMMAND (⌘)+ SHIFT (⇧)+D - per disabilitare / abilitare rapidamente tutte le mie estensioni.

Una volta disabilitate le estensioni, questo messaggio di errore dovrebbe scomparire.

Pace! ✌️

Nel mio caso era l'estensione di OneTab per Chrome.

Assicurati di utilizzare la sintassi corretta.

Dovremmo usare il metodo sendMessage () dopo averlo ascoltato.

Ecco un semplice esempio di contentScript.js E 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);
  }
});

Disabilitare se nel browser è installata un'estensione antivirus. Nel mio caso, l'estensione antivirus era il colpevole.

Per me lo è stato Auto Tab Discard, che genera questo errore nelle schede appuntate. Ho creato una segnalazione di bug, https://github.com/rNeomy/auto-tab-discard/issues/101 .

Nel mio caso è stato un punto di interruzione impostato nella mia sorgente di pagina. Se avessi rimosso o disabilitato il punto di interruzione, l'errore si sarebbe risolto.

Il punto di interruzione era in una porzione moderatamente complessa di codice di rendering. Altri punti di interruzione in diverse parti della pagina non hanno avuto tale effetto. Non sono stato in grado di elaborare un semplice test case che provoca sempre questo errore.

Stavo inviando i dati del registro della console da una scheda all'altra e non avevo davvero bisogno della prima console. Tuttavia, il messaggio di errore mi ha infastidito, quindi ho fatto clic con il pulsante destro del mouse e selezionato "non mostrare i messaggi dal sito Web x". Forse questa è la soluzione più semplice :)