laravel 如何修复“未检查的 runtime.lastError：收到响应之前消息端口已关闭”chrome 问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54126343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue?
提问by Triumf Maqedonci
I'm using VueJS and Laravel for my project. This issue started to show lately and it shows even in the old git branches.
我在我的项目中使用 VueJS 和 Laravel。这个问题最近开始出现，甚至在旧的 git 分支中也会出现。
This error only shows in Chrome browser.
此错误仅在 Chrome 浏览器中显示。
回答by MirekH
I disabled all installed extensions in Chrome - works for me. I have now clear console without errors.
我禁用了 Chrome 中所有已安装的扩展程序 - 对我有用。我现在有清晰的控制台，没有错误。
回答by Aguayma
If you go to chrome://extensions/, you can just toggle each extension one at a time and see which one is actually triggering the issue.
如果您转到chrome://extensions/，您可以一次切换每个扩展名，然后查看哪个扩展名实际上引发了问题。
Once you toggle the extension off, refresh the page where you are seeing the error and wiggle the mouse around, or click. Mouse actions are the things that are throwing errors.
关闭扩展程序后，刷新您看到错误的页面并四处摆动鼠标，或单击。鼠标操作是引发错误的事情。
So I was able to pinpoint which extension was actually causing the issue and disable it.
所以我能够查明哪个扩展实际上导致了问题并禁用它。
回答by Ofek Shilon
In case you're an extension developer who googled your way here trying to stop causing this error:
如果您是一名扩展开发人员，他在这里搜索了您的方式，试图停止导致此错误：
The issue isn't CORB, as blocked CORs manifest as warningslike -
问题不在于 CORB，因为被阻止的 COR表现为警告，例如 -
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.example.com/example.htmlwith MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768for more details.
跨源读取阻止 (CORB) 阻止了具有 MIME 类型 text/html 的跨源响应 https://www.example.com/example.html。有关更多详细信息，请参阅 https://www.chromestatus.com/feature/5629709824032768。
The issue is most likely a mishandled async response to runtime.sendMessage. As MDN says:
问题很可能是对 runtime.sendMessage 的异步响应处理不当。正如MDN 所说：
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).
要发送异步响应，有两种选择：
- 从事件侦听器返回 true。这使 sendResponse 函数在侦听器返回后保持有效，因此您可以稍后调用它。
- 从事件侦听器返回一个 Promise，并在您有响应时解决（或在出现错误时拒绝它）。
When you send an async response but fail to use either of these mechanisms, the supplied sendResponseargument to sendMessagegoes out of scope and the result is exactly as the error message says: your message port (the message-passing apparatus) is closed before the response was received.
当您发送异步响应但未能使用这些机制中的任何一个时，提供的sendResponse参数sendMessage超出范围，结果与错误消息所说的完全一样：您的消息端口（消息传递设备）在响应之前关闭已收到。
Webextension-polyfill authors have already written about it in June 2018.
Webextension-polyfill 作者已经在 2018 年 6 月写了一篇关于它的文章。
So bottom line, if you see your extension causing these errors - inspect closely all your onMessage listeners. Some of them probably need to start returning promises (marking them as async should be enough).[Thanks @vdegenne]
所以最重要的是，如果你看到你的扩展导致这些错误 - 仔细检查你所有的 onMessage 侦听器。其中一些可能需要开始返回承诺（将它们标记为异步就足够了）。[感谢@vdegenne]
回答by Aleksej Vasinov
Post is rather old and not closely related to Chrome extensions development, but let it be here.
Post 已经很老了，并且与 Chrome 扩展程序的开发没有密切关系，但就让它在这里吧。
I had same problem when responding on message in callback. The solution is to return truein background message listener.
在回调中响应消息时我遇到了同样的问题。解决方案是在后台消息侦听器中返回true。
Here is simple example of background.js. It responses to any message from popup.js.
这是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
});
Here is popup.js, which sends message on popup. You'll get exceptions until you un-comment "return true" line in background.jsfile.
这是popup.js，它在弹出窗口中发送消息。在您取消对background.js文件中的“return true”行的注释之前，您将收到异常。
document.addEventListener("DOMContentLoaded", () => {
chrome.extension.sendMessage({action: "ping"}, function(resp) {
console.log(JSON.stringify(resp));
});
});
manifest.json, just in case :) Pay attention on alarm permissions section!
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"
]
}
回答by nokieng
回答by airush
If error reason is extension use incognito Ctrl+Shift+N. In incognito mode Chrome does not have extensions.
如果错误原因是扩展名，请使用 incognito Ctrl+ Shift+ N。在隐身模式下，Chrome 没有扩展程序。
UPD.If you need some extension in incognito mode e.g. ReduxDevTools or any other, in extension settings turn on "Allow in incognito"
更新。如果您需要隐身模式下的某些扩展程序，例如 ReduxDevTools 或任何其他扩展程序，请在扩展程序设置中打开“允许隐身”
回答by Jonathan Lin
For those coming here to debug this error in Chrome 73, one possibility is because Chrome 73 onwards disallows cross-origin requests in content scripts.
对于那些在 Chrome 73 中调试此错误的人来说，一种可能性是因为 Chrome 73 不允许在内容脚本中进行跨域请求。
More reading:
更多阅读：
- https://www.chromestatus.com/feature/5629709824032768
- https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
- https://www.chromestatus.com/feature/5629709824032768
- https://www.chromium.org/Home/chromium-security/extension-content-script-fetches
This affects many Chrome extension authors, who now need to scramble to fix the extensions because Chrome thinks "Our data shows that most extensions will not be affected by this change."
这影响了许多 Chrome 扩展程序作者，他们现在需要争先恐后地修复扩展程序，因为 Chrome 认为“我们的数据显示大多数扩展程序不会受到此更改的影响。”
(it has nothing to do with your app code)
（它与您的应用程序代码无关）
UPDATE: I fixed the CORs issue but I still see this error. I suspect it is Chrome's fault here.
更新：我修复了 COR 问题，但仍然看到此错误。我怀疑这是 Chrome 的错。
回答by Ahmad Awais
This error is generally caused by one of your Chrome extensions.
此错误通常是由您的 Chrome 扩展程序之一引起的。
I recommend installing this One-Click Extension Disabler, I use it with the keyboard shortcut COMMAND (?)+ SHIFT (?)+ D— to quickly disable/enable all my extensions.
我建议安装此One-Click Extension Disabler，我将它与键盘快捷键COMMAND (?)+ SHIFT (?)+ D— 一起使用，以快速禁用/启用我的所有扩展程序。
Once the extensions are disabled this error message should go away.
禁用扩展后，此错误消息应该会消失。
Peace! ??
和平！??
回答by Suleman
In my case it was OneTab chrome extension.
就我而言，它是 OneTab chrome 扩展。
回答by Gopal B Shimpi
Make sure you are using the correct syntax.
确保您使用正确的语法。
We should use the sendMessage()method after listening it.
我们应该在听完之后使用sendMessage()方法。
Here is a simple example of contentScript.jsIt sendRequest to app.js.
下面是一个简单的contentScript.js示例，它向app.js发送请求。
contentScript.js
内容脚本.js
chrome.extension.sendRequest({
title: 'giveSomeTitle', params: paramsToSend
}, function(result) {
// Do Some action
});
app.js
应用程序.js
chrome.extension.onRequest.addListener( function(message, sender,
sendResponse) {
if(message.title === 'giveSomeTitle'){
// Do some action with message.params
sendResponse(true);
}
});
