如何在Chrome扩展中实现WebSocket？解决权限报错问题

1. 修正manifest.json的权限配置 #

Chrome扩展中不存在webSocket这个权限，你需要添加的是目标WebSocket服务器的主机权限，也就是允许扩展访问该WebSocket地址的权限。修改后的manifest.json权限部分如下：

"permissions": ["webRequest", "storage", "cookies", "wss://example.com/*"],

说明：wss://example.com/*是匹配该域名下所有WebSocket连接的规则，如果你的WebSocket地址有特定路径，可以写得更精确，比如wss://example.com/ws/*。

2. 修正background.js的发送时机 #

你当前的代码在创建WebSocket后立即调用socket.send()，这时候连接还没建立完成（WebSocket是异步建立的），会导致发送失败。必须把发送逻辑放到onopen回调里，确保连接建立后再发送消息：

var socket = new WebSocket("wss://example.com");

socket.onopen = function () {
  console.log("WebSocket connection established.");
  // 连接建立后再发送消息
  socket.send("Hello, server!");
};

socket.onmessage = function (event) {
  console.log("Received message:", event.data);
};

socket.onclose = function (event) {
  console.log(
    "WebSocket connection closed with code:",
    event.code,
    "reason:",
    event.reason
  );
};

// 额外添加错误处理，方便排查问题
socket.onerror = function(error) {
  console.error("WebSocket error:", error);
};

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