Chrome浏览器控制台Unchecked runtime.lastError: The message port closed before a response was received.

解决Chrome插件运行时错误
最新推荐文章于 2024-07-16 14:58:34 发布
原创 最新推荐文章于 2024-07-16 14:58:34 发布 · 6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#chrome #控制台 #浏览器 #前端 #插件扩展

本文记录了解决一个令人困惑的Chrome插件错误的过程，该错误为Unchecked runtime.lastError: The message port closed before a response was received.，并探讨了错误原因，包括插件扩展冲突和异步代码未正确处理等问题。

今天一个错误折腾了我很久，Unchecked runtime.lastError: The message port closed before a response was received.
一开始以为是代码出问题了，看了半天发现并不是，Google了一下，发现是迅雷，插件扩展造成的，
把它关闭之后就好了郁闷啊，坑了我好久，大家注意一下，也有可能不是迅雷，主要原因可能还是插件写法问题，异步未结束就开始了新的导致的，加一段这个就行 if(chrome.runtime.lastError){}，所以其他插件也有可能代码不严谨、规范，同样也会报这样的错误，
谷歌浏览器 Unchecked runtime.lastError: The message port closed before a response was received.，谷歌浏览器

谷歌浏览器 Unchecked runtime.lastError: The message port closed before a response was received.

更多阅读：

领略前端前沿，关注IT平头哥联盟,做有温度的攻城狮!，公众号：honeyBadger8

来源：Js中文网 - 前端进阶资源教程
链接：https://www.javascriptc.com/

