add popup.js and background

2026-09-25 12:41:53 +08:00 · 2024-03-20 09:35:46 +08:00
parent 76972971a4
commit ac483f9eb7
3 changed files with 74 additions and 4 deletions
@@ -1 +1,54 @@
-console.log("Service Worker Is Running!")
+let socket;
+const connectWebsocket = url => {
+    disconnectWebsocket()
+    socket = new WebSocket(url);
+    socket.onopen = () => {
+        chrome.runtime.sendMessage({status: "connected"})
+    }
+    socket.onclose = () => {
+        chrome.runtime.sendMessage({status: "disconnected"})
+    }
+}
+
+const disconnectWebsocket = () => {
+    if (socket) {
+        try {
+            socket.close()
+            socket = null;
+        } catch(e) {
+
+        }
+    }
+}
+
+heartbeat = () => {
+    if (socket) {
+        if (socket.readyState === WebSocket.OPEN) {
+            try {
+                socket.send(JSON.stringify({
+                    "type": "heartbeat",
+                }))
+            } catch(e) {
+                console.error("Error sending heartbeat:", e);
+            }
+        } else {
+            disconnectWebsocket()
+        }
+    }
+}
+heartbeat()
+setInterval(heartbeat, 3000)
+
+console.info("Chrome Extenstion Background is loaded")
+chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
+    if (msg.action === "connectWebsocket") {
+        console.info("Start to connect websocket")
+        connectWebsocket(msg.url)
+    } else if (msg.action === "init") {
+        if (socket) {
+            chrome.runtime.sendMessage({status: "connected"})
+        } else {
+            chrome.runtime.sendMessage({status: "initialized"})
+        }
+    }
+})
@@ -1,10 +1,13 @@
+<!-- popup.html -->
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Popup</title>
+    <title>WebSocket Connector</title>
 </head>
 <body>
-  <h1>My Chrome Extension</h1>
-  <p>This is a sample popup.</p>
+    <p id="wsStatus"></p>
+    <input type="text" id="wsUrl" placeholder="Enter WebSocket URL">
+    <button id="connectBtn">Connect WebSocket</button>
+    <script src="popup.js"></script>
 </body>
 </html>
@@ -0,0 +1,14 @@
+document.getElementById('connectBtn').addEventListener('click', () => {
+    let wsUrl = document.getElementById('wsUrl').value;
+    if (!wsUrl) {
+        wsUrl = 'ws://127.0.0.1:8881/?token=a'
+    }
+    const msg = {
+        action: "connectWebsocket", url: wsUrl,
+    };
+    chrome.runtime.sendMessage(msg)
+})
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+    document.getElementById("wsStatus").innerText = msg.status;
+});