cdp-tunnel 3.4.0 → 3.6.0

package/extension-new/cdp/handler/special.js

@@ -20,6 +20,15 @@ var SpecialHandler = (function() {
     return (wm && wm.config && wm.config.tag) || null;
   }
 
+  // 从 state 读取 key 名称（用作分组名），doGroup 等分组操作调用
+  function _getGroupName(clientId, context) {
+    var state = context ? context._state : null;
+    if (state && clientId && state.getGroupNameForClient) {
+      return state.getGroupNameForClient(clientId);
+    }
+    return null;
+  }
+
   function muteTabIfNeeded(tabId) {
     Config.getAutoMute(function(enabled) {
       if (!enabled) return;
@@ -297,7 +306,7 @@ var SpecialHandler = (function() {
         return;
       }
     }
-    var baseName = CDPUtils.getGroupBaseName(groupClientId, _getConnectionTag(context), context ? context.mode : null);
+    var baseName = CDPUtils.getGroupBaseName(groupClientId, _getConnectionTag(context), context ? context.mode : null, _getGroupName(groupClientId, context));
 
     Logger.info('[TabGroup] Grouping tab immediately for:', baseName);
     doGroup(tabId, groupClientId, baseName, 0, callback, context);
@@ -465,7 +474,8 @@ var SpecialHandler = (function() {
     chrome.tabs.query({ groupId: groupId }, function(tabs) {
       if (chrome.runtime.lastError || !tabs) return;
 
-      var baseName = CDPUtils.getGroupBaseName(clientId, connectionTag, mode);
+      var groupName = (state && state.getGroupNameForClient) ? state.getGroupNameForClient(clientId) : null;
+      var baseName = CDPUtils.getGroupBaseName(clientId, connectionTag, mode, groupName);
       var newName = baseName + ' (' + tabs.length + ')';
 
       if (chrome.runtime.lastError || tabs.length === 0) return;

package/extension-new/config-page-preview.html

@@ -295,6 +295,11 @@
       margin-bottom: 2px;
     }
 
+    .auth-badge {
+      font-size: 11px;
+      cursor: help;
+    }
+
     .conn-config-url {
       font-size: 11px;
       color: #6b7280;

package/extension-new/config-page.js

@@ -103,14 +103,16 @@
       var isActive = conn.enabled && statusClass === 'connected';
       var cdpAddr = getCdpAddress(conn.url, conn.mode);
       var statusHtml = getStatusHtml(statusClass);
+      var hasKey = (conn.url || '').indexOf('key=') >= 0;
+      var maskedUrl = maskUrl(conn.url);
       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">' + (conn.mode === 'takeover' ? '🔗 ' : '🆕 ') + escapeHtml(conn.tag) + '</div>' +
-            '<div class="conn-config-url" title="' + escapeAttr(conn.url) + '">WS:  ' + escapeHtml(conn.url) + '</div>' +
-            (cdpAddr ? '<div class="conn-config-cdp">CDP: <span class="cdp-addr" data-cdp="' + escapeAttr(cdpAddr) + '">' + escapeHtml(cdpAddr) + '</span> <button class="btn-copy-cdp" data-cdp="' + escapeAttr(cdpAddr) + '" title="复制 CDP 地址">📋</button></div>' : '') +
+            '<div class="conn-config-tag">' + (conn.mode === 'takeover' ? '🔗 ' : '🆕 ') + escapeHtml(conn.tag) + (hasKey ? ' <span class="auth-badge" title="带 API Key 鉴权">🔑</span>' : '') + '</div>' +
+            '<div class="conn-config-url" title="' + escapeAttr(maskedUrl) + '">WS:  ' + escapeHtml(maskedUrl) + '</div>' +
+            (cdpAddr ? '<div class="conn-config-cdp">CDP: <span class="cdp-addr" data-cdp="' + escapeAttr(cdpAddr) + '">' + escapeHtml(cdpAddr.replace(/(key=)(cdp_[a-f0-9]{8})[a-f0-9]*/, '$1$2••••')) + '</span> <button class="btn-copy-cdp" data-cdp="' + escapeAttr(cdpAddr) + '" title="复制 CDP 地址（含 key）">📋</button></div>' : '') +
             '<div class="conn-config-status">' + statusHtml + '</div>' +
           '</div>' +
           '<button class="btn-delete" data-id="' + conn.id + '" title="删除">删除</button>' +
@@ -313,7 +315,16 @@
     var host = match[1];
     var port = parseInt(match[2], 10);
     if (mode === 'takeover') port += 1;
-    return 'http://' + host + ':' + port;
+    // 保留 key（如果 URL 里带了 ?key=xxx，CDP 客户端连接也需要带）
+    var keyMatch = (wsUrl || '').match(/[?&]key=([^&]+)/);
+    var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
+    return 'http://' + host + ':' + port + keyParam;
+  }
+
+  // 显示 URL 时隐藏 key 的明文（防截图泄露），但保留可识别性
+  function maskUrl(wsUrl) {
+    if (!wsUrl) return '';
+    return wsUrl.replace(/([?&]key=)(cdp_[a-f0-9]{8})[a-f0-9]*/, '$1$2••••');
   }
 
   function init() {

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

@@ -308,6 +308,15 @@ ConnectionState.prototype.getTagForClient = function(clientId) {
   return this.clientIdToTag.get(clientId) || null;
 };
 
+ConnectionState.prototype.setGroupNameForClient = function(clientId, groupName) {
+  if (!this.clientIdToGroupName) this.clientIdToGroupName = new Map();
+  if (clientId && groupName) this.clientIdToGroupName.set(clientId, groupName);
+};
+
+ConnectionState.prototype.getGroupNameForClient = function(clientId) {
+  return (this.clientIdToGroupName && this.clientIdToGroupName.get(clientId)) || null;
+};
+
 ConnectionState.prototype.addCDPClient = function(clientId, info) {
   var exists = false;
   for (var i = 0; i < this.cdpClients.length; i++) {

package/extension-new/core/websocket.js

@@ -244,7 +244,12 @@ var WebSocketConnection = (function() {
         if (message.__connectionTag) {
           self.state.setTagForClient(message.clientId, message.__connectionTag);
         }
-        self._createGroupForClient(message.clientId, message.__mode);
+        // 存 groupName，供 doGroup 等后续分组操作使用
+        if (message.__groupName) {
+          self.state.setGroupNameForClient(message.clientId, message.__groupName);
+        }
+        // __groupName 来自 API Key 名称，用作 Chrome 分组名（一眼看出是谁的浏览器）
+        self._createGroupForClient(message.clientId, message.__mode, message.__groupName);
         self._broadcastStateUpdate();
         break;
 
@@ -555,7 +560,7 @@ var WebSocketConnection = (function() {
     });
   };
 
-  WebSocketConnection.prototype._createGroupForClient = function(clientId, mode) {
+  WebSocketConnection.prototype._createGroupForClient = function(clientId, mode, groupName) {
     var self = this;
     if (!clientId || !chrome.tabGroups) return;
     if (mode === 'takeover') {
@@ -581,7 +586,7 @@ var WebSocketConnection = (function() {
     self.state.setGroupCreationPromise(clientId, readyPromise);
 
     var tag = (self.state.getTagForClient ? self.state.getTagForClient(clientId) : null) || (self.config ? self.config.tag : null);
-    var baseName = CDPUtils.getGroupBaseName(clientId, tag, mode);
+    var baseName = CDPUtils.getGroupBaseName(clientId, tag, mode, groupName);
     chrome.tabs.query({ currentWindow: true }, function(tabs) {
       if (!tabs || tabs.length === 0) {
         Logger.warn('[WS:' + self.connectionId + '] No tabs found for group creation');

package/extension-new/manifest.json

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

package/extension-new/utils/config.js

@@ -1,5 +1,5 @@
 var Config = {
-  WS_URL: 'ws://localhost:9221/plugin',
+  WS_URL: 'ws://localhost:14576/plugin',
   RECONNECT_DELAY: 3000,
   DEBUGGER_VERSION: '1.3',
   HEARTBEAT_INTERVAL: 25000,

package/extension-new/utils/helpers.js

@@ -42,8 +42,14 @@ var CDPUtils = (function() {
     return 0;
   }
 
-  function buildGroupName(clientId, connectionTag, mode) {
+  function buildGroupName(clientId, connectionTag, mode, groupName) {
     if (!clientId) return 'CDP';
+    // 如果传了 groupName（来自 API Key 的名称），直接用它作为分组名
+    // Chrome 分组显示为 "CDP-张三的浏览器"，一眼看出是谁的浏览器
+    if (groupName) {
+      var prefixG = (mode === 'takeover') ? 'TAKE-' : 'CDP-';
+      return prefixG + groupName;
+    }
     var hash = 0;
     for (var i = 0; i < clientId.length; i++) {
       var chr = clientId.charCodeAt(i);
@@ -56,8 +62,8 @@ var CDPUtils = (function() {
     return prefix + tag + suffix;
   }
 
-  function getGroupBaseName(clientId, connectionTag, mode) {
-    return buildGroupName(clientId, connectionTag, mode);
+  function getGroupBaseName(clientId, connectionTag, mode, groupName) {
+    return buildGroupName(clientId, connectionTag, mode, groupName);
   }
 
   function findGroupByName(allGroups, baseName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "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",