'Unchecked runtime.lastError : The message port closed before a response was received'크롬 문제를 해결하는 방법?

내 프로젝트에 VueJS와 Laravel을 사용하고 있습니다. 이 문제는 최근에 나타나기 시작했으며 이전 git 브랜치에서도 나타납니다.

이 오류는 Chrome 브라우저에서만 표시됩니다.

Chrome에 설치된 모든 확장 프로그램을 비활성화했습니다. 이제 오류없이 콘솔을 지 웠습니다.

이 오류의 발생을 중지하려고 여기에서 검색 한 확장 개발자 인 경우 :

문제는 아니다 CORB 차단 고르 같은 매니페스트 경고로 같은 -

Cross-Origin Read Blocking (CORB) 은 MIME 유형 text / html을 사용하여 출처 간 응답 https://www.example.com/example.html 을 차단했습니다 . 자세한 내용은 https://www.chromestatus.com/feature/5629709824032768 을 참조하세요.

문제는 runtime.sendMessage에 대한 잘못 처리 된 비동기 응답 일 가능성이 높습니다. 로 MDN는 말한다 :

비동기 응답을 보내려면 두 가지 옵션이 있습니다.

• 이벤트 리스너에서 true를 반환합니다. 이렇게하면 리스너가 반환 된 후에도 sendResponse 함수가 유효한 상태로 유지되므로 나중에 호출 할 수 있습니다.
• 이벤트 리스너에서 Promise를 반환하고 응답이있을 때 해결합니다 (또는 오류가 발생한 경우 거부).

비동기 응답을 보내지 만 이러한 메커니즘 중 하나를 사용하지 못하면 제공된 sendResponse인수 sendMessage가 범위를 벗어나고 결과는 오류 메시지가 말하는 것과 같습니다. 응답이 끝나기 전에 메시지 포트 (메시지 전달 장치)가 닫힙니다. 받았습니다.

Webextension-polyfill 작성자는 이미 2018 년 6 월에 이에 대해 작성했습니다 .

따라서 결론적으로 확장 프로그램이 이러한 오류를 일으키는 경우-모든 onMessage 리스너를 면밀히 검사하십시오. 그들 중 일부는 아마도 프라 미스 반환을 시작해야 할 것입니다 (비동기로 표시하면 충분할 것입니다). [@vdegenne에게 감사드립니다]

chrome : // extensions / 로 이동하면 각 확장 프로그램을 한 번에 하나씩 전환하고 어떤 확장 프로그램이 실제로 문제를 일으키는 지 확인할 수 있습니다.

확장 기능을 끄면 오류가 발생한 페이지를 새로 고치고 마우스를 움직이거나 클릭하십시오. 마우스 동작은 오류를 발생시키는 것입니다.

그래서 실제로 문제를 일으키는 확장 프로그램을 찾아내어 비활성화 할 수있었습니다.

Post는 다소 오래되었고 Chrome 확장 프로그램 개발과 밀접한 관련이 없지만 여기에 두십시오.

콜백에서 메시지에 응답 할 때 동일한 문제가 발생했습니다. 해결책은 백그라운드 메시지 리스너에서 true 를 반환하는 것 입니다.

다음은 background.js의 간단한 예입니다 . 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
});

다음은 팝업 메시지를 보내는 popup.js 입니다. background.js 파일 에서 "return true"줄의 주석 처리를 해제 할 때까지 예외가 발생 합니다.

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

manifest.json , 경우에 대비해 :) 알람 권한 섹션에주의하세요!

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

나는에 대답 한 이 .

내 경우에는 문제 때문에이었다 Video Downloader professional및AdBlock

요컨대,이 문제는 일부 Google 크롬 플러그인으로 인해 발생합니다.

오류 이유가 확장자 인 경우 시크릿 Ctrl+ Shift+를 사용하십시오 N. 시크릿 모드에서 Chrome에는 확장 프로그램이 없습니다.

UPD. ReduxDevTools 등의 시크릿 모드에서 확장이 필요한 경우 확장 설정에서 '시크릿에서 허용'을 사용 설정하세요.

Chrome 73에서이 오류를 디버깅하기 위해 여기에 오는 사람들에게 한 가지 가능성은 Chrome 73 이상이 콘텐츠 스크립트에서 출처 간 요청을 허용하지 않기 때문입니다.

더 읽기 :

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

이는 많은 Chrome 확장 프로그램 작성자에게 영향을 미치며, Chrome은 "우리 데이터에 따르면 대부분의 확장 프로그램이이 변경 사항에 영향을받지 않을 것"이라고 생각하기 때문에 확장 프로그램을 수정하기 위해 노력해야합니다.

(앱 코드와 관련이 없음)

업데이트 : CORs 문제를 수정했지만 여전히이 오류가 표시됩니다. 나는 이것이 크롬의 잘못이라고 생각한다.

이 오류는 일반적으로 Chrome 확장 프로그램 중 하나로 인해 발생합니다.

이 One-Click Extension Disabler를 설치하는 것이 좋습니다 . 키보드 단축키 COMMAND (⌘)+ SHIFT (⇧)+ 와 함께 D사용하여 모든 확장 기능을 빠르게 비활성화 / 활성화합니다.

확장 기능이 비활성화되면이 오류 메시지가 사라집니다.

평화! ✌️

제 경우에는 OneTab 크롬 확장 프로그램이었습니다.

올바른 구문을 사용하고 있는지 확인하십시오.

수신 후 sendMessage () 메소드를 사용해야합니다 .

다음은 contentScript.js 의 간단한 예제입니다 . 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);
  }
});

브라우저에 안티 바이러스 확장 프로그램이 설치되어 있으면 비활성화하십시오. 제 경우에는 안티 바이러스 확장이 범인이었습니다.

나를 위해 그것은 Auto Tab Discard고정 된 탭에서 그 오류를 던지는 이었습니다 . https://github.com/rNeomy/auto-tab-discard/issues/101 버그 보고서를 작성했습니다 .

제 경우에는 내 페이지 소스에 설정된 중단 점이었습니다. 중단 점을 제거하거나 비활성화하면 오류가 해결됩니다.

중단 점은 적당히 복잡한 렌더링 코드 청크에있었습니다. 페이지의 다른 부분에있는 다른 중단 점은 그러한 영향을 미치지 않았습니다. 이 오류를 항상 유발하는 간단한 테스트 케이스를 해결할 수 없었습니다.

한 탭에서 다른 탭으로 콘솔 로그 데이터를 보내고 있었고 실제로 첫 번째 콘솔이 필요하지 않았습니다. 그러나 오류 메시지가 나를 괴롭 혔기 때문에 마우스 오른쪽 버튼을 클릭하고 "x 웹 사이트의 메시지를 표시하지 않음"을 선택했습니다. 아마도 이것이 가장 쉬운 해결책 일 것입니다 :)