cdp-tunnel 1.7.0 → 2.1.0

package/extension-new/background.js

@@ -13,17 +13,6 @@ importScripts('cdp/index.js');
 importScripts('features/screencast.js');
 importScripts('features/automation-badge.js');
 
-// 为字符串添加hashCode方法（用于生成颜色索引）
-String.prototype.hashCode = function() {
-  var hash = 0;
-  for (var i = 0; i < this.length; i++) {
-    var char = this.charCodeAt(i);
-    hash = ((hash << 5) - hash) + char;
-    hash = hash & hash; // Convert to 32bit integer
-  }
-  return hash;
-};
-
 (function() {
   'use strict';
 
@@ -230,66 +219,54 @@ String.prototype.hashCode = function() {
         
         // 将标签页添加到CDP组（添加延迟等待）
         setTimeout(function() {
-          // 获取openerTabId对应的clientId
           var openerClientId = openerTabId ? State.getClientIdByTabId(openerTabId) : null;
-          var groupName;
-
-          // 如果有指定的clientId，使用该clientId作为组名
-          if (openerClientId) {
-            groupName = 'CDP-' + openerClientId.substring(0, 8);
-            Logger.info('[TabGroup] Using opener clientId for group name:', groupName, 'openerTabId:', openerTabId);
-          } else {
-            // 回退到使用第一个CDP客户端的ID
+          var groupClientId = openerClientId;
+          if (!groupClientId) {
             var cdpClients = State.getCDPClients() || [];
             if (cdpClients.length > 0 && cdpClients[0] && cdpClients[0].id) {
-              groupName = 'CDP-' + cdpClients[0].id.substring(0, 8);
-            } else {
-              // 如果没有CDP客户端，使用时间戳作为组名
-              groupName = 'CDP-' + Date.now().toString(36);
+              groupClientId = cdpClients[0].id;
             }
-            Logger.info('[TabGroup] Using fallback clientId for group name:', groupName);
           }
 
-          chrome.tabGroups.query({ title: groupName }, function(groups) {
-            if (groups.length > 0) {
-              // 找到现有的组，将标签页添加到组
-              chrome.tabs.group({ tabIds: tabId, groupId: groups[0].id }, function(groupId) {
+          if (!groupClientId) return;
+          var baseName = CDPUtils.getGroupBaseName(groupClientId);
+          Logger.info('[TabGroup] background onCreated, baseName:', baseName);
+
+          chrome.tabGroups.query({}, function(allGroups) {
+            var existing = CDPUtils.findGroupByName(allGroups, baseName);
+            if (existing) {
+              chrome.tabs.group({ tabIds: tabId, groupId: existing.id }, function(groupId) {
                 if (chrome.runtime.lastError) {
                   Logger.error('[TabGroup] Failed to add tab to group:', chrome.runtime.lastError.message);
                 } else {
-                  Logger.info('[TabGroup] Tab added to group:', groupId, 'Group name:', groupName);
+                  State.setGroupIdForClient(groupClientId, existing.id);
+                  Logger.info('[TabGroup] Tab added to group:', groupId);
                 }
               });
             } else {
-              // 创建新组并添加标签页
               chrome.tabs.group({ tabIds: tabId }, function(groupId) {
                 if (chrome.runtime.lastError) {
                   Logger.error('[TabGroup] Failed to create group:', chrome.runtime.lastError.message);
                   return;
                 }
-                // 更新组的标题和颜色
                 if (groupId) {
-                  // 为不同的组使用不同的颜色
-                  var colors = ['blue', 'red', 'yellow', 'green', 'pink', 'purple', 'cyan', 'orange'];
-                  var colorIndex = Math.abs(groupName.hashCode ? groupName.hashCode() : 0) % colors.length;
-                  var groupColor = colors[colorIndex];
-                  
                   chrome.tabGroups.update(groupId, {
-                    title: groupName,
-                    color: groupColor,
+                    title: baseName,
+                    color: CDPUtils.getGroupColorForClient(groupClientId),
                     collapsed: true
                   }, function(group) {
                     if (chrome.runtime.lastError) {
                       Logger.error('[TabGroup] Failed to update group:', chrome.runtime.lastError.message);
                     } else {
-                      Logger.info('[TabGroup] Group created and updated:', group);
+                      State.setGroupIdForClient(groupClientId, groupId);
+                      Logger.info('[TabGroup] Group created:', group);
                     }
                   });
                 }
               });
             }
           });
-        }, 2000); // 等待2秒
+        }, 2000);
         
         Logger.info('[Tabs] Sending Target.attachedToTarget event');
         

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

@@ -132,34 +132,28 @@ var SpecialHandler = (function() {
       muteTabIfNeeded(tabId);
     }, 500);
 
-    var groupName;
     var groupClientId = clientId;
-
-    if (clientId) {
-      groupName = 'CDP-' + clientId.substring(0, 8);
-    } else {
+    if (!groupClientId) {
       var cdpClients = State.getCDPClients() || [];
       if (cdpClients.length > 0 && cdpClients[0] && cdpClients[0].id) {
-        groupName = 'CDP-' + cdpClients[0].id.substring(0, 8);
         groupClientId = cdpClients[0].id;
-      } else {
-        groupName = 'CDP-Automation';
       }
     }
+
+    if (!groupClientId) return;
+    var baseName = CDPUtils.getGroupBaseName(groupClientId);
     
     setTimeout(function() {
-      Logger.info('[TabGroup] Executing group operation after delay...');
+      Logger.info('[TabGroup] Executing group operation for:', baseName);
       
       chrome.tabGroups.query({}, function(allGroups) {
-        var groups = allGroups.filter(function(g) {
-          return g.title && g.title.indexOf(groupName) === 0;
-        });
-        if (groups.length > 0) {
-          chrome.tabs.group({ tabIds: tabId, groupId: groups[0].id }, function(result) {
+        var existing = CDPUtils.findGroupByName(allGroups, baseName);
+        if (existing) {
+          chrome.tabs.group({ tabIds: tabId, groupId: existing.id }, function(result) {
             if (chrome.runtime.lastError) {
               Logger.error('[TabGroup] Failed to add tab to group:', chrome.runtime.lastError.message);
             } else {
-              State.setGroupIdForClient(groupClientId, groups[0].id);
+              State.setGroupIdForClient(groupClientId, existing.id);
               updateTabGroupName(groupClientId);
             }
           });
@@ -170,12 +164,9 @@ var SpecialHandler = (function() {
               return;
             }
             if (groupId) {
-              var colors = ['blue', 'red', 'yellow', 'green', 'pink', 'purple', 'cyan', 'orange'];
-              var colorIndex = Math.abs(groupName.hashCode ? groupName.hashCode() : 0) % colors.length;
-              
               chrome.tabGroups.update(groupId, {
-                title: groupName,
-                color: colors[colorIndex],
+                title: baseName,
+                color: CDPUtils.getGroupColorForClient(groupClientId),
                 collapsed: true
               }, function() {
                 if (chrome.runtime.lastError) {
@@ -201,9 +192,8 @@ var SpecialHandler = (function() {
     chrome.tabs.query({ groupId: groupId }, function(tabs) {
       if (chrome.runtime.lastError || !tabs) return;
       
-      var count = tabs.length;
-      var baseName = 'CDP-' + clientId.substring(0, 8);
-      var newName = baseName + ' (' + count + ')';
+      var baseName = CDPUtils.getGroupBaseName(clientId);
+      var newName = baseName + ' (' + tabs.length + ')';
       
       chrome.tabGroups.update(groupId, {
         title: newName
@@ -217,17 +207,6 @@ var SpecialHandler = (function() {
     });
   }
   
-  // 为字符串添加hashCode方法（用于生成颜色索引）
-  String.prototype.hashCode = function() {
-    var hash = 0;
-    for (var i = 0; i < this.length; i++) {
-      var char = this.charCodeAt(i);
-      hash = ((hash << 5) - hash) + char;
-      hash = hash & hash; // Convert to 32bit integer
-    }
-    return hash;
-  };
-
   function targetActivateTarget(context) {
     var params = context.params;
     var targetId = params && params.targetId;
@@ -399,7 +378,7 @@ function checkTabVisibility(tabId) {
             if (clientId) {
               State.setTabIdToClientId(target.tabId, clientId);
             }
-            addTabToAutomationGroup(target.tabId, clientId);
+            State.addPreExistingTab(target.tabId);
 
             if (config.waitForDebuggerOnStart) {
               State.addPendingDebuggerTab(target.tabId);
@@ -421,7 +400,7 @@ function checkTabVisibility(tabId) {
               if (clientId) {
                 State.setTabIdToClientId(target.tabId, clientId);
               }
-              addTabToAutomationGroup(target.tabId, clientId);
+              State.addPreExistingTab(target.tabId);
 
               if (config.waitForDebuggerOnStart) {
                 State.addPendingDebuggerTab(target.tabId);

package/extension-new/core/state.js

@@ -24,7 +24,8 @@ var State = (function() {
     clientIdToTabId: new Map(),
     clientIdToSessionId: new Map(),
     tabIdToClientId: new Map(),
-    clientIdToGroupId: new Map()
+    clientIdToGroupId: new Map(),
+    preExistingTabIds: new Set()
   };
 
   function mapSession(sessionId, tabId, targetId) {
@@ -264,6 +265,7 @@ var State = (function() {
     _state.hasConnectedClient = false;
     _state.tabIdToClientId.clear();
     _state.clientIdToGroupId.clear();
+    _state.preExistingTabIds.clear();
   }
 
   function cleanupAllTabs() {
@@ -346,6 +348,30 @@ var State = (function() {
     _state.clientIdToGroupId.delete(clientId);
   }
 
+  function addPreExistingTab(tabId) {
+    _state.preExistingTabIds.add(tabId);
+  }
+
+  function isPreExistingTab(tabId) {
+    return _state.preExistingTabIds.has(tabId);
+  }
+
+  function getPreExistingTabs() {
+    return Array.from(_state.preExistingTabIds);
+  }
+
+  function removePreExistingTab(tabId) {
+    _state.preExistingTabIds.delete(tabId);
+  }
+
+  function clearPreExistingTabsForClient(clientId) {
+    _state.preExistingTabIds.forEach(function(tabId) {
+      if (State.getClientIdByTabId(tabId) === clientId) {
+        _state.preExistingTabIds.delete(tabId);
+      }
+    });
+  }
+
   function getTabIdByClientId(clientId) {
     return _state.clientIdToTabId.get(clientId);
   }
@@ -448,6 +474,11 @@ var State = (function() {
     getClientIdByTabId: getClientIdByTabId,
     setGroupIdForClient: setGroupIdForClient,
     getGroupIdForClient: getGroupIdForClient,
-    removeGroupForClient: removeGroupForClient
+    removeGroupForClient: removeGroupForClient,
+    addPreExistingTab: addPreExistingTab,
+    isPreExistingTab: isPreExistingTab,
+    getPreExistingTabs: getPreExistingTabs,
+    removePreExistingTab: removePreExistingTab,
+    clearPreExistingTabsForClient: clearPreExistingTabsForClient
   };
 })();

package/extension-new/core/websocket.js

@@ -199,6 +199,16 @@ var WebSocketManager = (function() {
             closeTabsByClientId(discClientId, resolve);
           });
         }).then(function() {
+          var preExistingTabs = State.getPreExistingTabs();
+          var clientPreExisting = preExistingTabs.filter(function(tabId) {
+            return State.getClientIdByTabId(tabId) === discClientId;
+          });
+          clientPreExisting.forEach(function(tabId) {
+            chrome.debugger.detach({ tabId: tabId }).catch(function() {});
+            State.removeAttachedTab(tabId);
+          });
+          State.clearPreExistingTabsForClient(discClientId);
+
           State.removeCDPClient(discClientId);
           if (State.getCDPClients().length === 0) {
             State.setHasConnectedClient(false);
@@ -261,26 +271,14 @@ var WebSocketManager = (function() {
         if (groupId) {
             closeGroupById(groupId, clientId, resolve);
         } else {
-            var groupName = 'CDP-' + clientId.substring(0, 8);
-            chrome.tabGroups.query({ title: groupName }, function(groups) {
-                if (!groups || groups.length === 0) {
-                    chrome.tabGroups.query({}, function(allGroups) {
-                        if (allGroups) {
-                            var match = allGroups.find(function(g) {
-                                return g.title && g.title.indexOf(groupName) === 0;
-                            });
-                            if (match) {
-                                closeGroupById(match.id, clientId, resolve);
-                            } else {
-                                Logger.info('[WS] No tab group found, closing tabs by clientId:', clientId);
-                                closeTabsByClientId(clientId, resolve);
-                            }
-                        } else {
-                            resolve();
-                        }
-                    });
+            var baseName = CDPUtils.getGroupBaseName(clientId);
+            chrome.tabGroups.query({}, function(allGroups) {
+                var match = CDPUtils.findGroupByName(allGroups, baseName);
+                if (match) {
+                    closeGroupById(match.id, clientId, resolve);
                 } else {
-                    closeGroupById(groups[0].id, clientId, resolve);
+                    Logger.info('[WS] No tab group found, closing tabs by clientId:', clientId);
+                    closeTabsByClientId(clientId, resolve);
                 }
             });
         }
@@ -321,7 +319,7 @@ var WebSocketManager = (function() {
     var tabsToClose = [];
     
     attachedTabs.forEach(function(tabId) {
-      if (State.getClientIdByTabId(tabId) === clientId) {
+      if (State.getClientIdByTabId(tabId) === clientId && !State.isPreExistingTab(tabId)) {
         tabsToClose.push(tabId);
       }
     });

package/extension-new/utils/helpers.js

@@ -17,9 +17,59 @@ var CDPUtils = (function() {
     });
   }
 
+  function hashCode(str) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+      var char = str.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash;
+    }
+    return hash;
+  }
+
+  var GROUP_COLORS = ['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple'];
+
+  function getGroupColorForClient(clientId) {
+    var idx = Math.abs(hashCode(clientId)) % GROUP_COLORS.length;
+    return GROUP_COLORS[idx];
+  }
+
+  function getClientIndex(clientId) {
+    var clients = (typeof State !== 'undefined') ? (State.getCDPClients() || []) : [];
+    for (var i = 0; i < clients.length; i++) {
+      if (clients[i].id === clientId) return i + 1;
+    }
+    return 0;
+  }
+
+  function buildGroupName(clientId) {
+    if (!clientId) return 'CDP';
+    var idx = getClientIndex(clientId);
+    return idx > 0 ? ('CDP #' + idx) : ('CDP-' + clientId.substring(0, 6));
+  }
+
+  function getGroupBaseName(clientId) {
+    return buildGroupName(clientId);
+  }
+
+  function findGroupByName(allGroups, baseName) {
+    for (var i = 0; i < allGroups.length; i++) {
+      var g = allGroups[i];
+      if (g.title && g.title.indexOf(baseName) === 0) return g;
+    }
+    return null;
+  }
+
   return {
     generateSessionId: generateSessionId,
     getChromeVersion: getChromeVersion,
-    sleep: sleep
+    sleep: sleep,
+    hashCode: hashCode,
+    GROUP_COLORS: GROUP_COLORS,
+    getGroupColorForClient: getGroupColorForClient,
+    getClientIndex: getClientIndex,
+    buildGroupName: buildGroupName,
+    getGroupBaseName: getGroupBaseName,
+    findGroupByName: findGroupByName
   };
 })();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cdp-tunnel",
-  "version": "1.7.0",
-  "description": "Chrome Extension CDP Proxy - 通过 Chrome 扩展将 chrome.debugger API 暴露为 WebSocket 端点",
+  "version": "2.1.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",
   "scripts": {
@@ -19,12 +19,30 @@
   "keywords": [
     "cdp",
     "chrome-devtools-protocol",
+    "cdp-proxy",
     "playwright",
     "puppeteer",
-    "chrome-extension"
+    "chrome-extension",
+    "browser-automation",
+    "web-scraping",
+    "remote-debugging",
+    "websocket",
+    "testing",
+    "browser-control"
   ],
   "author": "dyyz1993",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dyyz1993/cdp-tunnel.git"
+  },
+  "homepage": "https://github.com/dyyz1993/cdp-tunnel#readme",
+  "bugs": {
+    "url": "https://github.com/dyyz1993/cdp-tunnel/issues"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "files": [
     "server/",
     "cli/",

package/extension-new/popup.html

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <style>
-    body {
-      width: 300px;
-      padding: 15px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      font-size: 14px;
-    }
-    .status {
-      display: flex;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-    .status-dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      margin-right: 8px;
-    }
-    .status-dot.active {
-      background-color: #4CAF50;
-    }
-    .status-dot.inactive {
-      background-color: #9E9E9E;
-    }
-    .config-section {
-      margin-top: 15px;
-    }
-    .config-section label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: 500;
-    }
-    .config-section input {
-      width: 100%;
-      padding: 8px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      box-sizing: border-box;
-    }
-    .config-section button {
-      margin-top: 10px;
-      padding: 8px 16px;
-      background-color: #2196F3;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    .config-section button:hover {
-      background-color: #1976D2;
-    }
-  </style>
-</head>
-<body>
-  <div class="status">
-    <div class="status-dot active" id="statusDot"></div>
-    <span id="statusText">已激活</span>
-  </div>
-  
-  <div class="config-section">
-    <label>WebSocket 地址</label>
-    <input type="text" id="wsAddress" placeholder="ws://localhost:9221/client">
-    <button id="saveBtn">保存</button>
-  </div>
-  
-  <script src="popup.js"></script>
-</body>
-</html>

package/extension-new/popup.js

@@ -1,34 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-  var statusDot = document.getElementById('statusDot');
-  var statusText = document.getElementById('statusText');
-  var wsAddressInput = document.getElementById('wsAddress');
-  var saveBtn = document.getElementById('saveBtn');
-
-  chrome.storage.local.get(['wsAddress'], function(result) {
-    if (result.wsAddress) {
-      wsAddressInput.value = result.wsAddress;
-    } else {
-      wsAddressInput.value = 'ws://localhost:9221/plugin';
-    }
-  });
-
-  saveBtn.addEventListener('click', function() {
-    var newAddress = wsAddressInput.value.trim();
-    if (newAddress) {
-      chrome.storage.local.set({ wsAddress: newAddress }, function() {
-        statusText.textContent = '已保存，正在重连...';
-        
-        chrome.runtime.sendMessage({ type: 'reconnect' }, function(response) {
-          if (response && response.success) {
-            statusText.textContent = '已激活';
-          } else {
-            statusText.textContent = '重连失败';
-          }
-        });
-      });
-    }
-  });
-
-  statusDot.classList.add('active');
-  statusText.textContent = '已激活';
-});