部分笔记本Chrome扩展无法运行、WebSocket连接报错问题求解

根因说明 #

该报错中提到的ws://localhost:4000/sockjs-node请求和你业务代码中配置的AWS后端地址完全无关，是React开发工具链的热重载（HMR）功能自带的请求，说明你打包扩展用的React代码是开发模式构建产物，热重载相关的冗余代码被注入到了生产包中。
90%设备正常、10%异常的差异，是因为异常设备的浏览器/系统限制了扩展对localhost端口的访问，抛出的未捕获异常阻塞了后续业务逻辑执行，最终表现为无法和后端通信。

修复步骤 #

• 切换生产模式打包前端代码
  如果使用create-react-app脚手架，不要用npm start启动的开发服务产物打包扩展，必须执行npm run build生成生产环境构建产物；如果是自定义webpack配置，需要将构建参数设置为mode: 'production'，同时关闭devServer的hot、hotOnly配置项。
• 清理生产构建的冗余开发依赖
  检查webpack/vite的构建配置，生产构建阶段移除react-refresh、webpack-hot-middleware、sockjs-client等仅开发阶段需要的插件和依赖注入，避免热重载相关逻辑被打包进最终产物。
• 补全扩展权限配置（可选）
  如果你的扩展确实有访问本地端口的业务需求，需要在manifest.json的permissions字段中添加ws://localhost/*、http://localhost/*的访问权限，同时确认已经添加了AWS EC2后端地址的跨域访问权限。
• 打包后校验
  每次构建完成后，可以在打包生成的app.bundle.js中全局搜索sockjs-node、localhost:4000字符串，确认没有开发相关的冗余代码后再分发扩展包；测试阶段关闭本地前端开发服务后再加载扩展，验证问题是否复现。

内容的提问来源于stack exchange，提问作者Alwin George Daniel