Firefox中Manifest v2内容脚本无法建立WebSocket连接问题

问题根源 #

Firefox对Manifest v2内容脚本的WebSocket连接有特殊安全限制，即便配置了<all_urls>权限，内容脚本的WebSocket仍可能因上下文隔离或跨域检查触发1006关闭码。

解决方法 #

1. 通过Background Script中转WebSocket连接（推荐方案）

利用Background Script不受内容脚本隔离限制的特性，让Background负责建立WebSocket连接，内容脚本通过扩展消息系统与Background通信：

Background.js 代码

let wsConnection;

// 监听内容脚本消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 初始化WebSocket
  if (message.type === 'initWs') {
    if (!wsConnection || wsConnection.readyState === WebSocket.CLOSED) {
      wsConnection = new WebSocket('wss://my.website.com/ws/');
      
      wsConnection.onmessage = (event) => {
        chrome.tabs.sendMessage(sender.tab.id, {
          type: 'wsMessage',
          data: event.data
        });
      };

      wsConnection.onerror = (error) => {
        chrome.tabs.sendMessage(sender.tab.id, {
          type: 'wsError',
          error: error.message || '未知错误'
        });
      };

      wsConnection.onclose = (event) => {
        chrome.tabs.sendMessage(sender.tab.id, {
          type: 'wsClose',
          code: event.code,
          reason: event.reason
        });
      };
    }
    sendResponse({ status: 'WebSocket连接初始化完成' });
    return true;
  }

  // 转发消息到服务器
  if (message.type === 'sendWsMsg' && wsConnection?.readyState === WebSocket.OPEN) {
    wsConnection.send(message.payload);
  }
});

内容脚本代码

// 初始化WebSocket连接
chrome.runtime.sendMessage({ type: 'initWs' }, (response) => {
  console.log(response.status);
});

// 接收Background转发的消息
chrome.runtime.onMessage.addListener((message) => {
  switch (message.type) {
    case 'wsMessage':
      console.log('收到服务器消息:', message.data);
      break;
    case 'wsError':
      console.error('WebSocket错误:', message.error);
      break;
    case 'wsClose':
      console.log('WebSocket关闭:', message.code, message.reason);
      break;
  }
});

// 封装发送消息方法
function sendToServer(payload) {
  chrome.runtime.sendMessage({
    type: 'sendWsMsg',
    payload: payload
  });
}

2. 调整内容脚本上下文配置

Firefox Manifest v2默认将内容脚本隔离在独立上下文，可通过配置让内容脚本运行在页面主上下文（注意：此方法存在安全风险，需评估后使用）：

在manifest.json中修改内容脚本配置：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
  }
],
"content_script_options": {
  "world": "MAIN"
}

3. 检查服务器CORS响应头

确保WebSocket服务器返回的响应头包含跨域允许配置：

Access-Control-Allow-Origin: *

若需更严格控制，可针对Firefox扩展ID（在about:debugging页面查看）设置具体源。

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