Chrome Manifest V3扩展WebSocket连接调试器报403错误求助

我正在开发Chrome Manifest V3版本的扩展程序，需要在Service Worker与Chrome调试器之间建立WebSocket连接，以便通过Puppeteer控制页面。

代码实现 #

const browserDebugger = await (
  await fetch('http://localhost:9223/json/version', { mode: "no-cors" })
).json();
const debuggerURL = browserDebugger.webSocketDebuggerUrl;
const chromeWebsocket = new WebSocket(debuggerURL);

错误信息 #

WebSocket connection to 'ws://localhost:9223/devtools/browser/2cd7eac1-a1e0-41ed-9eac-8ba8d0befc9e' failed: Error during WebSocket handshake: Unexpected response code: 403

当前manifest.json配置 #

{
  "manifest_version": 3,
  ....
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; connect-src http://localhost:9223/ ws://localhost:9223/ http://localhost:4821/ ws://localhost:4821/"
  },
  "host_permissions": [
    "http://*/*",
    "https://*/*",
    "http://localhost:4821/",
    "http://localhost:9223/"
  ],
  "permissions": [
    "debugger",
    "tabs",
  ]
}

问题原因及修复方案 #

1. 错误的CORS模式导致数据解析异常
   你在fetch中使用了mode: "no-cors"，这会让返回的响应变为opaque类型，无法正常解析JSON。即便你看似拿到了webSocketDebuggerUrl，实际可能是缓存的无效数据或解析失败后的异常值，最终导致WebSocket连接的URL验证失败。
   修复：直接移除mode: "no-cors"选项，扩展已配置host_permissions，无需该模式：

   const browserDebugger = await (
     await fetch('http://localhost:9223/json/version')
   ).json();
   

2. 缺失WebSocket协议的主机权限
   host_permissions中仅添加了http://localhost:9223/，但WebSocket连接使用的是ws://协议，需要明确添加该协议的权限。
   修复：更新host_permissions：

   "host_permissions": [
     "http://*/*",
     "https://*/*",
     "http://localhost:4821/",
     "ws://localhost:4821/",
     "http://localhost:9223/",
     "ws://localhost:9223/"
   ]
   

3. Chrome启动参数未允许扩展连接
   Chrome默认会拒绝非信任来源的远程调试连接，需要启动时明确允许你的扩展ID访问。
   修复：启动Chrome时添加以下参数（替换<你的扩展ID>为实际ID，可在扩展管理页开发者模式下查看）：

   chrome.exe --remote-debugging-port=9223 --remote-allow-origins=chrome-extension://<你的扩展ID>
   

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