How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?

Question

我正在为我的项目使用 VueJS 和 Laravel。这个问题最近开始出现，甚至在旧的 git 分支中也会出现。

此错误仅在 Chrome 浏览器中显示。

Answer 1

我在 Chrome 中禁用了所有已安装的扩展 - 对我有用。我现在已经清除了没有错误的控制台。

Answer 2

如果您转到 chrome://extensions/，您可以一次只切换每个扩展程序，看看哪个扩展程序真正触发了问题。

关闭扩展程序后，刷新您看到错误的页面并四处移动鼠标或单击。鼠标操作是抛出错误的东西。

所以我能够查明实际导致问题的扩展程序并将其禁用。

Answer 3

对于那些来这里调试 Chrome 73 中的错误的人来说，一种可能是因为 Chrome 73 以后不允许在内容脚本中进行跨源请求。

更多阅读：

这影响了许多 Chrome 扩展作者，他们现在需要争先恐后地修复扩展，因为 Chrome 认为 "Our data shows that most extensions will not be affected by this change."

（与您的应用代码无关）

更新：我修复了 COR 问题，但我仍然看到此错误。我怀疑这是 Chrome 的错。

Answer 4

如果您是一名扩展程序开发人员，在这里用谷歌搜索试图停止导致此错误：

问题不是 CORB（如此处的另一个答案所述），而是像 -

那样被阻止的 COR manifest as warnings

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.example.com/example.html with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

问题很可能是对 runtime.sendMessage 的异步响应处理不当。作为 MDN says:

To send an asynchronous response, there are two options:

return true from the event listener. This keeps the sendResponse function valid after the listener returns, so you can call it later.

return a Promise from the event listener, and resolve when you have the response (or reject it in case of an error).

当您发送异步响应但未能使用这些机制中的任何一种时，为 sendMessage 提供的 sendResponse 参数超出范围并且结果与错误消息完全相同：您的消息端口（message-passing 设备）在收到响应之前关闭。

Webextension-polyfill 位作者有 already written about it in June 2018.

所以最重要的是，如果您发现您的扩展导致了这些错误 - 请仔细检查您所有的 onMessage 侦听器。其中一些可能需要开始返回承诺 ~~（将它们标记为异步就足够了）。~~ [感谢@vdegenne]

Answer 5

在我的例子中，它是在我自己的页面源代码中设置的断点。如果我删除或禁用断点，那么错误就会消失。

断点位于一段相当复杂的呈现代码中。页面不同部分的其他断点没有这种效果。我无法制定一个总是触发此错误的简单测试用例。

Answer 6

如果错误原因是扩展使用隐身 Ctrl+Shift+N。在隐身模式下 Chrome 没有扩展名。

UPD. 如果您需要在隐身模式下进行一些扩展，例如ReduxDevTools 或任何其他工具，在扩展设置中打开 "Allow in incognito"

Answer 7

Post 比较老，与 Chrome 扩展开发没有密切关系，但就放在这里吧。

我在回调中响应消息时遇到了同样的问题。解决办法是后台消息监听returntrue

这里是 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"
  ]
}

Answer 8

确保您使用的语法正确。

我们应该在监听后使用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);
  }
});

Answer 9

此错误通常是由您的 Chrome 扩展程序之一引起的。

我推荐安装这个One-Click Extension Disabler，我用键盘快捷键COMMAND (⌘) + SHIFT (⇧) + D — 快速 disable/enable 我所有的扩展。

禁用扩展程序后，此错误消息应该会消失。

和平！ ✌️

Answer 10

我建议您先禁用所有扩展，然后一个一个启用它们，直到您找到导致我的问题的那个 Natural Reader Text to Speech 导致此错误，所以我将其禁用。与 Cross-Origin 读取阻塞 (CORB) 无关，除非错误提及 Cross-Origin 然后进一步尝试这种方法是值得的。

Answer 11

此问题的原因与您的 chrome 扩展之一有关，与 CORS 或 CORB 无关。要解决此问题，您可以关闭安装的每个 chrome 扩展程序。

How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?

How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?

google-chrome

laravel

google-experiments

vue.js