cdp-tunnel 1.0.13 → 1.0.14

package/.github/workflows/release-assets.yml

@@ -1,50 +0,0 @@
-name: Create Release Assets
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  build-assets:
-    runs-on: ubuntu-latest
-    
-    steps:
-      # 检出代码
-      - name: Checkout code
-        uses: actions/checkout@v4
-      
-      # 打包扩展
-      - name: Pack extension
-        run: |
-          cd extension-new
-          zip -r ../cdp-tunnel-extension.zip .
-          cd ..
-          ls -lh cdp-tunnel-extension.zip
-      
-      # 上传扩展到 Release
-      - name: Upload extension to Release
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ github.event.release.upload_url }}
-          asset_path: ./cdp-tunnel-extension.zip
-          asset_name: cdp-tunnel-extension.zip
-          asset_content_type: application/zip
-      
-      # 打包完整项目
-      - name: Pack full project
-        run: |
-          zip -r cdp-tunnel-full.zip . -x "*.git*" -x "node_modules/*" -x "test/*"
-          ls -lh cdp-tunnel-full.zip
-      
-      # 上传完整项目到 Release
-      - name: Upload full project to Release
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ github.event.release.upload_url }}
-          asset_path: ./cdp-tunnel-full.zip
-          asset_name: cdp-tunnel-full.zip
-          asset_content_type: application/zip

package/PUBLISH.md

