wip extension

browser-ext/popup/popup.js

@@ -0,0 +1,95 @@
+/**
+ * Popup Script
+ * 
+ * Handles extension popup UI and connection management.
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  const statusIndicator = document.getElementById('status-indicator');
+  const statusText = document.getElementById('status-text');
+  const connectBtn = document.getElementById('connect-btn');
+  const disconnectBtn = document.getElementById('disconnect-btn');
+  const urlInput = document.getElementById('proxy-url');
+
+  // Load saved config
+  chrome.storage.local.get(['proxyUrl'], (data) => {
+    if (data.proxyUrl) urlInput.value = data.proxyUrl;
+  });
+
+  // Get current status from background
+  chrome.runtime.sendMessage({ type: 'get-status' }, (response) => {
+    if (response && response.status) {
+      updateStatusUI(response.status);
+    }
+  });
+
+  // Listen for status changes
+  chrome.runtime.onMessage.addListener((message) => {
+    if (message.type === 'status-changed') {
+      updateStatusUI(message.status);
+    }
+  });
+
+  // Connect button
+  connectBtn.addEventListener('click', () => {
+    const url = urlInput.value.trim() || 'ws://localhost:4712';
+
+    // Save config
+    chrome.storage.local.set({ proxyUrl: url });
+
+    // Update UI immediately
+    updateStatusUI('connecting');
+
+    // Connect
+    chrome.runtime.sendMessage({ type: 'connect', url }, (response) => {
+      if (response && response.status) {
+        updateStatusUI(response.status);
+      }
+    });
+  });
+
+  // Disconnect button
+  disconnectBtn.addEventListener('click', () => {
+    chrome.runtime.sendMessage({ type: 'disconnect' }, (response) => {
+      if (response && response.status) {
+        updateStatusUI(response.status);
+      }
+    });
+  });
+
+  /**
+   * Update the UI to reflect current status
+   */
+  function updateStatusUI(status) {
+    // Update text
+    const statusNames = {
+      disconnected: 'Disconnected',
+      connecting: 'Connecting...',
+      connected: 'Connected',
+      paused: 'Paused',
+      running: 'Running',
+      error: 'Error',
+    };
+    statusText.textContent = statusNames[status] || status;
+
+    // Update indicator color
+    statusIndicator.className = 'status-indicator status-' + status;
+
+    // Update button states
+    const isConnected = ['connected', 'paused', 'running'].includes(status);
+    const isConnecting = status === 'connecting';
+
+    connectBtn.disabled = isConnected || isConnecting;
+    disconnectBtn.disabled = !isConnected;
+
+    // Update connect button text
+    if (isConnecting) {
+      connectBtn.textContent = 'Connecting...';
+    } else {
+      connectBtn.textContent = 'Connect';
+    }
+
+    // Disable inputs when connected
+    urlInput.disabled = isConnected || isConnecting;
+  }
+});