Chrome CDP 控制器 (Puppeteer)

使用 Puppeteer 控制和自动化一个已启用 CDP 并正在运行的 Chrome 浏览器。

主要特性

• - 非侵入式：连接到您现有的 Chrome，打开一个新标签页，执行操作，然后仅关闭该标签页
• 您的浏览器保持打开：绝不会关闭您现有的标签页或浏览器
• 干净的自动化：每个任务在自己的标签页中运行，完成后自动关闭

1. 启用 CDP 的 Chrome

Chrome 必须以启用远程调试的方式运行。如果尚未启动：

bash

macOS

Windows

Linux

2. 获取 WebSocket URL

访问 http://localhost:9222/json/version 获取 webSocketDebuggerUrl，例如：

ws://127.0.0.1:9222/devtools/browser/FFA7276F8E8E51645BD2AC9BE6B79607

或者使用这个单行命令：
bash
curl -s http://localhost:9222/json/version | grep -o webSocketDebuggerUrl:[^]* | cut -d -f4

3. 安装依赖

bash
cd chrome-cdp-controller
npm install

这将安装轻量级的 puppeteer-core（不会下载 Chromium）。

使用方法

基于命令的执行

创建一个包含命令的 JSON 文件：

commands.json:
json
[
{type: navigate, url: https://www.baidu.com},
{type: wait, seconds: 2},
{type: screenshot, path: /tmp/screenshot.png},
{type: evaluate, script: document.title}
]

执行：
bash
node scripts/cdp_controller.js --ws ws://127.0.0.1:9222/devtools/browser/... --commands commands.json

Node.js API

javascript
const { CDPController } = require(./scripts/cdp_controller.js);

(async () => {
const controller = new CDPController(ws://127.0.0.1:9222/devtools/browser/...);
await controller.connect();

// 导航
await controller.navigate(https://www.taobao.com);

// 填写表单
await controller.fill(#q, iPhone);
await controller.press(Enter);
await controller.wait(3);

// 提取数据
const result = await controller.evaluate(
Array.from(document.querySelectorAll(.item))
.slice(0, 10)
.map(item => ({
title: item.querySelector(.title)?.textContent.trim(),
price: item.querySelector(.price)?.textContent.trim()
}))
);
console.log(result.result);

// 拦截网络
await controller.startIntercept(api);
// ... 执行操作 ...
const responses = controller.getInterceptedResponses();

await controller.close();
})();

可用命令

导航

• - navigate - 跳转到 URL

交互

• - click - 点击元素

• - fill - 填写表单字段（全选后输入）

• - type - 逐字符输入文本

• - press - 按下按键

数据提取

• - get_text - 获取单个元素的文本内容

• - getalltext - 获取所有匹配元素的文本内容

• - evaluate - 执行 JavaScript 并返回结果

网络拦截

• - start_intercept - 开始拦截网络响应

• - get_intercepted - 获取所有拦截的响应

• - clear_intercepted - 清除拦截的响应列表

工具

• - screenshot - 截图

• - waitforselector - 等待元素出现

• - wait - 等待一段时间

常见工作流程

示例 1：在淘宝搜索 iPhone 价格

taobao-search.json:
json
[
{type: navigate, url: https://www.taobao.com},
{type: wait, seconds: 2},
{type: fill, selector: #q, text: iPhone},
{type: press, key: Enter},
{type: wait, seconds: 5},
{type: evaluate, script: Array.from(document.querySelectorAll(.item, [class=\Item\])).slice(0, 10).map(item => ({ title: item.querySelector(.title, [class=\title\])?.textContent.trim().substring(0, 80), price: item.querySelector(.price, [class*=\price\])?.textContent.trim() }))}
]

运行：
bash
WS_URL=$(curl -s http://localhost:9222/json/version | grep -o webSocketDebuggerUrl:[^]* | cut -d -f4)
node scripts/cdpcontroller.js --ws $WSURL --commands taobao-search.json

注意：选择器可能有所不同。请使用浏览器开发者工具（F12）检查元素。

示例 2：向 ChatGPT 提问

chatgpt-ask.json:
json
[
{type: navigate, url: https://chat.openai.com},
{type: waitforselector, selector: textarea, timeout: 10000},
{type: type, selector: textarea, text: 什么是人工智能？},
{type: press, key: Enter},
{type: wait, seconds: 10},
{type: get_text, selector: [data-message-author-role=assistant]:last-of-type}
]

示例 3：拦截 API 响应

intercept-api.json:
json
[
{type: startintercept, urlpattern: graphql},
{type: navigate, url: https://example.com},
{type: wait, seconds: 3},
{type: get_intercepted}
]

更多示例请参见 references/examples.md。

工作流程

自动化浏览器任务时：

1. 1. 获取 WebSocket URL：

1. 2. 确定选择器：

1. 3. 构建命令序列：

1. 4. 执行：