@@ -1,65 +0,0 @@
-# 发布到 npm 指南
-
-## 自动发布（推荐）
-
-本项目已配置 GitHub Actions，支持自动发布到 npm。
-
-### 配置步骤
-
-1. **获取 npm Token**
-   - 登录 [npmjs.com](https://www.npmjs.com/)
-   - 进入 Account → Access Tokens
-   - 生成新的 **Automation** token
-   - 复制 token（以 `npm_` 开头）
-
-2. **添加到 GitHub Secrets**
-   - 打开 GitHub 仓库 → Settings → Secrets and variables → Actions
-   - 点击 "New repository secret"
-   - Name: `NPM_TOKEN`
-   - Value: 刚才复制的 npm token
-   - 点击 "Add secret"
-
-3. **发布新版本**
-   - 在 GitHub 上创建新的 Release
-   - 设置版本号（如 v1.0.1）
-   - 填写发布说明
-   - 点击 "Publish release"
-   - GitHub Actions 会自动发布到 npm
-
-### 手动触发
-
-也可以在 GitHub Actions 页面手动触发发布：
-- 进入 Actions → Publish to npm
-- 点击 "Run workflow"
-
-## 手动发布
-
-如果不想使用 GitHub Actions，也可以手动发布：
-
-```bash
-# 1. 登录 npm
-npm login
-
-# 2. 更新版本号
-npm version patch  # 或 minor / major
-
-# 3. 发布
-npm publish --access public
-```
-
-## 版本号规则
-
-- `patch`: 修复 bug（1.0.0 → 1.0.1）
-- `minor`: 新增功能（1.0.0 → 1.1.0）
-- `major`: 重大更新（1.0.0 → 2.0.0）
-
-## 验证发布
-
-发布后可以在 npm 上查看：
-https://www.npmjs.com/package/cdp-tunnel
-
-安装测试：
-```bash
-npm install -g cdp-tunnel
-cdp-tunnel --version
-```

package/console-test.js

@@ -1,52 +0,0 @@
-// 测试标签分组功能的脚本
-// 复制到Chrome扩展的控制台中运行
-
-// 1. 测试查询现有标签组
-console.log('Testing tab group functionality...');
-chrome.tabGroups.query({ title: 'lo' }, function(groups) {
-  console.log('Found tab groups:', groups);
-  
-  // 2. 测试创建新标签
-  chrome.tabs.create({ url: 'https://www.baidu.com/', active: false }, function(tab) {
-    console.log('Created tab:', tab);
-    
-    if (groups.length > 0) {
-      // 添加到现有组
-      console.log('Adding tab to existing group...');
-      chrome.tabs.group({ tabIds: tab.id, groupId: groups[0].id }, function(groupId) {
-        console.log('Added tab to group:', groupId);
-      });
-    } else {
-      // 创建新组并添加标签页
-      console.log('Creating new group and adding tab...');
-      chrome.tabs.group({ tabIds: tab.id }, function(groupId) {
-        console.log('Created group:', groupId);
-        // 更新组的标题和颜色
-        if (groupId) {
-          chrome.tabGroups.update(groupId, {
-            title: 'lo',
-            color: 'blue'
-          }, function(group) {
-            console.log('Updated group:', group);
-          });
-        }
-      });
-    }
-  });
-});
-
-// 3. 测试现有标签的分组
-chrome.tabs.query({ active: true }, function(tabs) {
-  if (tabs.length > 0) {
-    console.log('Current active tab:', tabs[0]);
-    
-    chrome.tabGroups.query({ title: 'lo' }, function(groups) {
-      if (groups.length > 0) {
-        console.log('Adding current tab to group...');
-        chrome.tabs.group({ tabIds: tabs[0].id, groupId: groups[0].id }, function(groupId) {
-          console.log('Added current tab to group:', groupId);
-        });
-      }
-    });
-  }
-});

package/docs/README_CN.md

@@ -1,204 +0,0 @@
-# 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

package/final-console-test.js

@@ -1,105 +0,0 @@
-// 完整的标签分组测试脚本
-// 复制到Chrome扩展的控制台中运行
-
-console.log('=== 开始测试标签分组功能 ===');
-
-// 1. 测试1：创建新标签并添加到lo组
-function test1_CreateTabAndAddToGroup() {
-  console.log('\n=== 测试1：创建新标签并添加到lo组 ===');
-  
-  // 先查询是否存在lo组
-  chrome.tabGroups.query({ title: 'lo' }, function(groups) {
-    console.log('找到的标签组:', groups);
-    
-    // 创建新标签页
-    chrome.tabs.create({ url: 'https://www.baidu.com/', active: false }, function(tab) {
-      console.log('创建的标签页:', tab);
-      
-      if (groups.length > 0) {
-        // 如果存在lo组，直接添加
-        console.log('将标签页添加到现有lo组');
-        chrome.tabs.group({ tabIds: tab.id, groupId: groups[0].id }, function(groupId) {
-          console.log('标签页已添加到组:', groupId);
-          test2_AddExistingTabToGroup();
-        });
-      } else {
-        // 如果不存在lo组，创建新组
-        console.log('创建新的lo组并添加标签页');
-        chrome.tabs.group({ tabIds: tab.id }, function(groupId) {
-          console.log('创建的组ID:', groupId);
-          // 更新组的标题和颜色
-          chrome.tabGroups.update(groupId, {
-            title: 'lo',
-            color: 'blue'
-          }, function(group) {
-            console.log('更新后的组:', group);
-            test2_AddExistingTabToGroup();
-          });
-        });
-      }
-    });
-  });
-}
-
-// 2. 测试2：将现有标签添加到lo组
-function test2_AddExistingTabToGroup() {
-  console.log('\n=== 测试2：将现有标签添加到lo组 ===');
-  
-  // 获取当前活动标签
-  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
-    if (tabs.length > 0) {
-      var activeTab = tabs[0];
-      console.log('当前活动标签:', activeTab);
-      
-      // 查询lo组
-      chrome.tabGroups.query({ title: 'lo' }, function(groups) {
-        if (groups.length > 0) {
-          console.log('将当前标签添加到lo组');
-          chrome.tabs.group({ tabIds: activeTab.id, groupId: groups[0].id }, function(groupId) {
-            console.log('当前标签已添加到组:', groupId);
-            test3_VerifyGroupMembers();
-          });
-        } else {
-          console.log('未找到lo组');
-          test3_VerifyGroupMembers();
-        }
-      });
-    } else {
-      console.log('未找到活动标签');
-      test3_VerifyGroupMembers();
-    }
-  });
-}
-
-// 3. 测试3：验证lo组的成员
-function test3_VerifyGroupMembers() {
-  console.log('\n=== 测试3：验证lo组的成员 ===');
-  
-  // 查询lo组
-  chrome.tabGroups.query({ title: 'lo' }, function(groups) {
-    if (groups.length > 0) {
-      var loGroup = groups[0];
-      console.log('lo组信息:', loGroup);
-      
-      // 查询组内的标签
-      chrome.tabs.query({ groupId: loGroup.id }, function(tabs) {
-        console.log('lo组内的标签:', tabs);
-        console.log('lo组内标签数量:', tabs.length);
-        
-        // 打印每个标签的信息
-        tabs.forEach(function(tab, index) {
-          console.log('标签', index + 1, ':', tab.title, '-', tab.url);
-        });
-        
-        console.log('\n=== 测试完成 ===');
-        console.log('请检查Chrome浏览器中的标签组是否正确创建，并且标签页是否被正确添加到组中。');
-      });
-    } else {
-      console.log('未找到lo组');
-      console.log('\n=== 测试完成 ===');
-    }
-  });
-}
-
-// 开始执行测试
-test1_CreateTabAndAddToGroup();