全网多种方式解决Unchecked runtime.lastError: The message port closed before a response was received的错误
念兮为美
02-16 2万+
全网多种方式解决Unchecked runtime.lastError: The message port closed before a response was received的错误，比如后端使用sendResponse({farewell: "ok"})做出响应。如果你在如果你在chrome中引入了某一扩展程序，比如vue，Video Speed Master等，有可能会因为插件和程序不兼容导致这个错误。
Unchecked runtime.lastError: The message port closed before a response was received. 解决
chinagaobo的专栏
03-21 1170
Unchecked runtime.lastError: The message port closed before a response was received.
Vue学习报错1： Unchecked runtime.lastError: The message port closed before a response was received.
m0_58368200的博客
02-03 1万+
Unchecked runtime.lastError: The message port closed before a response was received.
Unchecked runtime.lastError: The message port closed before a response was received.
卑微的码蚁
09-05 1万+
插件冲突导致程序运行不起来
360浏览器报错：Unchecked runtime.lastError: The message port closed before a response was received.
u010234868的专栏
11-07 4155
同样的React项目在Chrome浏览器中控制台没有报错，在360极速浏览器中控制台出现：Unchecked runtime.lastError: The message port closed before a response was received.这种错误，原因是收到浏览器扩展程序的影响。2. 找到“工具”-》“管理扩展”，将已启用的扩展程序关闭，再次刷新浏览器页面，报错不再出现。1. 点击浏览器右上角的三横。
谷歌浏览器 Unchecked runtime.lastError: The message port closed before a response was received.
热门推荐
Stavin Li的博客
02-01 11万+
谷歌浏览器报错 版本 72.0.3626.81（正式版本） （32 位） 报错内容如下 原因：扩展程序问题 建议：打开chrome://extensions/，逐一关闭排查 以我的为例，发现罪魁祸首是以下扩展程序，最后关闭就好。 ...
谷歌浏览器插件扩展引起的报错 Unchecked runtime.lastError: The message port closed before a response was received.
画漫画的程序员∙苏南
11-21 3905
Unchecked runtime.lastError: The message port closed before a response was received. 7Error handling response: TypeError: Cannot read property 'bPlugin' of undefined at <URL> 今天一个错误折腾了我很久，...
index.html:1 Unchecked runtime.lastError: The message port closed before a response was received.
最新发布
09-04
提供的参考引用内容未涉及解决'index.html:1 Unchecked runtime.lastError: The message port closed before a response was received'错误的方案。不过一般而言，该错误通常与消息通信时端口在响应接收前就关闭有关...
info:1 Unchecked runtime.lastError: The message port closed before a response was received.
12-06
这个错误信息 "Unchecked runtime.lastError: The message port closed before a response was received." 通常出现在浏览器扩展或插件的开发和使用过程中，特别是在使用 Chrome 的 WebExtensions API 时。...
Chrome浏览器控制台Unchecked runtime.lastError: The message port closed before a response was received.解决
SqlloveSyn的博客
02-21 2490
开始以为是代码出问题了，看了半天发现并没有，经过查找后发现是迅雷插件扩展造成的，把它关闭之后就好了，大家注意一下，也有可能不是迅雷，主要原因可能还是插件写法问题，异步未结束就开始了新的导致的，加一段这个就行。，所以其他插件也有可能代码不严谨、规范，同样也会报这样的错误。把这个拓展关闭后再刷新页面，我的这个报错就没有了。
开发Vue时遇到浏览器报：unchecked runtime.lastError: The message port closed before a response was received.
qq_42988836的博客
05-11 6139
今天下午在开发Vue项目时，程序正常运行，浏览器却一直报：unchecked runtime.lastError: The message port closed before a response was received. 错误。
谷歌浏览器扩展程序报错 The message port closed before a response was received.
彳亍
08-31 5万+
问题描述 Chrome Extension 报错： Unchecked runtime.lastError: The message port closed before a response was received. 中文意思是，最近未检查的运行时错误：在接收到 response 响应消息之前，消息通道的端口就已经关闭了。 在 Chrome 的开发者工具的 Console 控制台中，可...
控制台报错：Unchecked runtime.lastError: The message port closed before a response was received.
zenkle的博客
05-06 4622
扩展程序有问题，“更多工具”中找到扩展程序，关闭不必要的扩展程序
解决问题Unchecked runtime.lastError: The message port closed before a response was received.
m0_67539167的博客
07-16 2876
这个时候你检查一下浏览器的扩展是不是用迅雷下载，把他关闭就可以了。今天运行vue程序与后端交互的时候发现浏览器报错。再次运行代码，一切正常。
谷歌Unchecked runtime.lastError: The message port closed before a response was received.错误导致请求重发
q283614346的博客
11-25 2018
现象：最新项目有个奇怪的现象，就是一个请求会被执行2次，只收到一次返回结果。 模拟场景如下：一个存钱交易，存100，能收到200，部分代码（是一个dubbo服务） @Reference(retries=0, timeout = 50000) private AccountService accountService; @GetMapping("/deposit/{uid}") ...
The message port closed before a response was received.
weixin_34341117的博客
02-25 1万+
问题描述：Chrome控制台报错：Unchecked runtime.lastError: The message port closed before a response was received. 问题分析：非检查型的运行错误：响应前信息端口关闭。 问题原因：浏览器的扩展程序使得端口意外关闭 解决方案：逐个关闭扩展程序，排查导致问题的扩展程序。 点击Chrome的右上角三个点--点击...
谷歌浏览器控制台 Unchecked runtime.lastError: The message port closed before a response was received.
weixin_42734024的博客
05-28 1190
安装的谷歌拓展程序有问题。 逐项查询后发现是迅雷下载插件报错，果断删除。
Chrome报错提示Unchecked runtime.lastError: The message port closed before a response was received....
weixin_30417487的博客
05-13 927
经过查询，此错误是Chrome扩展插件引起的。由于Chrome修改了API接口，原来的请求被拦截。（Chrome 73 onwards disallows cross-origin requests in content scripts. (Code in content scripts will now be subjected to the same CORS rules as the pag...
html5中video标签报错Unchecked runtime.lastError: The message port closed before a response was received.
04-28
<think>好的，我现在需要解决用户提出的关于HTML5 video标签导致的Unchecked runtime.lastError问题。首先，我需要理解这个错误的具体情况。根据用户提供的引用[1]和[2]，这个错误通常与浏览器扩展插件有关，尤其是那些可能与视频播放交互的插件，比如Video Speed Controller。另外，引用[2]中还提到了一个TypeError，可能与视频格式（如M3U8）有关，但用户当前的问题集中在video标签本身。 首先，我应该考虑常见的解决方案步骤。根据经验，这类错误通常是由于浏览器扩展与页面脚本冲突导致的。用户已经提到关闭插件可以解决问题，所以第一步建议用户禁用所有扩展并逐个启用以排查。接下来，检查video标签的属性和事件处理是否正确，比如确保autoplay属性与浏览器的自动播放策略兼容，可能需要用户交互后才能播放。此外，跨域问题也可能导致资源加载失败，需要检查CORS设置。 然后，考虑代码层面的问题。用户可能在JavaScript中监听了video元素的事件，但处理函数可能存在错误，比如未正确检查元素是否存在或未处理异常。例如，在引用[2]中的错误提到读取未定义的属性'isM3U8Video'，这可能是因为某个扩展试图访问未定义的属性，或者用户自己的代码中有类似问题。因此，建议用户检查事件监听器和相关处理函数，确保所有变量和属性正确初始化。 另外，浏览器的兼容性和日志记录也可能有帮助。引用[3]提到启用WebRTC日志，虽然主要针对WebRTC，但启用浏览器日志可能帮助捕获更多错误信息。因此，建议用户尝试启用详细日志来定位问题源。 最后，如果问题依旧存在，可能需要检查网络请求和浏览器控制台的其他错误，使用开发者工具查看网络面板和Console中的详细报错。同时，确保视频格式和编码被浏览器支持，比如H.264编码的MP4文件通常兼容性较好。 总结步骤：1. 禁用扩展；2. 检查autoplay和CORS；3. 验证事件处理代码；4. 启用浏览器日志；5. 测试不同视频格式。需要将这些步骤以清晰的结构呈现给用户，并引用相关的引用内容作为支持。</think>针对HTML5 video标签引发的`Unchecked runtime.lastError`问题，以下是系统化的解决方案： ### 1. 排查浏览器插件冲突 此错误常见于**浏览器扩展与video标签的交互冲突**。请按以下步骤操作： 1. 打开Chrome浏览器，访问 `chrome://extensions` 2. 禁用所有扩展（特别是视频控制类插件如Video Speed Controller） 3. 逐步启用扩展并刷新页面测试，定位问题插件[^1] 4. 更新或移除冲突插件 ### 2. 检查video标签属性配置 确保视频元素符合现代浏览器的安全策略： ```html <video controls muted <!-- 静音可绕过自动播放限制 --> playsinline preload="metadata" <!-- 避免过度预加载 --> crossorigin="anonymous" <!-- 处理跨域资源 --> > <source src="video.mp4" type="video/mp4"> </video> ``` 关键点： - 避免同时使用`autoplay`属性，现代浏览器要求用户交互后才允许自动播放 - 使用`muted`属性提升自动播放成功率 - 明确指定`crossorigin`属性处理CORS问题 ### 3. 验证事件监听逻辑 错误常源于未正确处理视频事件： ```javascript const video = document.querySelector('video'); // 安全的事件绑定方式 if(video) { video.addEventListener('error', (e) => { console.error('Video error:', video.error); }); video.addEventListener('play', () => { // 确保播放前完成初始化 if(!video.initialized) { initVideoComponents(); } }); } ``` 需特别注意： - 检查`canplaythrough`事件处理中的异步操作 - 避免在`timeupdate`等高频事件中执行重逻辑 - 使用`try-catch`包裹媒体操作 ### 4. 启用浏览器诊断日志 通过命令行参数获取详细错误信息： ```bash # Windows chrome.exe --enable-logging --v=1 --vmodule=*/media/*=2 # macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --enable-logging --v=1 --vmodule=*/media/*=2 ``` 日志文件位置： - Windows：`%LOCALAPPDATA%\Google\Chrome\User Data\chrome_debug.log` - macOS：`~/Library/Application Support/Google/Chrome/chrome_debug.log`[^3] ### 5. 视频格式兼容性验证 推荐使用行业通用格式： ```html <!-- 多格式兼容方案 --> <video> <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"> <source src="video.webm" type="video/webm; codecs='vp9, opus'"> </video> ``` 使用`ffprobe`检测视频编码： ```bash ffprobe -v error -show_format -show_streams input.mp4 ``` ### 进阶调试建议 1. 在Chrome DevTools中开启`Media`面板： - 访问 `chrome://media-internals` - 查看视频播放器的内部状态 2. 使用`navigator.mediaDevices.getUserMedia`检测硬件解码状态 3. 通过`videoElement.canPlayType('video/mp4')`检测格式支持 若问题仍未解决，建议提供以下信息： 1. 完整的浏览器控制台日志 2. 视频元数据信息 3. 页面中所有与video相关的JavaScript代码片段
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值