cdp-tunnel 2.8.2 → 2.8.4

package/extension-new/background.js

@@ -341,7 +341,7 @@ importScripts('features/automation-badge.js');
   chrome.runtime.onInstalled.addListener(function(details) {
     Logger.info('[Runtime] Extension installed/updated:', details.reason);
     State.persist(null, false);
-    setBadgeStatus('ON');
+    setBadgeStatus('OFF');
     init();
   });
 
@@ -453,21 +453,22 @@ importScripts('features/automation-badge.js');
       sendResponse({ success: true });
     } else if (message.type === 'get-connection-statuses') {
       Config.getConnections(function(connections) {
-        var statuses = {};
-        (connections || []).forEach(function(conn) {
-          if (!conn.enabled) {
-            statuses[conn.id] = 'disabled';
-          } else {
+        var list = (connections || []).map(function(conn) {
+          var status = 'disabled';
+          var attachedCount = 0;
+          if (conn.enabled) {
             var entry = ConnectionManager.getConnection(conn.id);
             if (entry) {
               var ws = entry.state.getWs();
-              statuses[conn.id] = (ws && ws.readyState === WebSocket.OPEN) ? 'connected' : 'error';
+              status = (ws && ws.readyState === WebSocket.OPEN) ? 'connected' : 'error';
+              attachedCount = entry.state.getAttachedTabIds().length;
             } else {
-              statuses[conn.id] = 'error';
+              status = 'error';
             }
           }
+          return { id: conn.id, tag: conn.tag, url: conn.url, status: status, attachedCount: attachedCount };
         });
-        sendResponse({ statuses: statuses });
+        sendResponse({ connections: list });
       });
       return true;
     } else if (message.type === 'add-connection') {

package/extension-new/config-page.js

@@ -258,8 +258,12 @@
   function loadConnectionStatuses() {
     if (typeof chrome !== 'undefined' && chrome.runtime) {
       chrome.runtime.sendMessage({ type: 'get-connection-statuses' }, function(response) {
-        if (response && response.statuses) {
-          state.connectionStatuses = response.statuses;
+        if (response && response.connections) {
+          var statuses = {};
+          response.connections.forEach(function(conn) {
+            statuses[conn.id] = conn.status;
+          });
+          state.connectionStatuses = statuses;
         }
         loadAndRenderConnections();
       });
@@ -431,6 +435,8 @@
         addLog(message.logType, message.message);
       } else if (message.type === 'connections-updated') {
         loadAndRenderConnections();
+      } else if (message.type === 'connection-status-changed') {
+        loadConnectionStatuses();
       }
     });
   }

package/extension-new/core/websocket.js

@@ -1,3 +1,27 @@
+function updateBadgeFromAllConnections() {
+  var hasConnected = false;
+  var hasEnabled = false;
+  ConnectionManager.forEachConnection(function(entry) {
+    var ws = entry.state.getWs();
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      hasConnected = true;
+    }
+    if (entry.config && entry.config.enabled !== false) {
+      hasEnabled = true;
+    }
+  });
+  var status;
+  if (hasConnected) {
+    status = 'ON';
+  } else if (hasEnabled) {
+    status = 'ERR';
+  } else {
+    status = 'OFF';
+  }
+  setBadgeStatus(status);
+  chrome.runtime.sendMessage({ type: 'connection-status-changed' }).catch(function() {});
+}
+
 var WebSocketConnection = (function() {
   function WebSocketConnection(connectionId, state, config) {
     this.connectionId = connectionId;
@@ -24,7 +48,7 @@ var WebSocketConnection = (function() {
         wsUrl += sep + 'pluginId=' + encodeURIComponent(pluginId);
       }
       Logger.info('[WS:' + self.connectionId + '] Connecting to', wsUrl);
-      setBadgeStatus('ON');
+      updateBadgeFromAllConnections();
 
       try {
         ws = new WebSocket(wsUrl);
@@ -32,7 +56,7 @@ var WebSocketConnection = (function() {
 
         ws.onopen = function() {
           Logger.info('[WS:' + self.connectionId + '] Connected');
-          setBadgeStatus('ON');
+          updateBadgeFromAllConnections();
           self.state.clearReconnectTimer();
           self._processQueue();
           self._broadcastStateUpdate();
@@ -43,14 +67,14 @@ var WebSocketConnection = (function() {
 
         ws.onclose = function(event) {
           Logger.info('[WS:' + self.connectionId + '] Closed:', event.code, event.reason);
-          setBadgeStatus('OFF');
+          updateBadgeFromAllConnections();
           self._scheduleReconnect();
           self._broadcastStateUpdate();
         };
 
         ws.onerror = function(error) {
           Logger.error('[WS:' + self.connectionId + '] Error:', error);
-          setBadgeStatus('ERR');
+          updateBadgeFromAllConnections();
           self._broadcastStateUpdate();
         };
 
@@ -58,9 +82,9 @@ var WebSocketConnection = (function() {
           self._handleRawMessage(event.data);
         };
       } catch (error) {
-        Logger.error('[WS:' + self.connectionId + '] Failed to create:', error);
-        setBadgeStatus('ERR');
-        self._scheduleReconnect();
+      Logger.error('[WS:' + self.connectionId + '] Failed to create:', error);
+      updateBadgeFromAllConnections();
+      self._scheduleReconnect();
       }
     });
   };

package/extension-new/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "CDP Bridge",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Chrome DevTools Protocol Bridge for Playwright/Puppeteer automation",
   "permissions": [
     "debugger",

package/extension-new/popup.html

@@ -4,76 +4,51 @@
 <meta charset="utf-8">
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
-body { width: 340px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #e0e0e0; font-size: 13px; }
+body { width: 320px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #e0e0e0; font-size: 13px; }
 
-.header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #2a2a4a; }
+.header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #2a2a4a; }
 .header h1 { font-size: 15px; font-weight: 600; color: #fff; }
-.status-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 12px; }
-.status-badge.on { background: rgba(76,175,80,0.15); color: #4CAF50; }
-.status-badge.off { background: rgba(158,158,158,0.15); color: #9E9E9E; }
-.status-badge.err { background: rgba(244,67,54,0.15); color: #F44336; }
-.status-dot { width: 8px; height: 8px; border-radius: 50%; }
-.status-badge.on .status-dot { background: #4CAF50; box-shadow: 0 0 6px #4CAF50; }
-.status-badge.off .status-dot { background: #9E9E9E; }
-.status-badge.err .status-dot { background: #F44336; }
 
-.section { padding: 12px 16px; border-bottom: 1px solid #2a2a4a; }
-.section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin-bottom: 8px; }
+.body { padding: 10px 14px; }
 
-.ws-address { display: flex; align-items: center; gap: 8px; }
-.ws-address input { flex: 1; background: #16213e; border: 1px solid #2a2a4a; border-radius: 6px; padding: 7px 10px; color: #e0e0e0; font-size: 12px; font-family: monospace; outline: none; }
-.ws-address input:focus { border-color: #4a9eff; }
-.btn-sm { background: #2a2a4a; border: 1px solid #3a3a5a; border-radius: 6px; padding: 6px 12px; color: #e0e0e0; font-size: 12px; cursor: pointer; white-space: nowrap; }
-.btn-sm:hover { background: #3a3a5a; }
+#connectionList { background: #16213e; border-radius: 6px; overflow: hidden; }
 
-.cdp-row { margin-bottom: 8px; }
-.cdp-row:last-child { margin-bottom: 0; }
-.cdp-label { font-size: 11px; color: #888; margin-bottom: 3px; }
-.cdp-url { display: flex; align-items: center; gap: 6px; background: #16213e; border-radius: 6px; padding: 6px 10px; }
-.cdp-url code { flex: 1; font-size: 11px; font-family: monospace; color: #4a9eff; word-break: break-all; line-height: 1.4; }
-.copy-btn { background: none; border: 1px solid #3a3a5a; border-radius: 4px; padding: 3px 8px; color: #aaa; font-size: 11px; cursor: pointer; flex-shrink: 0; }
-.copy-btn:hover { background: #3a3a5a; color: #fff; }
-.copy-btn.copied { color: #4CAF50; border-color: #4CAF50; }
+.conn-item { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+.conn-item:last-child { border-bottom: none; }
+.conn-header { display: flex; align-items: center; gap: 6px; }
+.conn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.conn-dot.connected { background: #4caf50; box-shadow: 0 0 4px #4caf50; }
+.conn-dot.error { background: #f44336; box-shadow: 0 0 4px #f44336; }
+.conn-dot.disabled { background: #9e9e9e; }
+.conn-tag { font-weight: 600; font-size: 13px; color: #e0e0e0; }
+.conn-url { color: #888; font-size: 11px; font-family: 'SF Mono', Menlo, monospace; word-break: break-all; margin-top: 3px; line-height: 1.4; }
 
-.clients-info { font-size: 12px; color: #aaa; }
-.clients-info span { color: #4a9eff; }
+.empty-hint { text-align: center; padding: 16px 10px; color: #777; font-size: 12px; }
 
-.btn-full { width: 100%; background: linear-gradient(135deg, #4a9eff, #357abd); border: none; border-radius: 6px; padding: 10px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
+.stats-row { display: flex; gap: 16px; padding: 8px 0; font-size: 12px; color: #aaa; }
+.stats-row span b { color: #4a9eff; font-weight: 600; }
+
+.btn-full { width: 100%; background: linear-gradient(135deg, #4a9eff, #357abd); border: none; border-radius: 6px; padding: 10px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; margin-top: 6px; }
 .btn-full:hover { opacity: 0.85; }
 
-.footer { padding: 8px 16px; text-align: center; }
-.footer a { color: #666; font-size: 11px; text-decoration: none; }
+.footer { padding: 6px 14px; text-align: right; }
+.footer a { color: #555; font-size: 11px; text-decoration: none; }
 .footer a:hover { color: #4a9eff; }
 </style>
 </head>
 <body>
 <div class="header">
   <h1>CDP Bridge</h1>
-  <div class="status-badge off" id="statusBadge">
-    <div class="status-dot"></div>
-    <span id="statusText">未连接</span>
-  </div>
-</div>
-
-<div class="section">
-  <div class="section-title">WebSocket 地址</div>
-  <div class="ws-address">
-    <input type="text" id="wsInput" placeholder="ws://localhost:9221/plugin" spellcheck="false">
-    <button class="btn-sm" id="saveBtn">保存</button>
-  </div>
 </div>
 
-<div class="section" id="cdpSection" style="display:none;">
-  <div class="section-title">CDP 连接地址</div>
-  <div id="cdpAddresses"></div>
-</div>
+<div class="body">
+  <div id="connectionList"></div>
 
-<div class="section" id="clientsSection" style="display:none;">
-  <div class="section-title">连接信息</div>
-  <div class="clients-info" id="clientsInfo"></div>
-</div>
+  <div class="stats-row" id="statsRow" style="display:none;">
+    <span>活跃连接: <b id="statClients">0</b></span>
+    <span>页面: <b id="statPages">0</b></span>
+  </div>
 
-<div class="section">
   <button class="btn-full" id="openConfigBtn">打开完整配置</button>
 </div>
 

package/extension-new/popup.js

@@ -1,127 +1,85 @@
 (function() {
   var $ = function(id) { return document.getElementById(id); };
 
-  var wsInput = $('wsInput');
-  var saveBtn = $('saveBtn');
-  var statusBadge = $('statusBadge');
-  var statusText = $('statusText');
-  var cdpSection = $('cdpSection');
-  var cdpAddresses = $('cdpAddresses');
-  var clientsSection = $('clientsSection');
-  var clientsInfo = $('clientsInfo');
+  var connectionList = $('connectionList');
+  var statsRow = $('statsRow');
+  var statClients = $('statClients');
+  var statPages = $('statPages');
 
   function loadState() {
-    chrome.storage.local.get(['wsAddress'], function(result) {
-      wsInput.value = result.wsAddress || '';
-    });
-    chrome.runtime.sendMessage({ type: 'popup-query' }, function(state) {
-      if (!state) return;
-      updateStatus(state);
-      updateCDP(state);
-      updateClients(state);
+    chrome.runtime.sendMessage({ type: 'get-connection-statuses' }, function(resp) {
+      if (!resp || !resp.connections) return;
+      renderConnectionList(resp.connections);
+      updateStats(resp.connections);
     });
   }
 
-  function updateStatus(state) {
-    var cls = state.connected ? 'on' : 'off';
-    var text = state.connected ? '已连接' : '未连接';
-    if (!state.connected && state.lastError) {
-      cls = 'err';
-      text = '错误';
-    }
-    statusBadge.className = 'status-badge ' + cls;
-    statusText.textContent = text;
-  }
+  function renderConnectionList(connections) {
+    connectionList.innerHTML = '';
 
-  function updateCDP(state) {
-    if (!state.connected || !state.pluginId) {
-      cdpSection.style.display = 'none';
+    if (!connections || connections.length === 0) {
+      connectionList.innerHTML = '<div class="empty-hint">尚未配置连接</div>';
       return;
     }
-    cdpSection.style.display = '';
 
-    var wsUrl = wsInput.value || 'ws://localhost:9221/plugin';
-    var cdpBase = wsUrl.replace(/\/plugin(\?.*)?$/, '');
-    var pluginId = state.pluginId;
-    var cdpPath = '/devtools/browser/' + pluginId;
+    connections.forEach(function(conn) {
+      var item = document.createElement('div');
+      item.className = 'conn-item';
 
-    var urls = [];
-    var parsed = parseWsUrl(wsUrl);
-    if (parsed) {
-      urls.push({ label: 'CDP 地址', url: parsed.protocol + '://' + parsed.host + cdpPath });
-    }
+      var header = document.createElement('div');
+      header.className = 'conn-header';
 
-    var html = '';
-    urls.forEach(function(item) {
-      html += '<div class="cdp-row">';
-      html += '<div class="cdp-label">' + item.label + '</div>';
-      html += '<div class="cdp-url">';
-      html += '<code>' + escapeHtml(item.url) + '</code>';
-      html += '<button class="copy-btn" data-url="' + escapeAttr(item.url) + '">复制</button>';
-      html += '</div></div>';
-    });
-    cdpAddresses.innerHTML = html;
-  }
+      var dot = document.createElement('span');
+      dot.className = 'conn-dot ' + conn.status;
 
-  function updateClients(state) {
-    if (!state.connected) {
-      clientsSection.style.display = 'none';
-      return;
-    }
-    clientsSection.style.display = '';
-    var clients = state.cdpClients || [];
-    var attached = state.attachedPages || [];
-    clientsInfo.innerHTML = '活跃连接: <span>' + clients.length + '</span> | 已附加页面: <span>' + attached.length + '</span>';
-  }
+      var tag = document.createElement('span');
+      tag.className = 'conn-tag';
+      tag.textContent = conn.tag;
 
-  function parseWsUrl(url) {
-    var m = url.match(/^(wss?):\/\/([^\/]+)/);
-    if (!m) return null;
-    return { protocol: m[1], host: m[2] };
-  }
+      header.appendChild(dot);
+      header.appendChild(tag);
 
-  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;');
-  }
+      var url = document.createElement('div');
+      url.className = 'conn-url';
+      url.textContent = conn.url;
 
-  saveBtn.addEventListener('click', function() {
-    var val = wsInput.value.trim();
-    chrome.storage.local.set({ wsAddress: val }, function() {
-      saveBtn.textContent = '已保存';
-      setTimeout(function() { saveBtn.textContent = '保存'; }, 1500);
-      chrome.runtime.sendMessage({ type: 'ws-reconnect' });
+      item.appendChild(header);
+      item.appendChild(url);
+      connectionList.appendChild(item);
     });
-  });
+  }
 
-  cdpAddresses.addEventListener('click', function(e) {
-    var btn = e.target.closest('.copy-btn');
-    if (!btn) return;
-    var url = btn.getAttribute('data-url');
-    navigator.clipboard.writeText(url).then(function() {
-      btn.textContent = '已复制';
-      btn.classList.add('copied');
-      setTimeout(function() {
-        btn.textContent = '复制';
-        btn.classList.remove('copied');
-      }, 2000);
+  function updateStats(connections) {
+    var active = 0;
+    var pages = 0;
+    connections.forEach(function(conn) {
+      if (conn.status === 'connected') active++;
+      pages += conn.attachedCount || 0;
     });
-  });
 
-  var openConfigBtn = $('openConfigBtn');
-  if (openConfigBtn) {
-    openConfigBtn.addEventListener('click', function() {
-      chrome.tabs.create({ url: chrome.runtime.getURL('config-page-preview.html') });
-    });
+    if (active > 0 || pages > 0) {
+      statsRow.style.display = '';
+    } else {
+      statsRow.style.display = 'none';
+    }
+    statClients.textContent = active;
+    statPages.textContent = pages;
   }
 
+  var openConfigBtn = $('openConfigBtn');
+  openConfigBtn.addEventListener('click', function() {
+    chrome.tabs.create({ url: chrome.runtime.getURL('config-page-preview.html') });
+  });
+
   var versionLink = $('versionLink');
-  if (versionLink) {
-    var manifest = chrome.runtime.getManifest();
-    versionLink.textContent = 'v' + manifest.version;
-  }
+  var manifest = chrome.runtime.getManifest();
+  versionLink.textContent = 'v' + manifest.version;
 
   loadState();
+
+  chrome.runtime.onMessage.addListener(function(message) {
+    if (message.type === 'connection-status-changed' || message.type === 'stateUpdate') {
+      loadState();
+    }
+  });
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Bridge Chrome's debugger API to WebSocket — control your existing browser with Playwright/Puppeteer via CDP",
   "main": "server/proxy-server.js",
   "bin": "./cli/index.js",