package/simple-tab-group-test.js

@@ -1,56 +0,0 @@
-// 最简单的标签组测试脚本
-// 复制到Chrome扩展的控制台中运行
-
-console.log('=== 最简单的标签组测试 ===');
-
-// 步骤1: 检查API是否可用
-console.log('步骤1: 检查API是否可用');
-console.log('chrome.tabs.group:', typeof chrome.tabs.group);
-console.log('chrome.tabGroups:', chrome.tabGroups);
-console.log('chrome.tabGroups.query:', typeof chrome.tabGroups.query);
-console.log('chrome.tabGroups.update:', typeof chrome.tabGroups.update);
-
-// 步骤2: 创建一个标签页
-console.log('\n步骤2: 创建一个标签页');
-chrome.tabs.create({ url: 'https://www.baidu.com/', active: false }, function(tab) {
-  console.log('标签页创建成功:', tab.id);
-  
-  // 步骤3: 等待5秒
-  console.log('\n步骤3: 等待5秒...');
-  setTimeout(function() {
-    console.log('等待完成，开始创建标签组...');
-    
-    // 步骤4: 创建标签组
-    console.log('\n步骤4: 创建标签组');
-    chrome.tabs.group({ tabIds: tab.id }, function(groupId) {
-      if (chrome.runtime.lastError) {
-        console.error('创建标签组失败:', chrome.runtime.lastError.message);
-        return;
-      }
-      
-      console.log('标签组创建成功，组ID:', groupId);
-      
-      // 步骤5: 更新标签组
-      console.log('\n步骤5: 更新标签组');
-      chrome.tabGroups.update(groupId, {
-        title: 'Test',
-        color: 'blue'
-      }, function(group) {
-        if (chrome.runtime.lastError) {
-          console.error('更新标签组失败:', chrome.runtime.lastError.message);
-          return;
-        }
-        
-        console.log('标签组更新成功:', group);
-        
-        // 步骤6: 查询所有标签组
-        console.log('\n步骤6: 查询所有标签组');
-        chrome.tabGroups.query({}, function(groups) {
-          console.log('所有标签组:', groups);
-          console.log('\n=== 测试完成 ===');
-          console.log('请检查Chrome浏览器中是否有一个名为"Test"的蓝色标签组');
-        });
-      });
-    });
-  }, 5000);
-});

package/test-cdp-connection.js

