“侦听器通过返回 true 指示异步响应，但消息通道在收到响应之前关闭”，这是什么意思？

Question

我正在开发一个 React 应用程序，并且使用了一些 npm 模块，其中一个模块是我必须自己构建的。（我的 NPM 包：\n https://www.npmjs.com/package/modale-react-rm）。

\n

这是一个简单的模式，用 来打开和关闭useState()。

\n

导入包后，我的控制台中出现错误，几秒钟后突然出现错误，而没有执行任何操作。

\n

\nUncaught (in promise)                                                                  localhost/:1\n\n    >{message: \'A listener indicated an asynchronous response by r\xe2\x80\xa6age channel closed before a response was received\'}\n         message: "A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received"\n        >[[Prototype]]: Object\n             >constructor: \xc6\x92 ()\n             >[[Prototype]]: Object\n\n       /* sometimes there are specific elements in addition but I could not check when they appear and when not */\n\n            Promise.then (asynchrone)       \n            (anonyme)              @content_script_bundle.js:108\n            handleNewFeatures      @content_script_bundle.js:101\n            handleUpdatedNodes     @content_script_bundle.js:101\n            (anonyme)              @content_script_bundle.js:101\n            childlist(asynchrone)\n            0                      @purplebox.js:1\n            (anonyme)              @purplebox.js:1\n            v                      @purplebox.js:1\n\n

\n

\n

它不会阻止我的页面，也不会阻止其功能的正常运行，但这是一个错误，我认为它应该被修复，也许可以帮助其他有同样问题的人。

\n

我指定我不在该项目中发出任何异步请求。一切都是本地的，我使用的少数数据是直接以原始格式导入的。\n我也不知道Purplebox.js来自哪里。

\n

Answer 1

此问题是跨域请求问题，由各种 Chrome 扩展程序引起。我的 Angular 应用程序中也有这个问题，在隐身模式下测试后，错误不再出现。

更多信息：谷歌论坛

/编辑：如果您是来到这里的扩展开发人员：您需要将跨源获取请求从内容脚本移动到扩展的后台页面，并从内容脚本调用它。不再允许在内容脚本中进行跨源提取。不要忘记return true请求末尾的 。更多信息和示例：Chromium 项目

Answer 2

就我而言，这是由Ghostery 扩展引起的，如果此错误出现在您的本地主机中，您需要将其添加到 Ghostery 的受信任站点列表中，错误就会消失。

Answer 3

后台脚本（MV3 中的服务工作线程）可能会进入非活动状态，而不向从内容脚本收到的消息发送响应。

例子：

后台脚本：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // ... handle message
  return true // Error message says you already return true
})

大多数 MV3 API 都是异步的，并且可以在有意义时返回 Promise。（在某些情况下，例如事件侦听器（例如：chrome.tabs.onRemoved），返回承诺没有意义）。然而，可以使用回调或承诺风格来读回响应。

内容脚本：读取响应的方法1：

chrome.runtime.sendMessage('ping', (response) => { /* read response */ })

内容脚本：读取响应的方法2：

chrome.runtime.sendMessage('ping').then(response => { /* read response */ })

您面临的问题是：后台脚本不会调用sendResponse()它收到的一条或多条消息并变为非活动状态（导致消息通道关闭）。但是，发送消息的内容脚本正在等待响应。

请检查您的消息发送者和处理程序。

Answer 4

它已在webextension-polyfill库中进行了讨论，许多扩展（包括 Ghostery）都使用该库。Chrome 最近进行了一项更改，引入了错误消息。

对于使用 polyfill 的项目，我希望如果合并修复，警告就会消失。请注意，使用了polyfill库，因为只有Firefox实现了新的基于promise的runtime.onMessage，而Chrome仍然强制执行原始的回调式API。

请注意， webextension-polyfill 库中已经有一个开放的拉取请求。它没有被合并，但根据我的测试，它解决了问题。因此，如果您需要快速修复内部使用该库的项目，您可以使用patch-package手动应用补丁。例如，这就是 Ghostery 中此类更改的样子。

Answer 5

我有同样的错误。我删除了Tampermonkey扩展并调整了我的AdBlock扩展，然后它对我有用了。