cdp-tunnel 3.6.0 → 3.6.2

package/README.md

@@ -5,220 +5,309 @@
 </p>
 
 <p align="center">
-  <strong>Chrome DevTools Protocol Bridge</strong>
+  <strong>Bridge Chrome's debugger API to WebSocket — control your browser with Playwright/Puppeteer via CDP</strong>
 </p>
 
 <p align="center">
-  A Chrome extension that exposes your browser as a CDP endpoint,<br>
-  supporting multiple Playwright/Puppeteer clients to connect simultaneously.
+  Control your **existing** browser (with your logins, cookies, extensions) via standard CDP protocol.<br>
+  No headless Chrome, no Selenium, no browser restart. Just connect and automate.
 </p>
 
 <p align="center">
-  <a href="docs/README_CN.md">中文文档</a> | 
-  <a href="https://github.com/dyyz1993/cdp-tunnel">GitHub</a>
+  <a href="docs/README_CN.md">中文文档</a> ·
+  <a href="https://www.npmjs.com/package/cdp-tunnel">npm</a> ·
+  <a href="#quick-start">Quick Start</a>
 </p>
 
 <p align="center">
+  <img src="https://img.shields.io/npm/v/cdp-tunnel" alt="npm version">
   <img src="https://img.shields.io/github/stars/dyyz1993/cdp-tunnel?style=social" alt="GitHub stars">
   <img src="https://img.shields.io/github/forks/dyyz1993/cdp-tunnel?style=social" alt="GitHub forks">
-  <img src="https://img.shields.io/github/watchers/dyyz1993/cdp-tunnel?style=social" alt="GitHub watchers">
 </p>
 
 ---
 
+## What It Does
+
+CDP Tunnel lets standard CDP clients (Playwright/Puppeteer/CDP SDK) control your **real Chrome browser** — the one with your logins, cookies, and extensions. It works like `chrome --remote-debugging-port`, but **without restarting Chrome**.
+
+**Key capabilities:**
+- ✅ Control your existing browser (keep logins/cookies/extensions)
+- ✅ Standard CDP protocol — Playwright/Puppeteer work out of the box
+- ✅ Multiple isolated environments (port pool — each port = one independent "browser")
+- ✅ API Key authentication for remote/cloud deployment
+- ✅ Built-in admin console (browser list, key management, CDP operations)
+- ✅ Tab Group isolation — automation tabs never mix with user tabs
+- ✅ Takeover mode — attach to user's existing tabs
+
 ## Architecture
 
 ```
-┌─────────────────────────────────────────────────────────────────┐
-│                        Proxy Server                             │
-│                     (localhost:9221)                            │
-│                                                                 │
-│   /plugin  ←─── Chrome Extension (WebSocket)                    │
-│   HTTP     ←─── Playwright/Puppeteer Clients                    │
-└─────────────────────────────────────────────────────────────────┘
-         ↑              ↑              ↑
-         │              │              │
-    Client 1       Client 2       Client 3
-   (clientId_1)    (clientId_2)    (clientId_3)
+Playwright/Puppeteer                   Chrome Extension
+       │                                     │
+       │ ws://localhost:9221/client          │ ws://localhost:9221/plugin
+       ▼                                     ▼
+  ┌─────────────────────────────────────────────┐
+  │              CDP Tunnel Proxy               │
+  │           (Node.js WebSocket)               │
+  │                                             │
+  │  9221  ── create mode (port pool #0)       │
+  │  9220  ── takeover mode (attach user tabs)  │
+  │  9231+ ── port pool (each = isolated env)  │
+  │  /admin ── web management console          │
+  └─────────────────────────────────────────────┘
+       │                        │
+       ▼                        ▼
+  chrome.debugger API     Tab Group isolation
 ```
 
-## Features
+## Quick Start
 
-- **Multi-client Support** - Multiple Playwright/Puppeteer clients can connect simultaneously
-- **Message Isolation** - Pages created by each client are owned by that client
-- **Configuration Page** - Visualize connection status, client list, and controlled pages
-- **Auto Reconnect** - Extension automatically reconnects to the server
+### 1. Install
 
-## Screenshot
+```bash
+npm install -g cdp-tunnel
+cdp-tunnel setup    # Start server + auto-load extension
+```
 
-![Config Page](docs/config-page-screenshot.png)
+Or run from source:
 
-## Quick Start
+```bash
+git clone https://github.com/dyyz1993/cdp-tunnel.git
+cd cdp-tunnel
+npm install
+node server/proxy-server.js
+```
 
-### Option 1: Install Extension Only (No npm needed)
+### 2. Load Extension
 
-Download and install the Chrome extension directly:
+1. Open `chrome://extensions/`
+2. Enable **Developer mode**
+3. Click **Load unpacked** → select `extension-new/` directory
+4. Extension connects to `ws://localhost:9221/plugin` automatically
 
