cdp-tunnel 2.9.3 → 2.10.0

package/README.md

@@ -102,7 +102,7 @@ The server will start on `localhost:9221`.
 
 #### 3. Connect the Extension
 
-Click the extension icon, enter the server address in the configuration page, and click "Save and Connect".
+Click the extension icon, then click **打开完整配置** to open the configuration page. Add a connection: fill in Name (e.g., "local"), WebSocket URL (default `ws://localhost:9221/plugin`), and Mode (create/takeover). The CDP address will be displayed (e.g., `http://localhost:9221` for create mode, `http://localhost:9222` for takeover mode). Copy it and use it in Playwright: `chromium.connectOverCDP('http://localhost:9221')`.
 
 ### 3. Client Connection
 

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

@@ -254,6 +254,27 @@
     .status-dot.error { background: #f44336; box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2); }
     .status-dot.disabled { background: #9e9e9e; }
 
+    .status-connected { color: #4caf50; font-size: 11px; font-weight: 600; }
+    .status-error { color: #f44336; font-size: 11px; font-weight: 600; }
+    .status-error-hint {
+      display: block;
+      font-size: 11px;
+      margin-top: 4px;
+      color: #999;
+    }
+    .status-error-hint code {
+      background: rgba(244, 67, 54, 0.1);
+      color: #f44336;
+      padding: 2px 4px;
+      border-radius: 3px;
+      font-family: monospace;
+    }
+    .status-disabled { color: #9e9e9e; font-size: 11px; }
+    .conn-config-status {
+      margin-top: 4px;
+      font-size: 11px;
+    }
+
     .conn-config-item input[type="checkbox"] {
       width: 16px;
       height: 16px;
@@ -849,6 +870,9 @@
                 <option value="create">创建模式</option>
                 <option value="takeover">接管模式</option>
               </select>
+              <div id="modeHint" style="display:none; font-size:11px; color:#999; margin-top:4px; grid-column:1/-1;">
+                🔗 接管模式将使用端口 <span id="takeoverPortHint"></span> 作为 CDP 端点
+              </div>
               <button class="btn btn-primary btn-sm" id="addConnBtn">添加连接</button>
             </div>
           </div>

package/extension-new/config-page.js

@@ -80,6 +80,12 @@
     return 'disabled';
   }
 
+  function getStatusHtml(status) {
+    if (status === 'connected') return '<span class="status-connected">已连接</span>';
+    if (status === 'error') return '<span class="status-error">连接失败</span><br><span class="status-error-hint">💡 运行 <code>cdp-tunnel diagnose</code> 排查</span>';
+    return '<span class="status-disabled">未连接</span>';
+  }
+
   function renderConnections(connections) {
     if (!connections || connections.length === 0) {
       elements.connConfigList.innerHTML =
@@ -96,6 +102,7 @@
       var statusClass = getStatusClass(conn.id, conn.enabled);
       var isActive = conn.enabled && statusClass === 'connected';
       var cdpAddr = getCdpAddress(conn.url, conn.mode);
+      var statusHtml = getStatusHtml(statusClass);
       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="启用/禁用">' +
@@ -104,6 +111,7 @@
             '<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-status">' + statusHtml + '</div>' +
           '</div>' +
           '<button class="btn-delete" data-id="' + conn.id + '" title="删除">删除</button>' +
         '</div>';
@@ -326,6 +334,23 @@
       addLog('action', e.target.checked ? '自动静音已开启' : '自动静音已关闭');
     });
 
+    elements.inputMode.addEventListener('change', function(e) {
+      var modeHint = document.getElementById('modeHint');
+      var takeoverPortHint = document.getElementById('takeoverPortHint');
+      var url = elements.newConnUrl.value;
+      
+      if (e.target.value === 'takeover') {
+        var match = url.match(/:(\d+)/);
+        if (match) {
+          var port = parseInt(match[1]) + 1;
+          takeoverPortHint.textContent = port;
+          modeHint.style.display = 'block';
+        }
+      } else {
+        modeHint.style.display = 'none';
+      }
+    });
+
     var versionBadge = document.getElementById('versionBadge');
     if (versionBadge && typeof chrome !== 'undefined' && chrome.runtime) {
       var manifest = chrome.runtime.getManifest();

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

@@ -41,8 +41,11 @@ var ConnectionManager = (function() {
     var entry = _connections.get(connectionId);
     if (!entry) return;
 
+    entry.wsManager._removed = true;
     entry.state.clearReconnectTimer();
     if (entry.state.ws) {
+      entry.state.ws.onclose = null;
+      entry.state.ws.onerror = null;
       try { entry.state.ws.close(); } catch(e) {}
     }
     entry.state.clearAllState();
@@ -97,10 +100,12 @@ var ConnectionManager = (function() {
 
   function disconnectAll() {
     _connections.forEach(function(entry) {
+      entry.state.clearReconnectTimer();
       if (entry.state.ws) {
+        entry.state.ws.onclose = null;
+        entry.state.ws.onerror = null;
         try { entry.state.ws.close(); } catch(e) {}
       }
-      entry.state.clearReconnectTimer();
     });
   }
 

package/extension-new/core/websocket.js

@@ -32,10 +32,15 @@ var WebSocketConnection = (function() {
     this._maxQueueSize = 100;
     this._bufferThreshold = 512 * 1024;
     this._groupCreationPending = new Set();
+    this._removed = false;
   }
 
   WebSocketConnection.prototype.connect = function() {
     var self = this;
+    if (self._removed) {
+      Logger.info('[WS:' + self.connectionId + '] Skipping connect, connection removed');
+      return;
+    }
     var ws = self.state.getWs();
     if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
       return;
@@ -43,6 +48,10 @@ var WebSocketConnection = (function() {
 
     var wsUrl = self.config.url;
     Config.getPluginId(function(pluginId) {
+      if (self._removed) {
+        Logger.info('[WS:' + self.connectionId + '] Aborting connect (async), connection removed');
+        return;
+      }
       if (pluginId) {
         var sep = wsUrl.indexOf('?') >= 0 ? '&' : '?';
         wsUrl += sep + 'pluginId=' + encodeURIComponent(pluginId);
@@ -150,9 +159,14 @@ var WebSocketConnection = (function() {
   };
 
   WebSocketConnection.prototype._scheduleReconnect = function() {
+    if (this._removed) {
+      Logger.info('[WS:' + this.connectionId + '] Skipping reconnect, connection removed');
+      return;
+    }
     this.state.clearReconnectTimer();
     var self = this;
     var timer = setTimeout(function() {
+      if (self._removed) return;
       Logger.info('[WS:' + self.connectionId + '] Attempting to reconnect...');
       self.connect();
     }, Config.RECONNECT_DELAY);

package/extension-new/manifest.json

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

package/extension-new/popup.html

@@ -31,6 +31,27 @@ body { width: 320px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
 
 .empty-hint { text-align: center; padding: 16px 10px; color: #777; font-size: 12px; }
 
+.first-time-guide {
+  background: rgba(33, 150, 243, 0.1);
+  border: 1px solid rgba(33, 150, 243, 0.3);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  gap: 12px;
+}
+.guide-icon {
+  font-size: 24px;
+}
+.guide-text {
+  font-size: 13px;
+  line-height: 1.4;
+}
+.guide-text strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
 .stats-row { display: flex; gap: 16px; padding: 8px 0; font-size: 12px; color: #aaa; }
 .stats-row span b { color: #4a9eff; font-weight: 600; }
 

package/extension-new/popup.js

@@ -27,7 +27,16 @@
     connectionList.innerHTML = '';
 
     if (!connections || connections.length === 0) {
-      connectionList.innerHTML = '<div class="empty-hint">尚未配置连接</div>';
+      var guideHtml = `
+        <div class="first-time-guide">
+          <div class="guide-icon">👋</div>
+          <div class="guide-text">
+            <strong>首次使用？</strong><br>
+            请先启动 cdp-tunnel server，然后点击下方按钮配置连接
+          </div>
+        </div>
+      `;
+      connectionList.innerHTML = guideHtml;
       return;
     }
 

package/extension-new/utils/config.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdp-tunnel",
-  "version": "2.9.3",
+  "version": "2.10.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",
@@ -59,7 +59,6 @@
   "dependencies": {
     "bcryptjs": "^3.0.3",
     "better-sqlite3": "^12.10.0",
-    "cdp-tunnel": "^2.5.17",
     "commander": "^12.0.0",
     "http-proxy": "^1.18.1",
     "jsonwebtoken": "^9.0.3",
@@ -67,6 +66,7 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
+    "chrome-remote-interface": "^0.34.0",
     "husky": "^9.1.7",
     "lz-string": "^1.5.0",
     "pako": "^2.1.0",

package/server/proxy-server.js

@@ -350,7 +350,8 @@ async function handleHttpRequest(req, res) {
             'User-Agent': userAgent,
             'V8-Version': ver?.jsVersion || '',
             'WebKit-Version': '537.36',
-            webSocketDebuggerUrl: `ws://${getHost(req)}/devtools/browser/${browserId}`
+            webSocketDebuggerUrl: `ws://${getHost(req)}/devtools/browser/${browserId}`,
+            totalPlugins: pluginConnections.size
         };
         res.writeHead(200, { 'Content-Type': 'application/json' });
         res.end(JSON.stringify(payload));