Google chrome extension 在chrome扩展中实现websocket

我正在chrome扩展中实现WebSocket

我在background.js中编写了代码

var websocket;
function createWebSocketConnection() {

    if('WebSocket' in window){
        websocket = new WebSocket(host);
        console.log("======== websocket ===========", websocket);

        websocket.onopen = function() {
            websocket.send("Hello");
        };

        websocket.onmessage = function (event) {
            var received_msg = JSON.parse(event.data);
            var notificationOptions = {
                type: "basic",
                title: received_msg.title,
                message: received_msg.message,
                iconUrl: "extension-icon.png"
            }
            chrome.notifications.create("", notificationOptions);
        };

        websocket.onclose = function() { alert("==== web socket closed 
======"); };
}

当我打开弹出屏幕（index.html）时，将调用方法

createWebSocketConnection（）

，该方法将创建WebSocket连接

但是，一旦弹出窗口关闭，服务器控制台上就会打印一条消息“Web套接字已关闭”

我有以下问题-

我应该在content.js中建立WebSocket连接吗

是否每个打开的网页都有不同的WebSocket

有没有办法将WebSocket对象保存在background.js中

在chrome扩展中实现web套接字的最佳实践是什么

---

提前感谢！

这取决于你想要实现目标的内容和方式

如果每个扩展都有一个持久的

WebSocket

，这是最可能的情况，那么在后台脚本中创建它。然后，您可以使用将消息中继到弹出窗口/内容

如果您需要从内容/弹出页面直接与服务器对话，请在那里创建。当内容页面或弹出页面关闭时，您的

WebSocket也将关闭。
万岁

我通过修改
manifest.json

{
...
  "background": {
    ...
    "persistent": true
  },
...
}

我在
background.js
中实现了WebSocket

代码如下：

function createWebSocketConnection() {
    if('WebSocket' in window){
        chrome.storage.local.get("instance", function(data) {
            connect('wss://' + data.instance + '/ws/demoPushNotifications');
        });
    }
}

//Make a websocket connection with the server.
function connect(host) {
    if (websocket === undefined) {
        websocket = new WebSocket(host);
    }

    websocket.onopen = function() {
        chrome.storage.local.get(["username"], function(data) {
            websocket.send(JSON.stringify({userLoginId: data.username}));
        });
    };

    websocket.onmessage = function (event) {
        var received_msg = JSON.parse(event.data);
        var demoNotificationOptions = {
            type: "basic",
            title: received_msg.subject,
            message: received_msg.message,
            iconUrl: "images/demo-icon.png"
        }
        chrome.notifications.create("", demoNotificationOptions);
        updateToolbarBadge();
    };

    //If the websocket is closed but the session is still active, create new connection again
    websocket.onclose = function() {
        websocket = undefined;
        chrome.storage.local.get(['demo_session'], function(data) {
            if (data.demo_session) {
                createWebSocketConnection();
            }
        });
    };
}

//Close the websocket connection
function closeWebSocketConnection(username) {
    if (websocket != null || websocket != undefined) {
        websocket.close();
        websocket = undefined;
    }
}

web套接字将被关闭，因为popup有自己的上下文，每次打开popup时，它都会创建新对象，关闭popup时，状态将被删除，您需要在后台脚本中执行此逻辑！因为上面的开发人员提供了一些代码片段！
谢谢您的回复。我想要一个连接pr扩展。但问题是，每当我打开弹出窗口，然后它一次又一次地创建一个新的WebSocket连接。也就是说，当我打开弹出窗口时，旧的WebSocket对象将丢失，并建立一个新的连接。我不想每次打开弹出窗口时都创建新的连接。好了，没有办法了。弹出窗口关闭时，弹出窗口将被丢弃，因此我相信在内容脚本中，如果第三方cookie被阻止，它将不起作用，而在后台脚本中，它会起作用。有一个相同的问题！你找到了一些解决方案吗？在这个例子中，你能不使用ssl连接到主机吗？你得到了你的4个问题的答案吗？这些问题真的很难回答但不幸的是，还没有人回答这些问题。什么是“持续的：真的？”“实现？什么是持久性？@Notflip保持后台脚本持续活动的唯一情况是扩展使用chrome.webRequest API阻止或修改网络请求。WebRequestAPI与非持久性后台页面不兼容。您好@pallavi，从答案来看，扩展似乎是关于带徽章计数的实时通知。实际上，我为收件箱的未读邮件数实现了这种扩展。你能告诉我你的分机号码吗。这样我就可以在分机上制作下一个视频流来播放直播徽章了。你能给我发送分机名吗。这样我就可以检查它的流量了？这对我很有帮助。我仍然在寻找使用真实web套接字的引用扩展。请帮助meSorry@mayurkukadiya，但该扩展是为组织内部使用而开发的。但是我很乐意帮助你。谢谢你回复我。您使用了哪个版本的清单？我使用的是清单版本v3，服务工作者脚本中不支持窗口对象。@mayurkukadiya，我使用的是“清单版本”：2