-1. Download [`cdp-tunnel-extension.zip`](https://github.com/dyyz1993/cdp-tunnel/releases/latest/download/cdp-tunnel-extension.zip) from the latest release
-2. Unzip it
-3. Open `chrome://extensions/` in Chrome
-4. Enable **Developer mode** (top right)
-5. Click **Load unpacked** → select the unzipped folder
-6. Start the proxy server separately (see Option 2 or 3 below)
+### 3. Connect Your Automation
 
-### Option 2: Install via npm (Recommended)
+```javascript
+// Playwright — control your real browser!
+const { chromium } = require('playwright');
+const browser = await chromium.connectOverCDP('http://localhost:9221');
+const page = await browser.contexts()[0].newPage();
+await page.goto('https://www.google.com');
+console.log(await page.title());
+```
 
-```bash
-# One command to set up everything
-npx cdp-tunnel setup
+```python
+# Python Playwright
+from playwright.sync_api import sync_playwright
 
-# Or install globally
-npm install -g cdp-tunnel
-cdp-tunnel setup        # Start server + auto-load extension into Chrome
-cdp-tunnel status       # Check status
-cdp-tunnel diagnose     # Diagnose connection issues
+with sync_playwright() as p:
+    browser = p.chromium.connect_over_cdp("http://localhost:9221")
+    page = browser.contexts[0].new_page()
+    page.goto("https://www.google.com")
+    print(page.title())
 ```
 
-### Option 3: Manual Installation
+## Key Features
+
+### Port Pool — Multiple Isolated Environments
 
-#### 1. Start the Proxy Server
+Each port = one independent "browser" with its own Tab Group. Different ports can't see each other's tabs.
 
 ```bash
-npx cdp-tunnel start
-# or manually:
-npx cdp-tunnel start -p 9221
+# Default ports
+9221  ── Main create port (port pool #0)
+9220  ── Takeover port (attach user's existing tabs)
+9231-9239 ── Port pool (9 isolated environments)
+```
+
+```javascript
+// Each port is independent
+const browserA = await chromium.connectOverCDP('http://localhost:9231');
+const browserB = await chromium.connectOverCDP('http://localhost:9232');
+// browserA and browserB have completely separate tabs
 ```
 
-#### 2. Install Chrome Extension
+### Takeover Mode — Control Existing Tabs
 
-1. Open `chrome://extensions/`
-2. Enable "Developer mode"
-3. Click "Load unpacked"
-4. Select the `extension-new` directory
+Connect to port `9220` to take over the user's already-open tabs (no new Tab Group created).
+
+```javascript
+const browser = await chromium.connectOverCDP('http://localhost:9220');
+// Now you can see and control all user's open tabs
+```
+
+### API Key Authentication (Remote Deployment)
 
-#### 3. Connect the Extension
+Enable authentication for cloud/remote deployment:
 
-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')`.
+```bash
+REQUIRE_AUTH=true node server/proxy-server.js
 
-### 3. Client Connection
+# Create an API key
+node server/saas/key-manager.js create my-browser
+# Output: ws://localhost:9221/plugin?key=cdp_xxxxx
+```
 
 ```javascript
-// Playwright
-const { chromium } = require('playwright');
+// Client connects with key
+const browser = await chromium.connectOverCDP(
+  'ws://your-server.com:9221/client?key=cdp_xxxxx'
+);
+```
 
-const browser = await chromium.connectOverCDP('http://localhost:9221');
-const context = browser.contexts()[0];
-const page = await context.newPage();
-await page.goto('https://example.com');
+**One key = one browser = one isolated Tab Group.** Different keys are completely isolated.
+
+### Admin Console
 
-// Puppeteer
-const puppeteer = require('puppeteer');
+Built-in web UI at `/admin`:
 
-const browser = await puppeteer.connect({
-  browserWSEndpoint: 'ws://localhost:9221'
-});
-const page = await browser.newPage();
-await page.goto('https://example.com');
+```
+http://localhost:9221/admin
 ```
 
-### 4. Using with agent-browser
+Features:
+- 📱 Online browser list (real-time)
+- 🔑 API Key management (create/revoke + copy address)
+- 🔧 Tab management (list/close/switch)
+- ⚡ CDP operations (evaluate JS, screenshot, new tab)
+- 🎬 One-click demo
 
-[agent-browser](https://github.com/nick1udwig/agent-browser) is a browser automation CLI that can connect to CDP Tunnel:
+### Version Check
 
 ```bash
-# Install agent-browser
-npm install -g agent-browser
-
-# Connect to CDP Tunnel
-agent-browser --cdp http://localhost:9221 open https://example.com
+STRICT_VERSION=true node server/proxy-server.js
+# Extension version must match proxy version, otherwise connection rejected
+```
 
-# Take a snapshot
-agent-browser --cdp http://localhost:9221 snapshot -i
+## Remote / Cloud Deployment
 
-# Interact with elements
-agent-browser --cdp http://localhost:9221 click @e1
-agent-browser --cdp http://localhost:9221 fill @e2 "hello"
+CDP Tunnel can be deployed to a VPS for remote browser control:
 
-# Take screenshot
-agent-browser --cdp http://localhost:9221 screenshot output.png
+```
+Remote Client ──wss──▶ Cloud Proxy ──wss──▶ User's Chrome + Extension
 ```
 
-This allows you to control the browser through CDP Tunnel using simple CLI commands.
+See [`docs/DEPLOY-CLOUDFLARE.md`](docs/DEPLOY-CLOUDFLARE.md) for Cloudflare Tunnel setup.
 
-## Multi-client Usage
+Key environment variables:
 
-All clients connect to the same endpoint `http://localhost:9221`. The server automatically assigns a unique `clientId` to each connection.
+| Variable | Default | Description |
+|---|---|---|
+| `PORT` | 9221 | Main create port |
+| `TAKEOVER_PORT` | 9220 | Takeover port |
+| `POOL_START` | 9231 | Port pool start |
+| `POOL_SIZE` | 9 | Number of port pool ports |
+| `REQUIRE_AUTH` | false | Require API key |
+| `STRICT_VERSION` | false | Reject version mismatch |
+| `ADMIN_TOKEN` | (none) | Admin console auth token |
 
-```javascript
-// Multiple clients can connect simultaneously
-const browser1 = await chromium.connectOverCDP('http://localhost:9221');
-const browser2 = await chromium.connectOverCDP('http://localhost:9221');
-const browser3 = await chromium.connectOverCDP('http://localhost:9221');
+## CLI Commands
 
-// Pages created by each client are independent
-const page1 = await browser1.contexts()[0].newPage();
-const page2 = await browser2.contexts()[0].newPage();
-const page3 = await browser3.contexts()[0].newPage();
+```bash
+cdp-tunnel setup      # Start server + load extension
+cdp-tunnel start      # Start server only
+cdp-tunnel stop       # Stop server
+cdp-tunnel status     # Check status
+cdp-tunnel diagnose   # Diagnose connection
+cdp-tunnel extension  # Open extension installation guide
 ```
 
-## Configuration Page
+## API Key Management
 
-Click the extension icon to open the configuration page, where you can view:
-
-- **CDP Client List** - Shows connected Playwright/Puppeteer clients
-- **Controlled Pages List** - Shows controlled pages with click-to-navigate support
-- **Activity Log** - Connection status change records
+```bash
+# Create a key (returns connection address)
+node server/saas/key-manager.js create "张三的浏览器"
 
-## Project Structure
+# List all keys
+node server/saas/key-manager.js list
 
-```
-cdp-tunnel/
-├── server/
-│   └── proxy-server.js      # Proxy server
-├── extension-new/
-│   ├── background.js        # Extension Service Worker
-│   ├── config-page-preview.html  # Configuration page
-│   ├── config-page.js       # Configuration page script
-│   ├── core/
-│   │   ├── state.js         # State management
-│   │   └── websocket.js     # WebSocket connection management
-│   └── features/
-│       ├── cdp-router.js    # CDP message routing
-│       └── screencast.js    # Screenshot functionality
-└── tests/
-    ├── playwright-single.js      # Single client test
-    ├── playwright-multi.js       # Multi-client test
-    └── playwright-interactive.js # Interactive test
+# Revoke a key
+node server/saas/key-manager.js revoke <keyId>
 ```
 
 ## Testing
 
 ```bash
-# Single client test
-node tests/playwright-single.js
+# Smoke tests (runs before every commit via husky pre-commit)
+node tests/e2e/run-all.js
+
+# A/B Gate (compare with direct Chrome CDP)
+node tests/e2e/test-ab-gate.js
 
-# Multi-client test
-node tests/playwright-multi.js
+# Key isolation test
+node tests/e2e/test-key-isolation.js
 
-# Interactive test
-node tests/playwright-interactive.js
+# Admin console test
+node tests/e2e/test-admin-console.js
+
+# Production deployment verification
+PROD_WSS=wss://your-server:port PROD_KEY=cdp_xxx node tests/e2e/test-prod-deploy.js
 ```
 
-## Notes
+## How It Works
 
-1. **Port Availability** - Ensure port 9221 is not in use
-2. **Extension Permissions** - The extension requires `debugger`, `tabs`, and other permissions
-3. **Browser Limitation** - Only one extension can control a browser via debugger at a time
+CDP Tunnel uses Chrome's `chrome.debugger` API (available to extensions) to bridge CDP commands:
 
-## License
+```
+Playwright command (e.g., Page.navigate)
+  → CDP Tunnel Proxy (WebSocket)
+  → Chrome Extension (chrome.debugger.attach)
+  → Chrome renders the page
+  → Events flow back: Chrome → Extension → Proxy → Playwright
+```
+
+The extension acts as the bridge — it receives CDP commands via WebSocket and executes them via `chrome.debugger`. This means:
+- Your browser keeps all logins, cookies, extensions
+- No need to restart Chrome or use `--remote-debugging-port`
+- Works with regular Chrome (not just Chromium)
+
+**Synthetic input handling:** Chrome throttles synthetic events (keyboard/mouse) on non-active tabs. CDP Tunnel automatically calls `Page.bringToFront` before synthetic input commands, making it transparent to Playwright/Puppeteer.
 
-This project is licensed under the Apache License 2.0 with Attribution Requirement.
+## Project Structure
+
+```
+cdp-tunnel/
+├── server/
+│   ├── proxy-server.js          # Main proxy server
+│   ├── modules/
+│   │   ├── config.js            # Port configuration
+│   │   └── port-pool.js         # Port pool manager (v3.0+)
+│   ├── saas/
+│   │   ├── auth.js              # API Key + JWT authentication
+│   │   ├── key-manager.js       # Key management CLI
+│   │   └── db.js                # SQLite database
+│   └── admin-console.html       # Admin web UI
+├── extension-new/               # Chrome Extension (Manifest V3)
+│   ├── background.js            # Service Worker
+│   ├── core/
+│   │   ├── websocket.js         # WebSocket connection
+│   │   ├── connection-state.js  # State management
+│   │   └── connection-manager.js# Multi-connection
+│   ├── cdp/
+│   │   ├── handler/
+│   │   │   ├── special.js       # Tab grouping logic
+│   │   │   └── forward.js       # CDP command forwarding
+│   │   └── response.js          # CDP response builder
+│   └── utils/
+│       ├── config.js            # Extension config
+│       └── helpers.js           # Group naming/color
+├── cli/                         # CLI tool
+├── tests/e2e/                   # E2E tests
+└── docs/                        # Documentation
+```
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for version history.
+
+## License
 
-See [LICENSE](LICENSE) for details.
+Apache License 2.0 with Attribution Requirement. See [LICENSE](LICENSE).
 
 ---
 
-If you use this project in your work, please include attribution:
+If you use this project, please include attribution:
 - Project: CDP Tunnel
 - Author: dyyz1993
 - Source: https://github.com/dyyz1993/cdp-tunnel

package/extension-new/background.js

@@ -76,7 +76,6 @@ importScripts('features/automation-badge.js');
         var primary = ConnectionManager.getPrimaryConnection();
         if (primary && result.currentTabId != null) {
           primary.state.currentTabId = result.currentTabId;
-          primary.state.isAttached = result.isAttached;
         }
 
         ConnectionManager.connectAll();
@@ -196,9 +195,14 @@ importScripts('features/automation-badge.js');
   }
 
   chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-    if (changeInfo.status === 'complete') {
+    if (changeInfo.status === 'complete' || changeInfo.title) {
       var entry = ConnectionManager.getConnectionByTabId(tabId);
       if (entry && entry.state.isTabAttached(tabId)) {
+        LocalHandler.getTargetInfoById(String(tabId)).then(function(targetInfo) {
+          if (targetInfo) {
+            EventBuilder.send('Target.targetInfoChanged', { targetInfo: targetInfo }, null, entry.wsManager);
+          }
+        });
       }
     }
 

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

@@ -29,7 +29,7 @@ var ForwardHandler = (function() {
 
     Logger.debug('[Forward]', method, '-> tabId:', tabId);
 
-    // 合成输入事件需要页面 visible：先 ensureVisible 再发命令
+    // 合成输入事件 + 带 clip 的元素截图需要页面 visible：先 ensureVisible 再发命令
     if (SYNTHETIC_INPUT_METHODS.indexOf(method) >= 0) {
       return ensureVisible(tabId).then(function() {
         return chrome.debugger.sendCommand({ tabId: tabId }, method, params);
@@ -38,6 +38,15 @@ var ForwardHandler = (function() {
       });
     }
 
+    // 元素级截图（带 clip）在 hidden 状态下可能返回空数据，需要 ensureVisible 确保渲染完成
+    if (method === 'Page.captureScreenshot' && params && params.clip) {
+      return ensureVisible(tabId).then(function() {
+        return chrome.debugger.sendCommand({ tabId: tabId }, method, params);
+      }).then(function(result) {
+        return result || {};
+      });
+    }
+
     return chrome.debugger.sendCommand({ tabId: tabId }, method, params).then(function(result) {
       return result || {};
     });

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

@@ -5,6 +5,12 @@ var LocalHandler = (function() {
 
   function _getConnectionTag(ctx) {
     var wm = ctx._wsManager;
+    var state = ctx._state;
+    var clientId = ctx.clientId;
+    if (state && clientId && state.getTagForClient) {
+      var tag = state.getTagForClient(clientId);
+      if (tag) return tag;
+    }
     return (wm && wm.config && wm.config.tag) || null;
   }
 
@@ -32,11 +38,29 @@ var LocalHandler = (function() {
     };
   }
 
-  function getWindowBounds() {
-    return {
-      bounds: { left: 0, top: 0, width: 1920, height: 1080, windowState: 'normal' }
-    };
-  }
+	function getWindowBounds() {
+		return {
+			bounds: { left: 0, top: 0, width: 1920, height: 1080, windowState: 'normal' }
+		};
+	}
+
+	/**
+	 * Browser.setWindowBounds — 设置窗口位置/大小，支持 focused。
+	 * 当 bounds.focused = true 时，用 Chrome 扩展 API 将窗口弹到前台。
+	 * 这是跨平台最可靠的方式（替代 CDP 原生 setWindowBounds 在 macOS 上的限制）。
+	 */
+	function setWindowBounds(context) {
+		var params = context ? context.params : null;
+		var bounds = params ? params.bounds : null;
+		if (bounds && bounds.focused) {
+			chrome.windows.getCurrent(function(w) {
+				if (w && w.id) {
+					chrome.windows.update(w.id, { focused: true });
+				}
+			});
+		}
+		return {};
+	}
 
   function targetSetDiscoverTargets(context) {
     var state = _getState(context);
@@ -517,7 +541,8 @@ var LocalHandler = (function() {
     browserGetVersion: browserGetVersion,
     browserClose: browserClose,
     getWindowForTarget: getWindowForTarget,
-    getWindowBounds: getWindowBounds,
+	    getWindowBounds: getWindowBounds,
+	    setWindowBounds: setWindowBounds,
     targetSetDiscoverTargets: targetSetDiscoverTargets,
     targetGetTargets: targetGetTargets,
     targetGetTargetInfo: targetGetTargetInfo,

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

@@ -785,14 +785,6 @@ function checkTabVisibility(tabId) {
     });
   }
 
-  function pageCreateIsolatedWorld(context) {
-    return ForwardHandler.execute(context);
-  }
-
-  function pageAddScriptToEvaluateOnNewDocument(context) {
-    return ForwardHandler.execute(context);
-  }
-
   function domSetFileInputFiles(context) {
     var params = context.params;
     var sessionId = context.sessionId;
@@ -899,8 +891,6 @@ function checkTabVisibility(tabId) {
     pageStartScreencast: pageStartScreencast,
     pageStopScreencast: pageStopScreencast,
     pageScreencastFrameAck: pageScreencastFrameAck,
-    pageCreateIsolatedWorld: pageCreateIsolatedWorld,
-    pageAddScriptToEvaluateOnNewDocument: pageAddScriptToEvaluateOnNewDocument,
     runtimeRunIfWaitingForDebugger: runtimeRunIfWaitingForDebugger,
     domSetFileInputFiles: domSetFileInputFiles,
     updateTabGroupName: updateTabGroupName,

package/extension-new/cdp/index.js

@@ -5,7 +5,7 @@ var CDP_HANDLERS = {
   'Browser.crash': { type: 'LOCAL', handler: LocalHandler.emptyResult },
   'Browser.crashGpuProcess': { type: 'LOCAL', handler: LocalHandler.emptyResult },
   'Browser.getWindowForTarget': { type: 'LOCAL', handler: LocalHandler.getWindowForTarget },
-  'Browser.setWindowBounds': { type: 'LOCAL', handler: LocalHandler.emptyResult },
+	'Browser.setWindowBounds': { type: 'LOCAL', handler: LocalHandler.setWindowBounds },
   'Browser.getWindowBounds': { type: 'LOCAL', handler: LocalHandler.getWindowBounds },
   'Browser.getBrowserCommandLine': { type: 'LOCAL', handler: LocalHandler.emptyArray },
   'Browser.getHistograms': { type: 'LOCAL', handler: LocalHandler.emptyArray },
@@ -50,8 +50,6 @@ var CDP_HANDLERS = {
   'Page.startScreencast': { type: 'SPECIAL', handler: SpecialHandler.pageStartScreencast },
   'Page.stopScreencast': { type: 'SPECIAL', handler: SpecialHandler.pageStopScreencast },
   'Page.screencastFrameAck': { type: 'SPECIAL', handler: SpecialHandler.pageScreencastFrameAck },
-  'Page.createIsolatedWorld': { type: 'FORWARD', handler: SpecialHandler.pageCreateIsolatedWorld },
-  'Page.addScriptToEvaluateOnNewDocument': { type: 'FORWARD', handler: SpecialHandler.pageAddScriptToEvaluateOnNewDocument },
 
   'Runtime.runIfWaitingForDebugger': { type: 'SPECIAL', handler: SpecialHandler.runtimeRunIfWaitingForDebugger },
 

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

@@ -1,14 +1,12 @@
 function ConnectionState(connectionId, mode) {
   this.connectionId = connectionId;
   this.mode = mode || 'create';
-  this.connectionTag = null;
   this.clientIdToTag = new Map();
   this.ws = null;
   this.reconnectTimer = null;
   this._hasConnectedClient = false;
   this.cdpClients = [];
   this.currentTabId = null;
-  this.isAttached = false;
 
   this.sessionIdToTabId = new Map();
   this.sessionIdToTargetId = new Map();
@@ -372,18 +370,7 @@ ConnectionState.prototype.clearAllState = function() {
 
 ConnectionState.prototype.persist = function(tabId, attached) {
   this.currentTabId = tabId;
-  this.isAttached = attached;
   return new Promise(function(resolve) {
     chrome.storage.local.set({ currentTabId: tabId, isAttached: attached }, resolve);
   }.bind(this));
 };
-
-ConnectionState.prototype.loadPersisted = function() {
-  return new Promise(function(resolve) {
-    chrome.storage.local.get(['currentTabId', 'isAttached'], function(result) {
-      this.currentTabId = result.currentTabId || null;
-      this.isAttached = result.isAttached || false;
-      resolve(result);
-    }.bind(this));
-  }.bind(this));
-};

package/extension-new/core/debugger.js

@@ -187,10 +187,6 @@ var DebuggerManager = (function() {
       });
   }
 
-  function isAttached(tabId) {
-    return getActualAttachState(tabId);
-  }
-
   function getActualAttachState(tabId) {
     return chrome.debugger.getTargets().then(function(targets) {
       var target = targets.find(function(t) {
@@ -364,7 +360,6 @@ var DebuggerManager = (function() {
   return {
     attach: attach,
     detach: detach,
-    isAttached: isAttached,
     getActualAttachState: getActualAttachState,
     handleDebuggerEvent: handleDebuggerEvent,
     handleDetach: handleDetach

package/extension-new/core/state.js

@@ -62,14 +62,6 @@ var State = (function() {
     });
   }
 
-  function persist(tabId, attached) {
-    _state.currentTabId = tabId;
-    _state.isAttached = attached;
-    return new Promise(function(resolve) {
-      chrome.storage.local.set({ currentTabId: tabId, isAttached: attached }, resolve);
-    });
-  }
-
   function isTabAttached(tabId) {
     var entry = ConnectionManager.getConnectionByTabId(tabId);
     return entry ? entry.state.isTabAttached(tabId) : false;

package/extension-new/core/websocket.js

@@ -343,21 +343,6 @@ var WebSocketConnection = (function() {
         self._handleServerRestart();
         break;
 
-      case 'cdp':
-        if (method) {
-          routeCDPCommand({
-            id: id,
-            method: method,
-            params: params,
-            tabId: tabId,
-            sessionId: sessionId,
-            clientId: message.__clientId,
-            mode: message.__mode,
-            connectionId: self.connectionId
-          }, self.state, self);
-        }
-        break;
-
       default:
         if (method) {
           routeCDPCommand({

package/extension-new/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "CDP Bridge",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "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:14576/plugin',
+  WS_URL: 'ws://localhost:51100/plugin',
   RECONNECT_DELAY: 3000,
   DEBUGGER_VERSION: '1.3',
   HEARTBEAT_INTERVAL: 25000,

package/package.json

@@ -1,20 +1,13 @@
 {
   "name": "cdp-tunnel",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "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",
+  "bin": {
+    "cdp-tunnel": "./cli/index.js"
+  },
   "scripts": {
     "start": "node server/proxy-server.js",
-    "client": "node client/playwright-client.js",
-    "client:puppeteer": "node client/puppeteer-client.js",
-    "test:compat": "node client/test-compat-client.js",
-    "test:newpage": "node client/test-newpage-sequence.js",
-    "record": "node cdp-recorder/record.js",
-    "benchmark": "node benchmark/run-all.js",
-    "benchmark:native": "node benchmark/run-all.js --native",
-    "benchmark:proxy": "node benchmark/run-all.js --proxy",
-    "demo": "node demo/server.js",
     "test:compare": "node tests/cdp-compare/cdp-compare-runner.js",
     "test": "node tests/e2e/run-all.js",
     "test:e2e": "node tests/e2e/run-all.js",
@@ -68,11 +61,6 @@
   "devDependencies": {
     "chrome-remote-interface": "^0.34.0",
     "husky": "^9.1.7",
-    "lz-string": "^1.5.0",
-    "pako": "^2.1.0",
-    "playwright": "^1.58.2",
-    "playwright-core": "^1.58.2",
-    "puppeteer-core": "^22.0.0",
-    "sharp": "^0.34.0"
+    "playwright": "^1.58.2"
   }
 }

package/server/modules/port-pool.js

@@ -143,8 +143,6 @@ class PortPoolManager {
     server.listen(port, '0.0.0.0', () => {
       console.log(`[CREATE PORT ${portIndex}] Listening on ${port}`);
     });
-
-    this.createServers[portIndex] = server;
   }
 
   _startTakeoverPort() {
@@ -336,7 +334,15 @@ class PortPoolManager {
 
     ws.on('close', () => {
       session.clients.delete(ws);
-      console.log(`[PORT ${session.port}] Client disconnected (remaining: ${session.clients.size})`);
+      // 内存泄漏修复：清理该 client 的 pendingRequests 和 sessionToClient 引用，
+      // 避免 plugin 永不响应时 entry 一直挂着 ws 对象
+      if (ws._origIds) ws._origIds.clear();
+      for (const [reqId, pending] of session.pendingRequests.entries()) {
+        if (pending.clientWs === ws) session.pendingRequests.delete(reqId);
+      }
+      for (const [sid, cws] of session.sessionToClient.entries()) {
+        if (cws === ws) session.sessionToClient.delete(sid);
+      }
       // 对齐原生 Chrome：断开不清理 tab
     });
 
@@ -483,6 +489,34 @@ class PortPoolManager {
         }
       }
 
+      // 内存泄漏修复：target 销毁/detach 时清理 sessionToPort、targetToPort、sessionToClient
+      // 之前只在 closeTarget 响应路径清理，事件路径漏了 → sessionToPort 无界增长
+      if (msg.method === 'Target.targetDestroyed' && targetId) {
+        const portIdx = this.targetToPort.get(targetId);
+        this.targetToPort.delete(targetId);
+        if (portIdx !== undefined) {
+          const sess = this.portSessions[portIdx];
+          if (sess) {
+            sess.targetIds.delete(targetId);
+            sess.targetUrls.delete(targetId);
+          }
+        }
+      }
+      if (msg.method === 'Target.detachedFromTarget') {
+        const sid = msg.params.sessionId;
+        if (sid) {
+          this.sessionToPort.delete(sid);
+          const portIdx = this.sessionToPort.get(sid);
+          if (portIdx !== undefined && this.portSessions[portIdx]) {
+            this.portSessions[portIdx].sessionToClient.delete(sid);
+          }
+        }
+        if (targetId) {
+          // detach 也意味着 target 不再活跃，清理 targetToPort（保留 targetIds 历史用于 list）
+          this.targetToPort.delete(targetId);
+        }
+      }
+
       if (targetId) {
         const portIndex = this.targetToPort.get(targetId);
         if (portIndex !== undefined) {

package/server/proxy-server.js

@@ -158,7 +158,19 @@ function updateExtensionState(connected) {
 clearLog();
 
 const wss = new WebSocket.Server({ noServer: true });
-const server = http.createServer((req, res) => handleHttpRequest(req, res));
+const server = http.createServer(async (req, res) => {
+    try {
+        await handleHttpRequest(req, res);
+    } catch (err) {
+        logCDP('error', 'Unhandled error in handleHttpRequest', { url: req.url, message: err.message });
+        if (!res.headersSent) {
+            try {
+                res.writeHead(500, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({ error: 'Internal proxy error' }));
+            } catch (_) {}
+        }
+    }
+});
 
 const pluginConnections = new Set();
 const clientConnections = new Set();
@@ -166,7 +178,6 @@ const clientConnections = new Set();
 class PluginNamespace {
     constructor() {
         this.sessionToClientId = new Map();
-        this.pendingAttachRequests = new Map();
         this.pendingAttachedEvents = new Map();
         this.pendingTargetCreatedEvents = new Map();
         this.targetIdToClientId = new Map();
@@ -237,8 +248,6 @@ async function requestVersionFromPlugin(pluginWs) {
 
     return new Promise((resolve) => {
         const requestId = `version_${Date.now()}`;
-        const timeout = setTimeout(() => resolve(null), 2000);
-
         const handler = (data) => {
             try {
                 const msg = JSON.parse(data.toString());
@@ -252,9 +261,13 @@ async function requestVersionFromPlugin(pluginWs) {
                 }
             } catch (e) {}
         };
+        const timeout = setTimeout(() => {
+            pluginWs.off('message', handler);
+            resolve(null);
+        }, 2000);
 
         pluginWs.on('message', handler);
-        pluginWs.send(JSON.stringify({ id: requestId, method: 'Browser.getVersion' }));
+        safeSend(pluginWs, JSON.stringify({ id: requestId, method: 'Browser.getVersion' }), 'plugin');
     });
 }
 
@@ -276,10 +289,6 @@ async function requestTargetsFromPlugin(pluginWs) {
 
     return new Promise((resolve) => {
         const requestId = `targets_${Date.now()}`;
-        const timeout = setTimeout(() => {
-            resolve(ns.cachedTargets);
-        }, CONFIG.TARGETS_REQUEST_TIMEOUT);
-
         const handler = (data) => {
             try {
                 const msg = JSON.parse(data.toString());
@@ -292,9 +301,13 @@ async function requestTargetsFromPlugin(pluginWs) {
                 }
             } catch (e) {}
         };
+        const timeout = setTimeout(() => {
+            pluginWs.off('message', handler);
+            resolve(ns.cachedTargets);
+        }, CONFIG.TARGETS_REQUEST_TIMEOUT);
 
         pluginWs.on('message', handler);
-        pluginWs.send(JSON.stringify({ id: requestId, method: 'Target.getTargets' }));
+        safeSend(pluginWs, JSON.stringify({ id: requestId, method: 'Target.getTargets' }), 'plugin');
     });
 }
 
@@ -440,9 +453,7 @@ async function execCdpViaPlugin(pluginId, params) {
             }
         }
         // 发 client-disconnected 让扩展关分组 + 关 tab
-        try {
-            pluginWs.send(JSON.stringify({ type: 'client-disconnected', clientId }));
-        } catch (e) {}
+        safeSend(pluginWs, JSON.stringify({ type: 'client-disconnected', clientId }), 'plugin');
         // 清理 key session（让下次连接重新分配）
         if (pluginWs.apiKey && portPool) {
             portPool.keySessions.delete(pluginWs.apiKey);
@@ -953,12 +964,10 @@ function cleanupPlugin(ws, id, reason) {
             }
             clientWs.pairedPlugin = null;
             affectedClients.push(clientWs.id);
-            if (clientWs.readyState === WebSocket.OPEN) {
-                clientWs.send(JSON.stringify({
-                    type: 'plugin-disconnected',
-                    message: 'Plugin connection lost'
-                }));
-            }
+            safeSend(clientWs, JSON.stringify({
+                type: 'plugin-disconnected',
+                message: 'Plugin connection lost'
+            }), 'client');
         }
     });
 
@@ -968,8 +977,7 @@ function cleanupPlugin(ws, id, reason) {
         remainingPlugins: pluginConnections.size,
         affectedClients,
         uptime: ws.connectedAt ? `${((Date.now() - ws.connectedAt) / 1000).toFixed(0)}s` : 'unknown',
-        activeSessions: ns.sessionToClientId.size,
-        pendingRequests: ns.pendingAttachRequests.size
+        activeSessions: ns.sessionToClientId.size
     });
 
     if (ws.pairedClientId) {
@@ -1198,7 +1206,7 @@ function handlePluginConnection(ws, clientInfo, request) {
                 if (eventClientId) {
                     const clientWs = clientById.get(eventClientId);
                     if (clientWs && clientWs.readyState === WebSocket.OPEN) {
-                        clientWs.send(cdpData);
+                        safeSend(clientWs, cdpData, 'client');
                         console.log(`[TARGET EVENT ROUTED] ${parsed.method} targetId=${targetId?.substring(0,8)} -> clientId=${eventClientId}`);
                     }
                 } else if (targetId && (parsed.method === 'Target.targetCreated' || parsed.method === 'Target.attachedToTarget')) {
@@ -1331,7 +1339,7 @@ function handlePluginConnection(ws, clientInfo, request) {
 
                         const cachedCreated = ns.pendingTargetCreatedEvents.get(targetId);
                         if (cachedCreated) {
-                            clientWs.send(cachedCreated.cdpData);
+                            safeSend(clientWs, cachedCreated.cdpData, 'client');
                             console.log(`[TARGET CREATED EVENT] Sent cached Target.targetCreated to client: ${mapping.clientId}`);
                             ns.pendingTargetCreatedEvents.delete(targetId);
                         }
@@ -1350,7 +1358,7 @@ function handlePluginConnection(ws, clientInfo, request) {
                             };
                             const msgStr = JSON.stringify(cdpMsg);
                             console.log(`[ATTACHED EVENT] Full message: ${msgStr}`);
-                            clientWs.send(msgStr);
+                            safeSend(clientWs, msgStr, 'client');
                             console.log(`[ATTACHED EVENT] Sent cached event to client: ${mapping.clientId}`);
                         }
                         const newTargetInfo = cachedCreated?.parsed?.params?.targetInfo
@@ -1385,23 +1393,7 @@ function handlePluginConnection(ws, clientInfo, request) {
                         invalidateTargetsCache(ws);
                     }
                     
-                    if (mapping.isAutoDefaultPage) {
-                        console.log(`[AUTO DEFAULT PAGE] createTarget response received for client=${mapping.clientId}, targetId=${parsed.result?.targetId?.substring(0,8) || 'none'} — skipping response send to client`);
-                        
-                        if (mapping.pendingSetAutoAttach) {
-                            const pending = mapping.pendingSetAutoAttach;
-                            const pendingParsed = pending.parsed;
-                            const pendingClientId = pending.clientId;
-                            
-                            console.log(`[AUTO DEFAULT PAGE] Now forwarding pending setAutoAttach for client=${pendingClientId}`);
-                            
-                            if (ws.readyState === WebSocket.OPEN) {
-                                const forwardMsg = { ...pendingParsed, __clientId: pendingClientId };
-                                ws.send(JSON.stringify(forwardMsg));
-                                console.log(`[SEND TO PLUGIN] Forwarding setAutoAttach for client=${pendingClientId}`);
-                            }
-                        }
-                    } else {
+                    {
                         const originalId = mapping.originalId;
                         parsed.id = originalId;
                         if (mapping.sessionId && !parsed.sessionId) {
@@ -1409,7 +1401,7 @@ function handlePluginConnection(ws, clientInfo, request) {
                         }
                         const responseStr = JSON.stringify(parsed);
                         console.log(`[SEND TO CLIENT] ${responseStr.substring(0, 300)}`);
-                        clientWs.send(responseStr);
+                        safeSend(clientWs, responseStr, 'client');
                         console.log(`[ROUTE] Response global=${globalId} -> original=${originalId} -> client=${mapping.clientId} sessionId=${parsed.sessionId?.substring(0,8) || 'none'}`);
                     }
                 }
@@ -1428,7 +1420,7 @@ function handlePluginConnection(ws, clientInfo, request) {
             if (targetClientId) {
                 const clientWs = clientById.get(targetClientId);
                 if (clientWs && clientWs.readyState === WebSocket.OPEN) {
-                    clientWs.send(data);
+                    safeSend(clientWs, data, 'client');
                     logCDP('DEBUG', `FORWARDED to client: ${targetClientId} (sessionId route)`, parsed?.sessionId);
                 }
             } else {
@@ -1507,52 +1499,6 @@ function handlePluginConnection(ws, clientInfo, request) {
     }));
 }
 
-function autoCreateDefaultPageAndForward(clientWs, setAutoAttachParsed, originalData, clientId, originalRequestId) {
-    const pluginWs = clientWs.pairedPlugin;
-    if (!pluginWs || pluginWs.readyState !== WebSocket.OPEN) {
-        forwardToPlugin(clientWs, originalData, clientId);
-        return;
-    }
-
-    globalRequestIdCounter++;
-    const createGlobalId = globalRequestIdCounter;
-
-    globalRequestIdMap.set(createGlobalId, {
-        clientId: clientId,
-        originalId: -1,
-        sessionId: null,
-        method: 'Target.createTarget',
-        isCreateTarget: true,
-        isAutoDefaultPage: true,
-        pendingSetAutoAttach: {
-            parsed: setAutoAttachParsed,
-            data: originalData,
-            clientId: clientId,
-            originalRequestId: originalRequestId
-        }
-    });
-
-    const request = {
-        id: createGlobalId,
-        method: 'Target.createTarget',
-        params: { url: 'about:blank' },
-        __clientId: clientId
-    };
-
-    console.log(`[AUTO DEFAULT PAGE] Sending Target.createTarget for client=${clientId} globalId=${createGlobalId}, will forward setAutoAttach after`);
-    pluginWs.send(JSON.stringify(request));
-}
-
-function forwardToPlugin(clientWs, data, clientId) {
-    const pluginWs = clientWs.pairedPlugin;
-    if (pluginWs && pluginWs.readyState === WebSocket.OPEN) {
-        console.log(`[SEND TO PLUGIN] method=Target.setAutoAttach clientId=${clientId}`);
-        pluginWs.send(data);
-    } else {
-        broadcastToPlugins(data, clientWs);
-    }
-}
-
 /**
  * 处理 CDP 客户端连接 (Playwright/Puppeteer)
  */
@@ -1626,10 +1572,10 @@ function handleClientConnection(ws, clientInfo, customClientId = null, targetPlu
             
             logConnectionEvent('CLIENT_PAIRED', { clientId: id, pluginId: pluginWs.id });
             
-            pluginWs.send(JSON.stringify({
+            safeSend(pluginWs, JSON.stringify({
                 type: 'client-connected',
                 clientId: id
-            }));
+            }), 'plugin');
             
             broadcastClientList();
         }
@@ -1775,13 +1721,9 @@ function handleClientConnection(ws, clientInfo, customClientId = null, targetPlu
 
         if (parsed && parsed.method === 'Target.setAutoAttach' && parsed.params?.autoAttach && !ws._autoDefaultPageSent) {
             ws._autoDefaultPageSent = true;
-            if (ws.mode === 'takeover') {
-                const takeoverMsg = { ...parsed, __clientId: id, __mode: 'takeover' };
-                if (ws.pairedPlugin && ws.pairedPlugin.readyState === WebSocket.OPEN) {
-                    ws.pairedPlugin.send(JSON.stringify(takeoverMsg));
-                }
-            } else {
-                autoCreateDefaultPageAndForward(ws, parsed, modifiedData, id, originalId);
+            const forwardMsg = { ...parsed, __clientId: id, __mode: ws.mode };
+            if (ws.pairedPlugin && ws.pairedPlugin.readyState === WebSocket.OPEN) {
+                ws.pairedPlugin.send(JSON.stringify(forwardMsg));
             }
             return;
         }
@@ -2154,7 +2096,7 @@ function safeSend(ws, data, label = '') {
     }
 }
 
-setInterval(() => {
+const flushInterval = setInterval(() => {
     messageQueues.forEach((queue, wsId) => {
         let ws = null;
         for (const conn of pluginConnections) {
@@ -2254,7 +2196,7 @@ const heartbeatInterval = setInterval(() => {
     });
 }, CONFIG.HEARTBEAT_INTERVAL);
 
-setInterval(() => {
+const zombieCleanupInterval = setInterval(() => {
     const toRemove = [];
     pluginConnections.forEach(ws => {
         if (ws.readyState !== WebSocket.OPEN) {
@@ -2287,10 +2229,10 @@ wss.on('close', () => {
 /**
  * 定期打印状态
  */
-setInterval(() => {
+const statusPrintInterval = setInterval(() => {
     const now = new Date().toISOString();
     const nowMs = Date.now();
-    
+
     const validPlugins = Array.from(pluginConnections).filter(ws => ws.readyState === WebSocket.OPEN);
     const zombiePlugins = Array.from(pluginConnections).filter(ws => ws.readyState !== WebSocket.OPEN);
     const validClients = Array.from(clientConnections).filter(ws => ws.readyState === WebSocket.OPEN);
@@ -2331,10 +2273,8 @@ setInterval(() => {
     });
     
     let totalSessions = 0;
-    let totalPendingAttach = 0;
     pluginNamespaces.forEach(ns => {
         totalSessions += ns.sessionToClientId.size;
-        totalPendingAttach += ns.pendingAttachRequests.size;
     });
     
     logStatus({
@@ -2346,8 +2286,7 @@ setInterval(() => {
         pairs: connectionPairs.size,
         pluginDetails: pluginList,
         clientDetails: clientList,
-        sessions: totalSessions,
-        pendingAttach: totalPendingAttach
+        sessions: totalSessions
     });
 }, CONFIG.STATUS_PRINT_INTERVAL);
 
@@ -2355,7 +2294,10 @@ setInterval(() => {
 process.on('SIGINT', () => {
     console.log('\n[SERVER] Shutting down (SIGINT)...');
     logCDP('SERVER', 'Shutting down (SIGINT)');
+    clearInterval(flushInterval);
     clearInterval(heartbeatInterval);
+    clearInterval(zombieCleanupInterval);
+    clearInterval(statusPrintInterval);
 
     pluginConnections.forEach(ws => ws.close(1001, 'Server shutting down'));
     clientConnections.forEach(ws => ws.close(1001, 'Server shutting down'));
@@ -2370,6 +2312,10 @@ process.on('SIGINT', () => {
 process.on('SIGTERM', () => {
     console.log('[SERVER] Shutting down (SIGTERM)...');
     logCDP('SERVER', 'Shutting down (SIGTERM)');
+    clearInterval(flushInterval);
+    clearInterval(heartbeatInterval);
+    clearInterval(zombieCleanupInterval);
+    clearInterval(statusPrintInterval);
     flushAllLogs();
     process.exit(0);
 });
@@ -2424,11 +2370,6 @@ portPool = new PortPoolManager({
         if (!apiKey) return false;
         return !!validateApiKey(apiKey);
     },
-    handlePluginUpgrade: (req, socket, head) => {
-        wss.handleUpgrade(req, socket, head, (ws) => {
-            wss.emit('connection', ws, req);
-        });
-    },
     handleTakeoverUpgrade: (req, socket, head) => {
         req._takeoverMode = true;
         const url = new URL(req.url, `http://localhost:${CONFIG.TAKEOVER_PORT}`);
@@ -2448,22 +2389,6 @@ portPool = new PortPoolManager({
         wss.handleUpgrade(req, socket, head, (ws) => {
             wss.emit('connection', ws, req);
         });
-    },
-    getAllTargets: async (portIndex) => {
-        const session = portPool.portSessions[portIndex];
-        if (!session) return [];
-        // 从主 proxy 的 namespace 拿所有 target，过滤出这个端口的
-        const targets = [];
-        for (const [, ns] of pluginNamespaces) {
-            if (ns.cachedTargets) {
-                for (const t of ns.cachedTargets) {
-                    if (session.targetIds.has(t.targetId)) {
-                        targets.push(t);
-                    }
-                }
-            }
-        }
-        return targets;
     }
 });
 portPool.start();