cdp-tunnel 2.7.9 → 2.8.0

package/extension-new/config-page.js

@@ -1,12 +1,12 @@
 (function() {
   var state = {
     connected: false,
-    serverAddress: 'ws://localhost:9221/plugin',
     cdpClients: [],
     attachedPages: [],
     logs: [],
     startTime: Date.now(),
-    cdpCommandCount: 0
+    cdpCommandCount: 0,
+    connectionStatuses: {}
   };
 
   var elements = {
@@ -21,10 +21,14 @@
     clientList: document.getElementById('clientList'),
     pageList: document.getElementById('pageList'),
     activityLog: document.getElementById('activityLog'),
-    serverAddress: document.getElementById('serverAddress'),
-    connectBtn: document.getElementById('connectBtn'),
     refreshBtn: document.getElementById('refreshBtn'),
-    toast: document.getElementById('toast')
+    toast: document.getElementById('toast'),
+    connConfigList: document.getElementById('connConfigList'),
+    newConnTag: document.getElementById('newConnTag'),
+    newConnUrl: document.getElementById('newConnUrl'),
+    addConnBtn: document.getElementById('addConnBtn'),
+    autoMuteToggle: document.getElementById('autoMuteToggle'),
+    pluginIdDisplay: document.getElementById('pluginIdDisplay')
   };
 
   function showToast(message, type) {
@@ -53,7 +57,7 @@
     elements.activeConnections.textContent = state.cdpClients.length;
     elements.controlledPages.textContent = state.attachedPages.length;
     elements.cdpCommands.textContent = state.cdpCommandCount;
-    
+
     var elapsed = Math.floor((Date.now() - state.startTime) / 1000);
     if (elapsed < 60) {
       elements.uptime.textContent = elapsed + 's';
@@ -62,14 +66,51 @@
     } else {
       elements.uptime.textContent = Math.floor(elapsed / 3600) + 'h ' + Math.floor((elapsed % 3600) / 60) + 'm';
     }
-    
+
     elements.clientCount.textContent = state.cdpClients.length + ' 个';
     elements.pageCount.textContent = state.attachedPages.length + ' 个';
   }
 
+  function getStatusClass(connId, enabled) {
+    if (!enabled) return 'disabled';
+    var s = state.connectionStatuses[connId];
+    if (s === 'connected') return 'connected';
+    if (s === 'error') return 'error';
+    return 'disabled';
+  }
+
+  function renderConnections(connections) {
+    if (!connections || connections.length === 0) {
+      elements.connConfigList.innerHTML =
+        '<div class="empty-state">' +
+          '<div class="icon">🔗</div>' +
+          '<div class="title">暂无连接配置</div>' +
+          '<div class="desc">在下方添加一个 WebSocket 连接</div>' +
+        '</div>';
+      return;
+    }
+
+    var html = '';
+    connections.forEach(function(conn) {
+      var statusClass = getStatusClass(conn.id, conn.enabled);
+      var isActive = conn.enabled && statusClass === 'connected';
+      html +=
+        '<div class="conn-config-item' + (isActive ? ' active' : '') + '" data-id="' + conn.id + '">' +
+          '<input type="checkbox" class="conn-toggle" data-id="' + conn.id + '"' + (conn.enabled ? ' checked' : '') + ' title="启用/禁用">' +
+          '<span class="status-dot ' + statusClass + '" title="' + statusClass + '"></span>' +
+          '<div class="conn-config-info">' +
+            '<div class="conn-config-tag">' + escapeHtml(conn.tag) + '</div>' +
+            '<div class="conn-config-url" title="' + escapeAttr(conn.url) + '">' + escapeHtml(conn.url) + '</div>' +
+          '</div>' +
+          '<button class="btn-delete" data-id="' + conn.id + '" title="删除">删除</button>' +
+        '</div>';
+    });
+    elements.connConfigList.innerHTML = html;
+  }
+
   function renderClients() {
     if (state.cdpClients.length === 0) {
-      elements.clientList.innerHTML = 
+      elements.clientList.innerHTML =
         '<div class="empty-state">' +
           '<div class="icon">🔌</div>' +
           '<div class="title">暂无客户端</div>' +
@@ -83,8 +124,8 @@
       var clientId = client.id || '';
       var shortId = clientId.length > 25 ? clientId.substring(0, 25) + '...' : clientId;
       var connectedAt = client.connectedAt ? new Date(client.connectedAt).toLocaleTimeString() : 'N/A';
-      
-      html += 
+
+      html +=
         '<div class="connection-item active">' +
           '<div class="status-indicator online"></div>' +
           '<div class="connection-info">' +
@@ -93,8 +134,8 @@
               '<span class="connection-tag playwright">CDP</span>' +
             '</div>' +
             '<div class="connection-details">' +
-              '<span>🔗 Playwright/Puppeteer</span>' +
-              '<span>⏰ ' + connectedAt + '</span>' +
+              '<span>Playwright/Puppeteer</span>' +
+              '<span>' + connectedAt + '</span>' +
             '</div>' +
           '</div>' +
         '</div>';
@@ -104,7 +145,7 @@
 
   function renderPages() {
     if (state.attachedPages.length === 0) {
-      elements.pageList.innerHTML = 
+      elements.pageList.innerHTML =
         '<div class="empty-state">' +
           '<div class="icon">📄</div>' +
           '<div class="title">暂无页面</div>' +
@@ -118,8 +159,8 @@
       var pageUrl = page.url || '';
       var displayUrl = pageUrl.length > 35 ? pageUrl.substring(0, 35) + '...' : pageUrl;
       var pageTitle = page.title || 'Untitled';
-      
-      html += 
+
+      html +=
         '<div class="connection-item active">' +
           '<div class="status-indicator online"></div>' +
           '<div class="connection-info">' +
@@ -141,7 +182,7 @@
 
   function renderLogs() {
     if (state.logs.length === 0) {
-      elements.activityLog.innerHTML = 
+      elements.activityLog.innerHTML =
         '<div class="empty-state">' +
           '<div class="icon">📋</div>' +
           '<div class="title">暂无日志</div>' +
@@ -152,7 +193,7 @@
 
     var html = '';
     state.logs.slice(0, 20).forEach(function(log) {
-      html += 
+      html +=
         '<div class="log-item">' +
           '<div class="log-icon ' + log.type + '">' + log.icon + '</div>' +
           '<div class="log-content">' +
@@ -171,14 +212,14 @@
       action: '⚡',
       page: '📄'
     };
-    
+
     state.logs.unshift({
       type: type,
       icon: icons[type] || '•',
       message: message,
       time: new Date().toLocaleTimeString()
     });
-    
+
     renderLogs();
   }
 
@@ -189,10 +230,8 @@
           chrome.runtime.sendMessage({ type: 'getState' }, function(response) {
             if (response) {
               state.connected = response.connected || false;
-              state.serverAddress = response.serverAddress || state.serverAddress;
               state.cdpClients = response.cdpClients || [];
               state.attachedPages = response.attachedPages || [];
-              elements.serverAddress.value = state.serverAddress;
               updateStatus(state.connected);
               updateStats();
               renderClients();
@@ -207,7 +246,7 @@
       } catch (e) {
         console.error('[Config] Failed to fetch state:', e);
       }
-      
+
       updateStatus(false);
       updateStats();
       renderClients();
@@ -216,73 +255,131 @@
     });
   }
 
-  function saveAndConnect() {
-    var address = elements.serverAddress.value.trim();
-    
-    if (!address) {
-      showToast('请输入服务器地址', 'error');
-      return;
-    }
-    
-    state.serverAddress = address;
-    
-    if (typeof chrome !== 'undefined' && chrome.storage) {
-      chrome.storage.local.set({ wsAddress: address });
-    }
-    
+  function loadConnectionStatuses() {
     if (typeof chrome !== 'undefined' && chrome.runtime) {
-      try {
-        chrome.runtime.sendMessage({ 
-          type: 'connect',
-          serverAddress: address 
-        });
-        showToast('正在连接...');
-      } catch (e) {
-        showToast('连接请求发送失败', 'error');
-      }
+      chrome.runtime.sendMessage({ type: 'get-connection-statuses' }, function(response) {
+        if (response && response.statuses) {
+          state.connectionStatuses = response.statuses;
+        }
+        loadAndRenderConnections();
+      });
     } else {
-      showToast('请在扩展环境中使用', 'error');
+      loadAndRenderConnections();
     }
   }
 
-  function refresh() {
-    fetchState();
-    showToast('已刷新');
+  function loadAndRenderConnections() {
+    if (typeof Config !== 'undefined' && Config.getConnections) {
+      Config.getConnections(function(connections) {
+        renderConnections(connections);
+      });
+    }
+  }
+
+  function escapeHtml(s) {
+    return (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function escapeAttr(s) {
+    return (s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 
   function init() {
     if (typeof chrome !== 'undefined' && chrome.storage) {
-      chrome.storage.local.get('wsAddress', function(result) {
-        if (result.wsAddress) {
-          state.serverAddress = result.wsAddress;
-          elements.serverAddress.value = result.wsAddress;
-        }
-      });
       chrome.storage.local.get(['autoMute'], function(result) {
-        document.getElementById('autoMuteToggle').checked = result.autoMute !== false;
+        elements.autoMuteToggle.checked = result.autoMute !== false;
+      });
+
+      Config.getPluginId(function(id) {
+        elements.pluginIdDisplay.textContent = id || '-';
       });
     }
-    
-    document.getElementById('autoMuteToggle').addEventListener('change', function(e) {
-      chrome.storage.local.set({ autoMute: e.target.checked });
-      addLog(e.target.checked ? '🔇 自动静音已开启' : '🔊 自动静音已关闭', 'action');
+
+    elements.autoMuteToggle.addEventListener('change', function(e) {
+      if (typeof Config !== 'undefined') {
+        Config.setAutoMute(e.target.checked);
+      }
+      addLog('action', e.target.checked ? '自动静音已开启' : '自动静音已关闭');
     });
 
     var versionBadge = document.getElementById('versionBadge');
-    if (versionBadge) {
+    if (versionBadge && typeof chrome !== 'undefined' && chrome.runtime) {
       var manifest = chrome.runtime.getManifest();
       versionBadge.textContent = 'v' + manifest.version;
     }
-    
+
+    loadConnectionStatuses();
     fetchState();
-    
-    setInterval(fetchState, 5000);
+
+    setInterval(function() {
+      fetchState();
+      loadConnectionStatuses();
+    }, 5000);
     setInterval(updateStats, 1000);
   }
 
-  elements.connectBtn.addEventListener('click', saveAndConnect);
-  elements.refreshBtn.addEventListener('click', refresh);
-  
+  elements.addConnBtn.addEventListener('click', function() {
+    var tag = elements.newConnTag.value.trim();
+    var url = elements.newConnUrl.value.trim();
+
+    if (!tag) {
+      showToast('请输入连接名称', 'error');
+      return;
+    }
+    if (!url) {
+      showToast('请输入 WebSocket 地址', 'error');
+      return;
+    }
+
+    if (typeof chrome !== 'undefined' && chrome.runtime) {
+      chrome.runtime.sendMessage({ type: 'add-connection', tag: tag, url: url }, function() {
+        elements.newConnTag.value = '';
+        elements.newConnUrl.value = '';
+        loadAndRenderConnections();
+        showToast('连接已添加');
+      });
+    } else if (typeof Config !== 'undefined') {
+      Config.addConnection({ tag: tag, url: url }, function() {
+        elements.newConnTag.value = '';
+        elements.newConnUrl.value = '';
+        loadAndRenderConnections();
+        showToast('连接已添加');
+      });
+    }
+  });
+
+  elements.connConfigList.addEventListener('click', function(e) {
+    var toggleEl = e.target.closest('.conn-toggle');
+    if (toggleEl) {
+      var connId = toggleEl.dataset.id;
+      var enabled = toggleEl.checked;
+      if (typeof chrome !== 'undefined' && chrome.runtime) {
+        chrome.runtime.sendMessage({ type: 'toggle-connection', connectionId: connId, enabled: enabled }, function() {
+          loadAndRenderConnections();
+          showToast(enabled ? '连接已启用' : '连接已禁用');
+        });
+      }
+      return;
+    }
+
+    var deleteBtn = e.target.closest('.btn-delete');
+    if (deleteBtn) {
+      var deleteId = deleteBtn.dataset.id;
+      if (typeof chrome !== 'undefined' && chrome.runtime) {
+        chrome.runtime.sendMessage({ type: 'remove-connection', connectionId: deleteId }, function() {
+          loadAndRenderConnections();
+          showToast('连接已删除');
+        });
+      }
+    }
+  });
+
+  elements.refreshBtn.addEventListener('click', function() {
+    fetchState();
+    loadConnectionStatuses();
+    showToast('已刷新');
+  });
+
   elements.pageList.addEventListener('click', function(e) {
     var btn = e.target.closest('.action-btn');
     if (btn) {
@@ -299,7 +396,7 @@
   });
 
   if (typeof chrome !== 'undefined' && chrome.runtime) {
-    chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+    chrome.runtime.onMessage.addListener(function(message) {
       if (message.type === 'stateUpdate') {
         var wasConnected = state.connected;
         state.connected = message.connected;
@@ -309,13 +406,13 @@
         updateStats();
         renderClients();
         renderPages();
-        
+
         if (state.connected && !wasConnected) {
           addLog('connect', '已连接到服务器');
         } else if (!state.connected && wasConnected) {
           addLog('disconnect', '已断开连接');
         }
-        
+
         if (state.cdpClients.length > 0) {
           addLog('connect', state.cdpClients.length + ' 个 CDP 客户端在线');
         }
@@ -324,6 +421,8 @@
         }
       } else if (message.type === 'log') {
         addLog(message.logType, message.message);
+      } else if (message.type === 'connections-updated') {
+        loadAndRenderConnections();
       }
     });
   }

package/extension-new/core/connection-manager.js

@@ -0,0 +1,120 @@
+var ConnectionManager = (function() {
+  var _connections = new Map();
+
+  function init(connectionConfigs) {
+    var enabled = (connectionConfigs || []).filter(function(c) { return c.enabled; });
+    if (enabled.length === 0) {
+      enabled.push({
+        id: 'conn_default',
+        tag: 'default',
+        url: Config.WS_URL,
+        enabled: true
+      });
+    }
+    enabled.forEach(function(config) {
+      addConnection(config);
+    });
+  }
+
+  function addConnection(config) {
+    if (!config || !config.id) return;
+    if (_connections.has(config.id)) {
+      Logger.warn('[CM] Connection already exists:', config.id);
+      return;
+    }
+
+    var state = new ConnectionState(config.id);
+    var wsManager = new WebSocketConnection(config.id, state, config);
+
+    _connections.set(config.id, {
+      id: config.id,
+      config: config,
+      state: state,
+      wsManager: wsManager
+    });
+
+    Logger.info('[CM] Added connection:', config.id, config.url);
+    return wsManager;
+  }
+
+  function removeConnection(connectionId) {
+    var entry = _connections.get(connectionId);
+    if (!entry) return;
+
+    entry.state.clearReconnectTimer();
+    if (entry.state.ws) {
+      try { entry.state.ws.close(); } catch(e) {}
+    }
+    entry.state.clearAllState();
+    _connections.delete(connectionId);
+    Logger.info('[CM] Removed connection:', connectionId);
+  }
+
+  function getConnection(connectionId) {
+    return _connections.get(connectionId);
+  }
+
+  function getConnectionByTabId(tabId) {
+    var result = null;
+    _connections.forEach(function(entry) {
+      if (entry.state.isTabAttached(tabId) || entry.state.tabIdToClientId.has(tabId)) {
+        result = entry;
+      }
+    });
+    return result;
+  }
+
+  function getConnectionBySessionId(sessionId) {
+    var result = null;
+    _connections.forEach(function(entry) {
+      if (entry.state.sessionIdToTabId.has(sessionId)) {
+        result = entry;
+      }
+    });
+    return result;
+  }
+
+  function getAllConnections() {
+    return Array.from(_connections.values());
+  }
+
+  function forEachConnection(callback) {
+    _connections.forEach(function(entry, id) {
+      callback(entry, id);
+    });
+  }
+
+  function getPrimaryConnection() {
+    var first = _connections.values().next();
+    return first.done ? null : first.value;
+  }
+
+  function connectAll() {
+    _connections.forEach(function(entry) {
+      entry.wsManager.connect();
+    });
+  }
+
+  function disconnectAll() {
+    _connections.forEach(function(entry) {
+      if (entry.state.ws) {
+        try { entry.state.ws.close(); } catch(e) {}
+      }
+      entry.state.clearReconnectTimer();
+    });
+  }
+
+  return {
+    init: init,
+    addConnection: addConnection,
+    removeConnection: removeConnection,
+    getConnection: getConnection,
+    getConnectionByTabId: getConnectionByTabId,
+    getConnectionBySessionId: getConnectionBySessionId,
+    getAllConnections: getAllConnections,
+    forEachConnection: forEachConnection,
+    getPrimaryConnection: getPrimaryConnection,
+    connectAll: connectAll,
+    disconnectAll: disconnectAll
+  };
+})();