'Unchecked runtime.lastError:응답이 수신되기 전에 메시지 포트가 닫힘' 크롬 문제?

'Unchecked runtime.lastError:응답이 수신되기 전에 메시지 포트가 닫힘' 크롬 문제?

이 게시물을 개선하고 싶으십니까?인용문 및 정답에 대한 설명을 포함하여 이 질문에 대한 자세한 답변을 제공하십시오.자세한 내용이 없는 답변은 편집하거나 삭제할 수 있다.

나는 내 프로젝트에 VueJS와 Laravel을 사용하고 있다.이 문제는 최근에 나타나기 시작했고 심지어 오래된 git 지점에서도 보여진다.

이 오류는 Chrome 브라우저에서만 나타난다.

나는 크롬에 설치된 모든 확장을 비활성화했다. 나에게 효과가 있다.나는 이제 오류 없는 확실한 콘솔을 갖게 되었다.

이 오류를 발생시키는 것을 멈추려고 구글로 검색한 확장 개발자일 경우:

이 문제는 CORB(여기서 언급된 또 다른 답변)가 아니라 차단된 COR은 다음과 같은 경고로 나타난다.

CORB(Cross-Origin Read Blocking)는 MIME 유형 텍스트/문자로 교차 검색 응답 https://www.example.com/example.html을 차단했다.자세한 내용은 https://www.chromestatus.com/feature/5629709824032768을 참조하십시오.

그 문제는 런타임에 대한 잘못된 비동기식 대응일 가능성이 높다.메시지를 보내다MDN의 설명에 따르면:

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

• 이벤트 청취자로부터 참말로 돌아가다이렇게 하면 수신기가 돌아온 후에도 sendResponse 기능이 유효하므로 나중에 호출할 수 있다.
• 이벤트 수신기에서 약속을 반환하고 응답이 있을 때 해결하십시오(또는 오류가 발생할 경우 거부).

비동기 응답을 보내지만 이러한 메커니즘 중 하나를 사용하지 못할 경우 제공된 메커니즘sendResponse에 대해 논하다.sendMessage범위를 벗어나면 오류 메시지가 표시된 대로 결과가 정확하다: 메시지 포트(메시지 전송 장치)는 응답을 받기 전에 닫힌다.

Webextension 폴리필 작가들은 이미 2018년 6월에 그것에 대해 썼다.

따라서 내선 번호가 이러한 오류를 유발하는 경우 모든 onMessage 수신기를 면밀히 검사하십시오.그들 중 일부는 아마도 약속의 반환을 시작할 필요가 있을 것이다(비동기식으로 표시하면 충분할 것이다.[고마워 @vdegenne]

크롬://확장/로 이동하면 각 확장자를 한 번에 하나씩 전환하여 어떤 확장자가 실제로 문제를 유발하는지 확인할 수 있다.

확장명을 끄면 오류가 표시된 페이지를 새로 고치고 마우스를 움직이거나 클릭하십시오.마우스 동작은 오류를 던지고 있는 것이다.

그래서 나는 어떤 확장자가 실제로 문제를 일으키고 있는지 정확히 지적하고 그것을 무력화할 수 있었다.

포스트는 다소 오래되어 크롬 확장 개발과 밀접한 관련이 없지만 여기에 두도록 한다.

콜백 메시지로 응답할 때도 같은 문제가 있었다.해결책은 백그라운드 메시지 수신기에서 참으로 돌아오는 것이다.

여기 background.js의 간단한 예가 있다.팝업.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"
  ]
}

오류 원인이 확장인 경우 익명 ++를 사용하십시오.ShiftN익명 모드에서 Chrome은 확장이 없다.

UPD. 인식되지 않는 모드로 확장해야 하는 경우(예:ReducedxDevTools 또는 기타 확장 설정에서 "익명하지 않은 상태에서 허용" 설정

이 오류는 일반적으로 크롬 확장 중 하나에 의해 발생한다.

이 원클릭 확장 기능 해제기를 설치할 것을 권장합니다, 모든 확장 기능을 빠르게 비활성화/활성화하기 위해 바로 가기 키 + -와 함께 사용하십시오.

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

평화! !️

Chrome 73에서 이 오류를 디버깅하기 위해 여기에 오는 사람들에게 한 가지 가능성은 Chrome 73 이후로는 컨텐츠 스크립트에서 크로스 오리진 요청을 허용하지 않기 때문이다.

추가 읽기:

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

이는 많은 크롬 확장 작성자들에게 영향을 미치며, 크롬은 "우리 데이터에 따르면 대부분의 확장이 이러한 변경에 영향을 받지 않을 것"이라고 생각하기 때문에 확장을 수정하기 위해 분투해야 한다.

(앱 코드와 무관함)

UPDATE: CORs 문제를 해결했지만 여전히 이 오류가 표시됨.나는 이것이 크롬의 잘못이라고 의심한다.

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

sendMessage() 메소드를 듣고 사용해야 한다.

여기 contentScript.js It sendRequest to 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);
  }
});

나의 경우 그것은 나 자신의 페이지 출처에 설정된 중단점이었다.중단점을 제거하거나 비활성화하면 오류가 해결된다.

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

참조URL: https://stackoverflow.com/questions/54126343/how-to-fix-unchecked-runtime-lasterror-the-message-port-closed-before-a-respon