[gelöst] Unchecked runtime.lastError: The message port closed before a response was received in Laravel Chrome

Ich wollte mein VueJS and Laravel-Projekt testen und habe folgenden Fehler in meinem Chrome-Browser: Unchecked runtime.lastError: The message port closed before a response was received in Laravel. Der Fehler tauchte bei mir in Chrome auf.

In diesem Beitrag möchte ich erklären, wie Sie diesen Fehler reproduzieren können und alle möglichen Lösungen diskutieren.

Unchecked runtime.lastError: The message port closed before a response was received

Lösungsvorschlag 1: Chrome Extensions deaktivieren

Wenn Sie zu chrome://extensions/ wechseln, können Sie einfach jede Erweiterung einzeln deaktivieren und sehen, welche das Problem wirklich verursacht.

Sobald Sie die Erweiterung deaktiviert haben, aktualisieren Sie die Seite, auf der der Fehler auftritt, und bewegen Sie die Maus, oder klicken Sie mit der linken Maustaste auf einen Bereich der Webseite. Die Mausbewegungen sind es, die den Fehler auslösen.

Ich schlage vor, Sie deaktivieren zunächst alle Erweiterungen und aktivieren sie dann eine nach der anderen, bis Sie diejenige finden, die das Problem verursacht hat. In meinem Fall verursachte Natural Reader Text to Speech diesen Fehler, also habe ich es deaktiviert. Es hat nichts mit Cross-Origin Read Blocking (CORB) zu tun, es sei denn, der Fehler erwähnt Cross-Origin.

Mögliche Plugins, die den „Unchecked runtime.lastError: The message port closed before a response was received in Laravel“ Fehler auslösen sind:

• 1password extension
• Color Contrast Analyzer
• Google Publisher Toolbar
• Kaspersky browser extension
• MeddleMonkey
• Norton Safe Search
• Norton Safe Web
• IObit Surfing Protection

Für alle, die den Fehler in Chrome 73 beheben wollen, besteht eine Möglichkeit darin, dass ab Chrome 73 Cross-Origin-Anfragen in Inhaltsskripten nicht mehr zulässig sind.

Mehr dazu:

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

Dies betrifft viele Entwickler von Chrome-Erweiterungen, die sich nun bemühen müssen, ihre Erweiterungen zu reparieren, weil Chrome meint: „Unsere Daten zeigen, dass die meisten Erweiterungen von dieser Änderung nicht betroffen sind.“

(es hat nichts mit dem Code Ihrer Anwendung zu tun)

UPDATE: Ich habe das CORs-Problem behoben, aber ich sehe immer noch diesen Fehler. Ich vermute, dass es hier die Schuld von Chrome ist.

Lösungsvorschlag 2: return: true in background.js

Ich hatte das gleiche Problem, wenn ich im Callback auf eine Nachricht reagierte. Die Lösung ist, true im Background Message Listener zurückzugeben.

Hier ist ein einfaches Beispiel für background.js. Es reagiert auf jede Nachricht von 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
});

Nachfolgend die Datei popup.js, die bei einem Popup eine Nachricht sendet. Sie werden Exceptions angezeigt bekommen, bis Sie die Zeile „return true“ in der Datei background.js auskommentieren.

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

Lösungsvorschlag 3: Auf korrekte Syntax achten

Vergewissern Sie sich, dass Sie die richtige Syntax verwenden.

Es sollte die Methode sendMessage() verwendet werden, nachdem es abgefragt wurde.

Hier ist ein einfaches Beispiel für contentScript.js Es sendet eine Anfrage an 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);
  }
});