【问题标题】:如何修复“未检查的 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,然后解析 当您收到回复时(或在出现错误时拒绝回复)。

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

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));
    });
});

ma​​nifest.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 及更高版本不允许内容脚本中的跨域请求。

      更多阅读:

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

      这影响了许多 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】:

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

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

        【讨论】:

          猜你喜欢
          • 2020-05-11
          • 2021-07-25
          • 2019-05-23
          • 2021-02-15
          • 2021-11-17
          • 2021-05-13
          • 2019-08-09
          • 2020-11-29
          相关资源
          最近更新 更多