cdp-tunnel 1.0.0

package/cli/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4285f4"/>
+      <stop offset="100%" style="stop-color:#34a853"/>
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="24" fill="url(#bg)"/>
+  <circle cx="35" cy="64" r="18" fill="white"/>
+  <circle cx="93" cy="64" r="18" fill="white"/>
+  <rect x="35" y="56" width="58" height="16" fill="white"/>
+  <circle cx="64" cy="35" r="8" fill="white"/>
+</svg>

package/cli/index.js

@@ -0,0 +1,357 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const { spawn, execSync } = require('child_process');
+
+const CONFIG_DIR = path.join(os.homedir(), '.cdp-tunnel');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+const PID_FILE = path.join(CONFIG_DIR, 'server.pid');
+const LOG_FILE = path.join(CONFIG_DIR, 'server.log');
+const EXTENSION_STATE_FILE = path.join(CONFIG_DIR, 'extension-state.json');
+
+const program = new Command();
+
+program
+  .name('cdp-tunnel')
+  .description('Chrome DevTools Protocol Tunnel')
+  .version('1.0.0');
+
+function log(color, ...args) {
+  const colors = {
+    green: '\x1b[32m',
+    red: '\x1b[31m',
+    yellow: '\x1b[33m',
+    cyan: '\x1b[36m',
+    gray: '\x1b[90m',
+    bold: '\x1b[1m',
+    reset: '\x1b[0m'
+  };
+  console.log(colors[color] || '', ...args, colors.reset);
+}
+
+function ensureConfigDir() {
+  if (!fs.existsSync(CONFIG_DIR)) {
+    fs.mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+}
+
+function getConfig() {
+  ensureConfigDir();
+  if (fs.existsSync(CONFIG_FILE)) {
+    return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
+  }
+  return { port: 9221 };
+}
+
+function saveConfig(config) {
+  ensureConfigDir();
+  fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
+}
+
+function isServerRunning() {
+  if (!fs.existsSync(PID_FILE)) return false;
+  const pid = parseInt(fs.readFileSync(PID_FILE, 'utf8'));
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    fs.unlinkSync(PID_FILE);
+    return false;
+  }
+}
+
+function getServerPid() {
+  if (!fs.existsSync(PID_FILE)) return null;
+  return parseInt(fs.readFileSync(PID_FILE, 'utf8'));
+}
+
+function checkChromeExtension() {
+  if (!fs.existsSync(EXTENSION_STATE_FILE)) {
+    return { installed: false };
+  }
+  
+  try {
+    const state = JSON.parse(fs.readFileSync(EXTENSION_STATE_FILE, 'utf8'));
+    // 检查连接状态，允许5分钟的时间差容错
+    const timeDiff = Math.abs(Date.now() - state.lastSeen);
+    if (state.connected && timeDiff < 300000) {
+      return { installed: true, connected: true };
+    }
+    return { installed: true, connected: false };
+  } catch (e) {
+    return { installed: false };
+  }
+}
+
+function getExtensionPath() {
+  const cliDir = __dirname;
+  return path.join(cliDir, '..', 'extension-new');
+}
+
+function printExtensionGuide() {
+  const extPath = getExtensionPath();
+  
+  console.log('');
+  log('yellow', '❌ Chrome 扩展未安装');
+  console.log('');
+  log('bold', '请按以下步骤安装：');
+  console.log('');
+  log('cyan', '  1.'), console.log(' 已自动打开 Chrome 扩展页面');
+  log('cyan', '  2.'), console.log(' 开启右上角「开发者模式」');
+  log('cyan', '  3.'), console.log(' 点击「加载已解压的扩展程序」');
+  log('cyan', '  4.'), console.log(' 选择以下目录：');
+  console.log('');
+  log('gray', '    ' + extPath);
+  console.log('');
+  log('cyan', '  5.'), console.log(' 安装完成后，点击扩展图标连接服务器');
+  console.log('');
+}
+
+function openChromeExtensions() {
+  const platform = os.platform();
+  
+  try {
+    if (platform === 'darwin') {
+      execSync('open "chrome://extensions/"');
+    } else if (platform === 'win32') {
+      execSync('start chrome://extensions/');
+    } else {
+      execSync('xdg-open "chrome://extensions/"');
+    }
+  } catch (e) {
+    console.log('请手动打开: chrome://extensions/');
+  }
+}
+
+program
+  .command('start')
+  .description('启动 CDP Tunnel 服务器')
+  .option('-p, --port <port>', '指定端口', parseInt)
+  .action((options) => {
+    const config = getConfig();
+    const port = options.port || config.port;
+    
+    if (isServerRunning()) {
+      console.log('');
+      log('yellow', '⚠️  服务器已在运行');
+      log('cyan', '   端口: ') + console.log(port);
+      log('cyan', '   PID:  ') + console.log(getServerPid());
+      return;
+    }
+    
+    const extStatus = checkChromeExtension();
+    if (!extStatus.installed) {
+      printExtensionGuide();
+      openChromeExtensions();
+    }
+    
+    ensureConfigDir();
+    
+    const serverPath = path.join(__dirname, '..', 'server', 'proxy-server.js');
+    
+    const child = spawn('node', [serverPath], {
+      detached: true,
+      stdio: ['ignore', fs.openSync(LOG_FILE, 'a'), fs.openSync(LOG_FILE, 'a')],
+      env: { ...process.env, PORT: port.toString() }
+    });
+    
+    child.unref();
+    
+    fs.writeFileSync(PID_FILE, child.pid.toString());
+    
+    if (port !== config.port) {
+      config.port = port;
+      saveConfig(config);
+    }
+    
+    console.log('');
+    log('green', '✓ CDP Tunnel 服务器已启动');
+    console.log('');
+    console.log('  端口: ' + port);
+    console.log('  插件: ws://localhost:' + port + '/plugin');
+    console.log('  CDP:  http://localhost:' + port);
+    console.log('');
+    log('gray', '  日志: ' + LOG_FILE);
+    console.log('');
+    
+    if (!extStatus.installed) {
+      console.log('请先安装扩展，然后点击扩展图标连接服务器');
+      console.log('');
+    }
+  });
+
+program
+  .command('stop')
+  .description('停止 CDP Tunnel 服务器')
+  .action(() => {
+    if (!isServerRunning()) {
+      log('yellow', '⚠️  服务器未运行');
+      return;
+    }
+    
+    const pid = getServerPid();
+    try {
+      process.kill(pid, 'SIGTERM');
+      fs.unlinkSync(PID_FILE);
+      log('green', '✓ 服务器已停止');
+    } catch (e) {
+      log('red', '✗ 停止服务器失败: ' + e.message);
+    }
+  });
+
+program
+  .command('status')
+  .description('查看服务器状态')
+  .action(() => {
+    const config = getConfig();
+    const running = isServerRunning();
+    const extStatus = checkChromeExtension();
+    
+    console.log('');
+    console.log('CDP Tunnel 状态');
+    console.log('─'.repeat(30));
+    console.log('');
+    console.log('  服务器: ' + (running ? '\x1b[32m运行中\x1b[0m' : '\x1b[31m已停止\x1b[0m'));
+    console.log('  端口:   ' + config.port);
+    
+    if (running) {
+      console.log('  PID:    ' + getServerPid());
+      console.log('  CDP:    http://localhost:' + config.port);
+    }
+    
+    console.log('');
+    if (extStatus.installed && extStatus.connected) {
+      console.log('  扩展:   \x1b[32m已连接\x1b[0m');
+    } else if (extStatus.installed) {
+      console.log('  扩展:   \x1b[33m已安装但未连接\x1b[0m');
+      console.log('  提示:   请点击扩展图标连接服务器');
+    } else {
+      console.log('  扩展:   \x1b[31m未安装\x1b[0m');
+      console.log('  提示:   运行 cdp-tunnel extension 安装扩展');
+    }
+    console.log('');
+  });
+
+function generateGuideHtml() {
+  const extensionPath = path.join(__dirname, '..', 'extension-new');
+  const realPath = fs.realpathSync(extensionPath);
+  
+  const templatePath = path.join(__dirname, 'guide.html');
+  let html = fs.readFileSync(templatePath, 'utf8');
+  
+  // 替换路径占位符
+  html = html.replace(
+    /{{EXTENSION_PATH}}/g,
+    realPath
+  );
+  
+  // 生成临时 HTML 文件
+  const tempHtmlPath = path.join(CONFIG_DIR, 'guide.html');
+  ensureConfigDir();
+  fs.writeFileSync(tempHtmlPath, html);
+  
+  // 复制 icon 文件到同一目录
+  const iconSource = path.join(__dirname, 'icon128.png');
+  const iconTarget = path.join(CONFIG_DIR, 'icon128.png');
+  if (fs.existsSync(iconSource)) {
+    fs.copyFileSync(iconSource, iconTarget);
+  }
+  
+  return tempHtmlPath;
+}
+
+program
+  .command('extension')
+  .description('检测/安装 Chrome 扩展')
+  .action(() => {
+    const extStatus = checkChromeExtension();
+    
+    if (extStatus.installed && extStatus.connected) {
+      log('green', '✓ Chrome 扩展已连接');
+      return;
+    }
+    
+    if (extStatus.installed) {
+      log('yellow', '⚠️  扩展已安装但未连接');
+      console.log('正在打开连接指南...');
+      
+      const guidePath = generateGuideHtml();
+      const platform = os.platform();
+      
+      try {
+        if (platform === 'darwin') {
+          execSync('open "' + guidePath + '"');
+        } else if (platform === 'win32') {
+          execSync('start "" "' + guidePath + '"');
+        } else {
+          execSync('xdg-open "' + guidePath + '"');
+        }
+        console.log('已打开连接指南页面');
+      } catch (e) {
+        console.log('请手动打开: ' + guidePath);
+      }
+      return;
+    }
+    
+    // 扩展未安装，生成指南并打开
+    console.log('');
+    log('yellow', '⚠️  Chrome 扩展未安装');
+    console.log('');
+    console.log('正在打开安装指南...');
+    
+    const guidePath = generateGuideHtml();
+    const platform = os.platform();
+    
+    try {
+      if (platform === 'darwin') {
+        execSync('open "' + guidePath + '"');
+      } else if (platform === 'win32') {
+        execSync('start "" "' + guidePath + '"');
+      } else {
+        execSync('xdg-open "' + guidePath + '"');
+      }
+      console.log('已打开安装指南页面');
+    } catch (e) {
+      console.log('请手动打开: ' + guidePath);
+    }
+  });
+
+program
+  .command('config')
+  .description('配置管理')
+  .argument('<action>', 'get/set')
+  .argument('[key]', '配置项')
+  .argument('[value]', '配置值')
+  .action((action, key, value) => {
+    const config = getConfig();
+    
+    if (action === 'get') {
+      if (key) {
+        console.log(config[key] || '');
+      } else {
+        console.log(JSON.stringify(config, null, 2));
+      }
+    } else if (action === 'set') {
+      if (!key || value === undefined) {
+        console.log('用法: cdp-tunnel config set <key> <value>');
+        console.log('示例: cdp-tunnel config set port 9221');
+        return;
+      }
+      
+      if (key === 'port') {
+        config[key] = parseInt(value);
+      } else {
+        config[key] = value;
+      }
+      
+      saveConfig(config);
+      log('green', '✓ 已保存: ' + key + ' = ' + config[key]);
+    } else {
+      console.log('用法: cdp-tunnel config <get|set> [key] [value]');
+    }
+  });
+
+program.parse();

