如何在Chrome扩展Manifest V3中导入socket.io库？

方案1：ES模块导入（推荐） #

• 从npm下载socket.io-client包，取出node_modules/socket.io-client/dist/socket.io.esm.min.js文件放到你的扩展目录中
• 修改manifest.json，将background的service worker设置为模块类型：

"background": {
  "service_worker": "background.js",
  "type": "module"
}

• 在background.js中直接导入并使用：

import { io } from './socket.io.esm.min.js';
const socket = io('https://你的socket服务器地址');

// 示例：监听连接事件
socket.on('connect', () => {
  console.log('Socket连接成功');
});

方案2：使用IIFE版本（兼容非模块环境） #

• 下载socket.io-client的IIFE版本（node_modules/socket.io-client/dist/socket.io.min.js）到扩展目录
• 在background.js中通过importScripts加载脚本（service worker原生支持该方法）：

importScripts('./socket.io.min.js');
const socket = io('https://你的socket服务器地址');

// 示例：发送消息
socket.emit('message', '来自Chrome扩展的消息');

关键注意事项 #

• CSP配置：必须在manifest.json中添加socket服务器的连接权限，否则会被拦截：

"content_security_policy": {
  "extension_pages": "script-src 'self'; connect-src 'self' https://你的socket服务器地址;"
}

• Service Worker环境限制：Manifest V3的background是service worker，没有window对象，Socket.io的部分依赖DOM的特性无法使用，但基础的WebSocket传输（默认优先使用）完全支持，不影响核心的互通功能。
• 避免直接复制源码：之前复制socket.io.js代码失败，大概率是因为源码包含依赖浏览器环境的分支，使用官方打包好的ES模块或IIFE版本更可靠，无需自行处理环境兼容问题。

内容的提问来源于stack exchange，提问作者Sungtae Kim