Chrome扩展Manifest V3导入websocket-async时import语句报错求助

一、修复「Cannot use import statement outside a module」错误 #

你的content_scripts已配置type: "module"，但当前配置方式有误，按以下步骤调整：

1. 精简content_scripts配置
   移除content_scripts中直接列出的websocket-async文件，模块脚本会自行导入依赖，修改后的配置如下：

   "content_scripts": [
       {
           "matches": ["https://*.docs.google.com/*"],
           "js": ["src/main.js"],
           "css": ["src/style.css"],
           "type": "module"
       }
   ],
   

   若audio-worker.js是main.js的依赖，直接在main.js中导入即可，无需单独列在配置里。

2. 在main.js中正确导入websocket-async
   确保导入路径与文件实际位置匹配，比如你的websocket-async.esm.js在src/dist下，在main.js顶部添加：

   import { WebSocket } from './dist/websocket-async.esm.js';
   

   此时无需配置web_accessible_resources——该配置是给页面脚本（而非扩展自身的content脚本）使用的，content脚本内部资源直接通过相对路径访问即可。

3. 修复dynamic import失效问题
   若确实需要动态导入，确保content_scripts的type为module，并使用async/await处理Promise：

   // main.js中动态导入
   const { WebSocket } = await import('./dist/websocket-async.esm.js');
   

二、WebSocket对象传递到主线程（或扩展其他上下文） #

WebSocket对象无法直接跨上下文序列化传递，根据需求选择对应方案：

场景1：在content脚本主线程使用WebSocket #

直接在main.js中导入并创建实例即可，无需额外传递：

import { WebSocket } from './dist/websocket-async.esm.js';

const ws = new WebSocket('wss://your-server-url');
// 后续直接操作ws实例

场景2：与扩展后台Service Worker通信 #

不要传递WebSocket对象，通过消息通信传递数据：

1. 在content脚本中创建WebSocket实例，监听消息后发送给后台：

   // main.js
   import { WebSocket } from './dist/websocket-async.esm.js';
   const ws = new WebSocket('wss://your-server-url');
   ws.onmessage = (event) => {
       chrome.runtime.sendMessage({ type: 'WS_MESSAGE', data: event.data });
   };
   

2. 在后台service-worker.js中监听消息并处理：

   // service-worker.js
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
       if (message.type === 'WS_MESSAGE') {
           console.log('Received from WebSocket:', message.data);
           // 执行后续逻辑
       }
   });
   

   若需从后台向WebSocket发送数据，同样通过消息通知content脚本执行发送操作。

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