@@ -1,85 +0,0 @@
-const WebSocket = require('ws');
-
-const SERVER_URL = 'ws://localhost:9221/client';
-
-console.log('[Test] Connecting to CDP proxy server...');
-
-const ws = new WebSocket(SERVER_URL);
-
-ws.on('open', () => {
-  console.log('[Test] Connected to server!');
-  
-  ws.send(JSON.stringify({
-    id: 1,
-    method: 'Target.setDiscoverTargets',
-    params: { discover: true }
-  }));
-  
-  console.log('[Test] Sent Target.setDiscoverTargets');
-  
-  setTimeout(() => {
-    ws.send(JSON.stringify({
-      id: 2,
-      method: 'Target.getTargets',
-      params: {}
-    }));
-    console.log('[Test] Sent Target.getTargets');
-  }, 1000);
-  
-  setTimeout(() => {
-    console.log('[Test] Creating new page...');
-    ws.send(JSON.stringify({
-      id: 3,
-      method: 'Target.createTarget',
-      params: { url: 'https://www.example.com' }
-    }));
-  }, 2000);
-});
-
-ws.on('message', (data) => {
-  try {
-    const msg = JSON.parse(data.toString());
-    
-    if (msg.type === 'connected') {
-      console.log('[Test] Server acknowledged connection:', msg);
-    } else if (msg.method && msg.method.startsWith('Target.')) {
-      console.log('[Test] Target event:', msg.method, {
-        targetId: msg.params?.targetInfo?.targetId?.substring(0, 8),
-        url: msg.params?.targetInfo?.url,
-        type: msg.params?.targetInfo?.type
-      });
-    } else if (msg.id) {
-      console.log('[Test] Response to request #' + msg.id + ':', {
-        success: !!msg.result,
-        error: msg.error,
-        targetId: msg.result?.targetId?.substring(0, 8),
-        targetCount: msg.result?.targetInfos?.length
-      });
-      
-      if (msg.result?.targetInfos) {
-        console.log('[Test] Found targets:');
-        msg.result.targetInfos.slice(0, 5).forEach((t, i) => {
-          console.log(`  ${i + 1}. ${t.type}: ${t.url?.substring(0, 50)}`);
-        });
-      }
-    } else {
-      console.log('[Test] Other message:', msg.type || msg.method);
-    }
-  } catch (e) {
-    console.log('[Test] Raw message:', data.toString().substring(0, 100));
-  }
-});
-
-ws.on('close', (code, reason) => {
-  console.log('[Test] Connection closed:', code, reason.toString());
-});
-
-ws.on('error', (err) => {
-  console.error('[Test] Error:', err.message);
-});
-
-setTimeout(() => {
-  console.log('\n[Test] Test completed, closing connection...');
-  ws.close();
-  process.exit(0);
-}, 5000);

package/test-cdp-groups.js

@@ -1,71 +0,0 @@
-const WebSocket = require('ws');
-
-async function testCDPGroups() {
-  console.log('=== 测试CDP连接的标签分组功能 ===\n');
-  
-  try {
-    // 连接到CDP服务器
-    console.log('连接到CDP服务器...');
-    const ws = new WebSocket('ws://localhost:9221/client');
-    
-    ws.on('open', async function() {
-      console.log('CDP连接成功');
-      
-      // 创建第一个标签页
-      console.log('创建第一个标签页...');
-      ws.send(JSON.stringify({
-        id: 1,
-        method: 'Target.createTarget',
-        params: {
-          url: 'https://www.baidu.com/'
-        }
-      }));
-      
-      // 等待5秒
-      await new Promise(resolve => setTimeout(resolve, 5000));
-      
-      // 创建第二个标签页
-      console.log('创建第二个标签页...');
-      ws.send(JSON.stringify({
-        id: 2,
-        method: 'Target.createTarget',
-        params: {
-          url: 'https://www.google.com/'
-        }
-      }));
-      
-      // 等待5秒
-      await new Promise(resolve => setTimeout(resolve, 5000));
-      
-      console.log('\n=== 测试完成 ===');
-      console.log('请检查Chrome浏览器中的标签组：');
-      console.log('1. 应该创建了一个名为"CDP-{客户端ID}"的标签组');
-      console.log('2. 两个标签页应该被添加到该组中');
-      
-      // 关闭连接
-      ws.close();
-    });
-    
-    ws.on('message', function(data) {
-      try {
-        const message = JSON.parse(data);
-        console.log('收到消息:', message);
-      } catch (e) {
-        console.error('解析消息失败:', e);
-      }
-    });
-    
-    ws.on('error', function(error) {
-      console.error('WebSocket错误:', error);
-    });
-    
-    ws.on('close', function() {
-      console.log('WebSocket连接已关闭');
-    });
-    
-  } catch (error) {
-    console.error('测试过程中出现错误:', error);
-  }
-}
-
-testCDPGroups();