cdp-tunnel 1.0.13 → 1.0.15

package/.github/workflows/publish.yml

@@ -1,92 +0,0 @@
-name: Publish to npm
-
-on:
-  # 当发布 release 时触发
-  release:
-    types: [published]
-
-  # push 到 main 分支时自动更新 patch 版本
-  push:
-    branches:
-      - main
-    paths-ignore:
-      - '**.md'
-      - '.github/**'
-
-  # 手动触发
-  workflow_dispatch:
-    inputs:
-      version_type:
-        description: '版本类型'
-        required: true
-        default: 'patch'
-        type: choice
-        options:
-          - patch
-          - minor
-          - major
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-
-    steps:
-      # 检出代码
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      # 设置 Node.js
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-
-      # 配置 Git
-      - name: Configure Git
-        run: |
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-      # 从 Release 名称提取版本号，或使用手动输入
-      - name: Update version
-        run: |
-          if [ "${{ github.event_name }}" = "release" ]; then
-            # 从 release tag 提取版本号（去掉 v 前缀）
-            VERSION=${GITHUB_REF_NAME#v}
-            npm version $VERSION --no-git-tag-version
-          elif [ "${{ github.event_name }}" = "push" ]; then
-            # push 到 main，自动更新 patch 版本
-            npm version patch --no-git-tag-version
-          else
-            # 手动触发，使用选择的版本类型
-            npm version ${{ inputs.version_type }} --no-git-tag-version
-          fi
-          cat package.json | grep version
-
-      # 提交版本更新
-      - name: Commit version update
-        run: |
-          git add package.json package-lock.json
-          git commit -m "chore: bump version to $(cat package.json | grep '"version"' | head -1 | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d ' ')"
-          git push
-
-      # 安装依赖
-      - name: Install dependencies
-        run: npm ci
-
-      # 运行测试（如果有）
-      - name: Run tests
-        run: npm test || echo "No tests found"
-        continue-on-error: true
-
-      # 发布到 npm
-      - name: Publish to npm
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

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);
-});