package/docs/README_CN.md

@@ -0,0 +1,204 @@
+# CDP Tunnel
+
+<p align="center">
+  <img src="../extension-new/icons/icon128.png" alt="CDP Tunnel Logo" width="128" height="128">
+</p>
+
+<p align="center">
+  <strong>Chrome DevTools Protocol 桥接器</strong>
+</p>
+
+<p align="center">
+  Chrome 扩展，将浏览器暴露为 CDP 端点，<br>
+  支持多个 Playwright/Puppeteer 客户端同时连接和控制。
+</p>
+
+<p align="center">
+  <a href="../README.md">English</a> | 
+  <a href="https://github.com/dyyz1993/cdp-tunnel">GitHub</a>
+</p>
+
+<p align="center">
+  <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>
+
+---
+
+## 架构
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        代理服务器                                │
+│                     (localhost:9221)                            │
+│                                                                 │
+│   /plugin  ←─── Chrome 扩展 (WebSocket)                         │
+│   HTTP     ←─── Playwright/Puppeteer 客户端                     │
+└─────────────────────────────────────────────────────────────────┘
+         ↑              ↑              ↑
+         │              │              │
+    Client 1       Client 2       Client 3
+   (clientId_1)    (clientId_2)    (clientId_3)
+```
+
+## 功能特性
+
+- **多客户端支持** - 多个 Playwright/Puppeteer 可同时连接
+- **消息隔离** - 每个客户端创建的页面归该客户端所有
+- **配置页面** - 可视化查看连接状态、客户端列表、受控页面
+- **自动重连** - 扩展断开后自动重连服务器
+
+## 截图
+
+![配置页面](config-page-screenshot.png)
+
+## 快速开始
+
+### 方式一：npm 全局安装（推荐）
+
+```bash
+# 全局安装
+npm install -g cdp-tunnel
+
+# 启动服务器
+cdp-tunnel start
+
+# 查看状态
+cdp-tunnel status
+
+# 安装 Chrome 扩展（打开交互式安装向导）
+cdp-tunnel extension
+```
+
+### 方式二：从 GitHub Releases 下载
+
+1. 访问 [GitHub Releases](https://github.com/dyyz1993/cdp-tunnel/releases)
+2. 下载最新版本的 `cdp-tunnel-extension.zip`
+3. 解压文件
+4. 打开 Chrome 扩展页面 `chrome://extensions/`
+5. 开启「开发者模式」
+6. 点击「加载已解压的扩展程序」
+7. 选择解压后的扩展目录
+
+### 方式三：手动安装
+
+#### 1. 启动代理服务器
+
+```bash
+cd server
+npm install
+node proxy-server.js
+```
+
+服务器将在 `localhost:9221` 启动。
+
+#### 2. 安装 Chrome 扩展
+
+1. 打开 `chrome://extensions/`
+2. 开启「开发者模式」
+3. 点击「加载已解压的扩展程序」
+4. 选择 `extension-new` 目录
+
+#### 3. 连接扩展
+
+点击扩展图标，在配置页面输入服务器地址，点击「保存并连接」。
+
+### 客户端连接
+
+```javascript
+// Playwright
+const { chromium } = require('playwright');
+
+const browser = await chromium.connectOverCDP('http://localhost:9221');
+const context = browser.contexts()[0];
+const page = await context.newPage();
+await page.goto('https://example.com');
+
+// Puppeteer
+const puppeteer = require('puppeteer');
+
+const browser = await puppeteer.connect({
+  browserWSEndpoint: 'ws://localhost:9221'
+});
+const page = await browser.newPage();
+await page.goto('https://example.com');
+```
+
+## 多客户端使用
+
+所有客户端连接同一个端点 `http://localhost:9221`，服务器自动为每个连接分配唯一的 `clientId`。
+
+```javascript
+// 多个客户端可以同时连接
+const browser1 = await chromium.connectOverCDP('http://localhost:9221');
+const browser2 = await chromium.connectOverCDP('http://localhost:9221');
+const browser3 = await chromium.connectOverCDP('http://localhost:9221');
+
+// 每个客户端创建的页面互不干扰
+const page1 = await browser1.contexts()[0].newPage();
+const page2 = await browser2.contexts()[0].newPage();
+const page3 = await browser3.contexts()[0].newPage();
+```
+
+## 配置页面
+
+点击扩展图标打开配置页面，可以查看：
+
+- **CDP 客户端列表** - 显示连接的 Playwright/Puppeteer 客户端
+- **受控页面列表** - 显示被控制的页面，支持点击跳转
+- **活动日志** - 连接状态变化记录
+
+## 项目结构
+
+```
+cdp-tunnel/
+├── server/
+│   └── proxy-server.js      # 代理服务器
+├── extension-new/
+│   ├── background.js        # 扩展 Service Worker
+│   ├── config-page-preview.html  # 配置页面
+│   ├── config-page.js       # 配置页面脚本
+│   ├── core/
+│   │   ├── state.js         # 状态管理
+│   │   └── websocket.js     # WebSocket 连接管理
+│   └── features/
+│       ├── cdp-router.js    # CDP 消息路由
+│       └── screencast.js    # 截图功能
+└── tests/
+    ├── playwright-single.js      # 单客户端测试
+    ├── playwright-multi.js       # 多客户端测试
+    └── playwright-interactive.js # 交互式测试
+```
+
+## 测试
+
+```bash
+# 单客户端测试
+node tests/playwright-single.js
+
+# 多客户端测试
+node tests/playwright-multi.js
+
+# 交互式测试
+node tests/playwright-interactive.js
+```
+
+## 注意事项
+
+1. **端口占用** - 确保 9221 端口未被占用
+2. **扩展权限** - 扩展需要 `debugger`、`tabs` 等权限
+3. **浏览器限制** - 同一浏览器只能被一个扩展通过 debugger 控制
+
+## 许可证
+
+本项目采用 Apache License 2.0 协议，并附加署名要求。
+
+详见 [LICENSE](../LICENSE)。
+
+---
+
+如果你在工作中使用了本项目，请注明来源：
+- 项目：CDP Tunnel
+- 作者：dyyz1993
+- 来源：https://github.com/dyyz1993/cdp-tunnel