如何修复“未检查的 runtime.lastError：消息端口在收到响应之前关闭”chrome 问题？答案

【问题标题】：如何修复“未检查的 runtime.lastError：消息端口在收到响应之前关闭”chrome 问题？
【发布时间】：2019-06-05 04:25:57
【问题描述】：

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

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

【问题讨论】：

你有广告拦截器吗？
检查我对这个其他请求的回答：stackoverflow.com/questions/53919591/…
谢谢大家，问题出在“Video Downloader Professional”扩展名上。
版主注意：我们不需要新的答案列出您发现的导致此问题的每个扩展程序。一个回答说问题可能是由扩展引起的并建议禁用它们就足够了。只是命名扩展名的答案已经并将继续被删除。
stackoverflow.com/questions/59914490/… 也许这里的答案比简单的“禁用 x 扩展”更有益

标签： laravel google-chrome vue.js

【解决方案1】：

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

【讨论】：

MeddleMonkey 已禁用
我遇到了这个问题，是由 Norton Safe Search Extension 引起的
在我的例子中，扩展是 Google Publisher Toolbar
对我来说是“诺顿安全网络”。
如何禁用所有扩展是一个解决方案......甚至是一个考虑因素。对于我们中的许多人来说，这些扩展提供了基本的功能。

【解决方案2】：

如果您是扩展程序开发人员，在这里搜索您的方式试图停止导致此错误：

问题不在于 CORB（正如此处的另一个答案所述），因为被阻止的 CORs manifest as warnings 就像 -

跨域读取阻塞 (CORB) 阻止了跨域响应 https://www.example.com/example.html，MIME 类型为 text/html。看 https://www.chromestatus.com/feature/5629709824032768 了解更多详情。

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

要发送异步响应，有两种选择：

从事件监听器返回真。这保留了 sendResponse 函数在监听器返回后有效，因此您可以稍后调用它。

从事件监听器返回一个 Promise，然后解析当您收到回复时（或在出现错误时拒绝回复）。

当您发送异步响应但未能使用其中任何一种机制时，提供给sendMessage 的sendResponse 参数超出范围，结果与错误消息完全相同：您的消息端口（消息-传递装置）在收到响应之前关闭。

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

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

【讨论】：

提醒不要使用async/await 作为后台监听器回调。这对我来说是失败的，我删除了async 并将我的await 结构转换为then 结构代码，现在它可以工作了。
但是...我不想发送任何回复，我也不期待回复！
多么好的修复，谢谢！我所要做的就是在我的 chrome.runtime.onMessage.addListener() 函数的底部添加return true;，问题就解决了！我在这个函数中使用了 jQuery 的 $.ajax，这就是我需要这个修复的原因。
感谢@OfekShilon。那是完美的解决方案。按预期工作。
@vdegenne 你可以使用async 作为监听器，但是你不能在最后使用return true，也不能使用sendResponse 回调。您只需要用实际响应来解决。

【解决方案3】：

如果您转至chrome://extensions/，您可以一次切换每个扩展程序，然后查看哪个扩展程序实际触发了问题。

关闭扩展程序后，刷新您看到错误的页面并左右摆动鼠标或单击。鼠标操作是引发错误的事情。

所以我能够查明实际上是哪个扩展程序导致了问题并将其禁用。

【讨论】：

在我的例子中是 1password 扩展
在我的例子中是色彩对比分析仪
在我的情况下，它是Google Publisher Toolbar，位于维瓦尔第vivaldi://extensions
是的，一一禁用扩展。我发现有几个扩展导致错误！谢谢
在我的例子中是卡巴斯基浏览器扩展。

【解决方案4】：

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

【讨论】：

它对我有用！默认return false 在什么情况下有用？
Docs says: This function becomes invalid when the event listener returns, unless you return true。无效是什么意思？它不应该在每次收到消息时创建吗？
@EduardoReis，如果为 FALSE，它可以用作通知某些事件的通知者。
Aleksej，你能帮我如何在 struts 1 web 项目中包含 addListener 代码吗？我使用 JS、JSP、HTML、FRAMES、CSS 作为 UI 堆栈。只是想知道到底需要在哪里应用它。尝试在父 js 文件中添加到 sn-p 下方，但无法识别。通常我的应用程序中没有侦听器代码。 chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) { setTimeout(function() { sendResponse({status: true}); }, 1); alert("Inside Background.js file"); return true ; // 返回 true 修复错误 });
对不起，我不知道 JSP 可以帮助你。你在你的 JS 代码中找到了监听器吗？

【解决方案5】：

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

UPD. 如果您需要隐身模式下的扩展程序，例如ReduxDevTools 或任何其他，在扩展设置中打开“允许隐身”

【讨论】：

【解决方案6】：

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

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

一旦禁用扩展，此错误消息应该会消失。

和平！ ✌️

【讨论】：

【解决方案7】：

对于那些在 Chrome 73 中调试此错误的人来说，一种可能是因为 Chrome 73 及更高版本不允许内容脚本中的跨域请求。

更多阅读：

这影响了许多 Chrome 扩展程序作者，他们现在需要争先恐后地修复扩展程序，因为 Chrome 认为“我们的数据显示大多数扩展程序不会受到此更改的影响。”

（与您的应用代码无关）

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

【讨论】：

【解决方案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);
  }
});

【讨论】：

sendRequest 已弃用 sendMessage
嗨，有人可以帮我如何在 struts 1 web 项目中包含 addListener 代码。我使用 JS、JSP、HTML、FRAMES、CSS 作为 UI 堆栈。只是想知道到底需要在哪里应用它。尝试在父 js 文件中添加到 sn-p 下方，但无法识别。通常我的应用程序中没有侦听器代码。 chrome.runtime.onMessage.addListener(function(rq, sender, sendResponse) { setTimeout(function() { sendResponse({status: true}); }, 1); alert("Inside Background.js file"); return true ; // 返回 true 修复错误 });

【解决方案9】：

在我的情况下，它是在我自己的页面源中设置的断点。如果我删除或禁用断点，那么错误就会清除。

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

【讨论】：