cdp-tunnel 2.9.4 → 2.10.1

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/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "CDP Bridge",
-  "version": "2.9.4",
+  "version": "2.10.1",
   "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.4",
+  "version": "2.10.1",
   "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",

package/server/proxy-server.js

@@ -1165,6 +1165,16 @@ function forwardToPlugin(clientWs, data, clientId) {
  * 处理 CDP 客户端连接 (Playwright/Puppeteer)
  */
 function handleClientConnection(ws, clientInfo, customClientId = null, targetPluginId = null, mode = 'create') {
+    if (mode === 'takeover') {
+        for (const client of clientConnections) {
+            if (client.mode === 'takeover' && client.readyState === WebSocket.OPEN) {
+                console.log('[TAKEOVER] Rejected: takeover mode already has a connected client');
+                ws.close(1008, 'Takeover mode already in use. Only one client allowed.');
+                return;
+            }
+        }
+    }
+
     clientConnections.add(ws);
     const id = customClientId || generateId('client');
     ws.mode = mode;