Jak naprawić problem z przeglądarką Chrome „Unchecked runtime.lastError: Port wiadomości został zamknięty przed otrzymaniem odpowiedzi”?

W moim projekcie używam VueJS i Laravel. Ten problem zaczął się ostatnio pojawiać i pojawia się nawet w starych gałęziach git.

Ten błąd pojawia się tylko w przeglądarce Chrome.

Wyłączyłem wszystkie zainstalowane rozszerzenia w Chrome - działa dla mnie. Mam teraz czystą konsolę bez błędów.

Jeśli jesteś programistą rozszerzeń, który przeszukał Cię tutaj, próbując przestać powodować ten błąd:

Problem nie dotyczy CORB, ponieważ zablokowane COR manifestują się jako ostrzeżenia, takie jak -

Cross-Origin Read Blocking (CORB) zablokował odpowiedź między źródłami https://www.example.com/example.html z typem MIME text / html. Więcej informacji można znaleźć pod adresem https://www.chromestatus.com/feature/5629709824032768 .

Problem jest najprawdopodobniej błędną odpowiedzią asynchroniczną na runtime.sendMessage. Jak mówi MDN :

Aby wysłać odpowiedź asynchroniczną, istnieją dwie opcje:

• zwraca prawdę z detektora zdarzeń. Dzięki temu funkcja sendResponse zachowuje ważność po powrocie odbiornika, dzięki czemu można ją później wywołać.
• zwróć Obietnicę od nasłuchiwania zdarzeń i rozwiąż ją, gdy otrzymasz odpowiedź (lub odrzuć ją w przypadku błędu).

Gdy wyślesz odpowiedź asynchroniczną, ale nie użyjesz żadnego z tych mechanizmów, dostarczony sendResponseargument sendMessagewykracza poza zakres, a wynik jest dokładnie taki, jak mówi komunikat o błędzie: twój port komunikatów (urządzenie do przekazywania komunikatów) jest zamykany przed odpowiedzią Odebrane.

Autorzy Webextension-polyfill pisali już o tym w czerwcu 2018 roku .

Podsumowując, jeśli zauważysz, że rozszerzenie powoduje te błędy - przyjrzyj się uważnie wszystkim odbiornikom onMessage. Część z nich prawdopodobnie będzie musiała zacząć zwracać obietnice (wystarczy oznaczyć je jako asynchroniczne). [Dzięki @vdegenne]

Jeśli przejdziesz do chrome: // extensions / , możesz po prostu przełączać każde rozszerzenie pojedynczo i zobaczyć, które faktycznie powoduje problem.

Po wyłączeniu rozszerzenia odśwież stronę, na której widzisz błąd i poruszaj myszą lub kliknij. Działania myszy to rzeczy, które generują błędy.

Dzięki temu mogłem określić, które rozszerzenie faktycznie powoduje problem i wyłączyć go.

Post jest dość stary i nie jest ściśle związany z rozwojem rozszerzeń Chrome, ale niech tu będzie.

Miałem ten sam problem podczas odpowiadania na wiadomość w oddzwonieniu. Rozwiązaniem jest zwrócenie wartości true w odbiorniku komunikatów w tle.

Oto prosty przykład background.js . Odpowiada na każdą wiadomość z pliku 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
});

Oto popup.js , który wysyła wiadomość w wyskakującym okienku. Będziesz otrzymywać wyjątki, dopóki nie usuniesz komentarza w wierszu „return true” w pliku background.js .

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

manifest.json , na wszelki wypadek :) Zwróć uwagę na sekcję uprawnień do alarmów!

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

Odpowiedziałem na to .

W moim przypadku problem był spowodowany Video Downloader professionaliAdBlock

Krótko mówiąc, ten problem występuje z powodu niektórych wtyczek Google Chrome

Jeśli przyczyną błędu jest rozszerzenie, użyj incognito Ctrl+ Shift+ N. W trybie incognito Chrome nie ma rozszerzeń.

UPD. Jeśli potrzebujesz jakiegoś rozszerzenia w trybie incognito, np. ReduxDevTools lub innego, w ustawieniach rozszerzenia włącz „Zezwól w trybie incognito”

Dla tych, którzy przyjeżdżają tutaj, aby debugować ten błąd w Chrome 73, jedną z możliwości jest to, że Chrome 73 od wersji nie zezwala na żądania cross-origin w skryptach zawartości.

Więcej do czytania:

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

Ma to wpływ na wielu autorów rozszerzeń Chrome, którzy teraz muszą próbować naprawić rozszerzenia, ponieważ Chrome uważa, że ​​„Nasze dane pokazują, że większość rozszerzeń nie zostanie dotknięta tą zmianą”.

(nie ma to nic wspólnego z kodem aplikacji)

AKTUALIZACJA : naprawiłem problem z COR, ale nadal widzę ten błąd. Podejrzewam, że to wina Chrome'a.

Ten błąd jest zwykle spowodowany przez jedno z rozszerzeń Chrome.

Zalecam zainstalowanie tego wyłącznika rozszerzeń jednym kliknięciem , używam go ze skrótem klawiaturowym COMMAND (⌘)+ SHIFT (⇧)+ D-, aby szybko wyłączyć / włączyć wszystkie moje rozszerzenia.

Po wyłączeniu rozszerzeń ten komunikat o błędzie powinien zniknąć.

Pokój! ✌️

W moim przypadku było to rozszerzenie Chrome OneTab.

Upewnij się, że używasz poprawnej składni.

Po wysłuchaniu powinniśmy użyć metody sendMessage () .

Oto prosty przykład contentScript.js It sendRequest do 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);
  }
});

Wyłącz, jeśli w przeglądarce jest zainstalowane jakiekolwiek rozszerzenie antywirusowe. W moim przypadku winowajcą było rozszerzenie antywirusowe.

U mnie to było Auto Tab Discard, co wyrzuca ten błąd na przypięte zakładki. Utworzyłem raport o błędzie, https://github.com/rNeomy/auto-tab-discard/issues/101 .

W moim przypadku był to punkt przerwania ustawiony w moim własnym źródle strony. Gdybym usunął lub wyłączył punkt przerwania, błąd zniknąłby.

Punkt przerwania znajdował się w umiarkowanie złożonym fragmencie kodu renderującego. Inne punkty przerwania w różnych częściach strony nie miały takiego efektu. Nie udało mi się opracować prostego przypadku testowego, który zawsze wywołuje ten błąd.

Wysyłałem dane dziennika konsoli z jednej karty do drugiej i tak naprawdę nie potrzebowałem pierwszej konsoli. Jednak komunikat o błędzie spowodował błąd, więc kliknąłem prawym przyciskiem myszy i wybrałem opcję „Nie pokazuj wiadomości z witryny x”. Może to najłatwiejsza naprawa :)