Update extension to use single websocket and like 100 other things

extension/background.js

@@ -1,5 +1,82 @@
 console.log("Background script loaded");
 
+class WebSocketClient {
+  constructor() {
+    console.log("WebSocketClient constructor called");
+    this.messageQueue = [];
+    this.connect();
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+  }
+
+  connect() {
+    console.log('Attempting to connect to WebSocket server...');
+    try {
+      this.ws = new WebSocket('ws://localhost:8523/ws');
+      console.log('WebSocket instance created');
+
+      this.ws.addEventListener('open', () => {
+        console.log('WebSocket connection opened successfully');
+        this.reconnectAttempts = 0;
+        this.processQueue();
+      });
+
+      this.ws.addEventListener('error', (event) => {
+        console.error('WebSocket error occurred:', event);
+      });
+
+      this.ws.addEventListener('close', (event) => {
+        console.log('WebSocket connection closed:', event.code, event.reason);
+        this.tryReconnect();
+      });
+
+      this.ws.addEventListener('message', (event) => {
+        console.log('Received message from server:', event.data);
+      });
+    } catch (error) {
+      console.error('Error creating WebSocket:', error);
+    }
+  }
+
+  processQueue() {
+    console.log(`Processing message queue (${this.messageQueue.length} messages)`);
+    while (this.messageQueue.length > 0) {
+      const data = this.messageQueue.shift();
+      this.sendMessage(data);
+    }
+  }
+
+  tryReconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`);
+      setTimeout(() => this.connect(), 2000 * this.reconnectAttempts);
+    } else {
+      console.log('Max reconnection attempts reached');
+    }
+  }
+
+  sendMessage(data) {
+    if (this.ws.readyState === WebSocket.OPEN) {
+      try {
+        console.log('Sending data for URL:', data.url);
+        this.ws.send(JSON.stringify(data));
+        console.log('Data sent successfully');
+        return true;
+      } catch (error) {
+        console.error('Error sending data:', error);
+        return false;
+      }
+    } else {
+      console.log('WebSocket not ready, queueing message');
+      this.messageQueue.push(data);
+      return true;
+    }
+  }
+}
+
+const wsClient = new WebSocketClient();
+
 async function isContentScriptReady(tabId) {
   try {
     await browser.tabs.sendMessage(tabId, { type: "PING" });
@@ -38,9 +115,17 @@ async function sendMessageToTab(tabId) {
   }
 }
 
+// Listen for messages from content scripts
+browser.runtime.onMessage.addListener((message, sender) => {
+  if (message.type === "SEND_PAGE_CONTENT") {
+    console.log('Received page content from tab:', sender.tab.id);
+    wsClient.sendMessage(message.data);
+  }
+});
+
 browser.webNavigation.onCompleted.addListener(async (details) => {
   console.log("Navigation completed", details);
-  if (details.frameId === 0) { // Only handle main frame navigation
+  if (details.frameId === 0) {
     console.log(`Main frame navigation detected for tab ${details.tabId}`);
     await sendMessageToTab(details.tabId);
   }