Como corrigir o problema de cromo 'Unchecked runtime.lastError: A porta da mensagem foi fechada antes que uma resposta fosse recebida'?

Estou usando o VueJS e o Laravel para o meu projeto. Esse problema começou a aparecer recentemente e mostra até mesmo nos antigos ramos do git.

Este erro é exibido apenas no navegador Chrome.

Desativei todas as extensões instaladas no Chrome - funciona para mim. Agora tenho console limpo, sem erros.

Caso você seja um desenvolvedor de extensões que pesquisou no Google por aqui, tentando parar de causar este erro:

O problema não é o CORB, pois os CORs bloqueados se manifestam como avisos como -

O bloqueio de leitura de origem cruzada (CORB) bloqueou a resposta de origem cruzada https://www.example.com/example.html com o tipo MIME text / html. Consulte https://www.chromestatus.com/feature/5629709824032768 para obter mais detalhes.

O problema provavelmente é uma resposta assíncrona maltratada ao runtime.sendMessage. Como a MDN diz :

Para enviar uma resposta assíncrona, há duas opções:

• retornar true do ouvinte de evento. Isso mantém a função sendResponse válida após o retorno do ouvinte, para que você possa chamá-lo mais tarde.
• retorne uma promessa do ouvinte de evento e resolva quando tiver a resposta (ou a rejeite em caso de erro).

Quando você envia uma resposta assíncrona, mas falha ao usar um desses mecanismos, o sendResponseargumento fornecido sendMessagefica fora do escopo e o resultado é exatamente o que a mensagem de erro diz: sua porta de mensagem (o aparelho de passagem de mensagens) é fechada antes da resposta ser recebido.

Os autores do Webextension-polyfill já escreveram sobre isso em junho de 2018 .

Portanto, se você vê sua extensão causando esses erros - inspecione atentamente todos os ouvintes do onMessage. Alguns deles provavelmente precisam começar a devolver promessas (marcá-las como assíncronas deve ser suficiente). [Obrigado @vdegenne]

Se você acessar chrome: // extensions / , poderá alternar cada extensão uma por vez e ver qual está realmente causando o problema.

Depois de desativar a extensão, atualize a página em que você está vendo o erro e mova o mouse ou clique. As ações do mouse são as coisas que estão lançando erros.

Assim, pude identificar qual extensão estava realmente causando o problema e desativá-lo.

A postagem é bastante antiga e não está intimamente relacionada ao desenvolvimento de extensões do Chrome, mas deixe estar aqui.

Eu tive o mesmo problema ao responder a mensagem no retorno de chamada. A solução é retornar true no ouvinte de mensagem em segundo plano.

Aqui está um exemplo simples de background.js . É respostas a qualquer mensagem de 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
});

Aqui está o popup.js , que envia a mensagem no pop-up. Você receberá exceções até remover o comentário da linha "return true" no arquivo background.js .

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

manifest.json , apenas no caso :) Preste atenção na seção de permissões de alarme!

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

Eu respondi sobre isso .

No meu caso, o problema era por causa Video Downloader professionaleAdBlock

Em resumo, esse problema ocorre devido a alguns plugins do google chrome

Se o motivo do erro for extensão, use o modo anônimo Ctrl+ Shift+ N. No modo de navegação anônima, o Chrome não possui extensões.

UPD. Se você precisar de alguma extensão no modo de navegação anônima, por exemplo, ReduxDevTools ou qualquer outro, nas configurações de extensão, ative "Permitir no modo de navegação anônima"

Para quem vem aqui depurar esse erro no Chrome 73, uma possibilidade é porque o Chrome 73 em diante não permite solicitações de origem cruzada nos scripts de conteúdo.

Mais leitura:

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

Isso afeta muitos autores de extensões do Chrome, que agora precisam se esforçar para corrigir as extensões, porque o Chrome pensa "Nossos dados mostram que a maioria das extensões não será afetada por essa alteração".

(não tem nada a ver com o código do seu aplicativo)

ATUALIZAÇÃO : Corrigi o problema dos CORs, mas ainda vejo esse erro. Eu suspeito que é culpa do Chrome aqui.

Esse erro geralmente é causado por uma das suas extensões do Chrome.

Eu recomendo instalar este Desativador de extensão com um clique , eu o uso com o atalho de teclado COMMAND (⌘)+ SHIFT (⇧)+D - para desativar / ativar rapidamente todas as minhas extensões.

Uma vez que as extensões estão desabilitadas, esta mensagem de erro deve desaparecer.

Paz! ✌️

No meu caso, era a extensão do Chrome OneTab.

Verifique se você está usando a sintaxe correta.

Devemos usar o método sendMessage () depois de ouvi-lo.

Aqui está um exemplo simples de contentScript.js Ele sendRequest para 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);
  }
});

Desative se houver alguma extensão antivírus instalada no navegador. No meu caso, a extensão antivírus foi a culpada.

Para mim foi Auto Tab Discard, o que lança esse erro nas guias fixadas. Criei um relatório de bug, https://github.com/rNeomy/auto-tab-discard/issues/101 .

No meu caso, era um ponto de interrupção definido na minha própria fonte de página. Se eu removesse ou desabilitasse o ponto de interrupção, o erro seria resolvido.

O ponto de interrupção estava em um pedaço de código de renderização moderadamente complexo. Outros pontos de interrupção em diferentes partes da página não tiveram esse efeito. Não pude elaborar um caso de teste simples que sempre acionasse esse erro.

Eu estava enviando dados de log do console de uma guia para outra e realmente não precisava do primeiro console. No entanto, a mensagem de erro me incomodou, então cliquei com o botão direito do mouse e selecionei "não mostrar mensagens do site x". Talvez esta seja a solução mais fácil :)