SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场chrome-cdp-live-browser

chrome-cdp-live-browser

智能体与模型

查看项目

更新于 10-15 13:49

技能介绍

用途

Chrome CDP Live Browser 用于把 AI 智能体接入用户当前正在运行的 Chrome 会话，而不是另开一个干净的浏览器。它直连 Chrome 的远程调试 WebSocket（CDP），因此智能体可以访问你已经打开的标签页、已登录的账号和当前页面状态，无需 Puppeteer、无需新浏览器实例，也无需重新登录。据资料说明，这一方式可让智能体读取 Gmail、GitHub、内部工具等你已登录的页面内容。

主要能力

  • 读取实时页面：访问已登录的 Gmail、GitHub、内部工具等任意页面。
  • 与标签页交互：在活动浏览器中点击、输入、导航、执行 JavaScript。
  • 捕获状态：截图、无障碍树、完整 HTML、网络时序。
  • 持久守护进程：每个标签页一个轻量后台进程，模态框只出现一次，之后静默复用。
  • 处理规模：据资料称可稳定处理 100+ 个已打开标签页，而基于 Puppeteer 的工具会超时。

使用方式

安装前提

  • 在 Chrome 中启用远程调试：访问 chrome://inspect/#remote-debugging 并打开开关，无需命令行参数、无需重启。
  • 仅需 Node.js 22+，无需 npm install，零运行时依赖。

安装命令

作为 pi 技能：

pi install git:github.com/pasky/chrome-cdp-skill@v1.0.1

其他智能体（Amp、Claude Code、Cursor 等）：

git clone https://github.com/pasky/chrome-cdp-skill.git
cp -r chrome-cdp-skill/skills/chrome-cdp/ ./your-agent-skills/

配置

CLI 会在 macOS 和 Linux 上通过 DevToolsActivePort 文件自动检测 Chrome、Chromium、Brave、Edge 和 Vivaldi。非标准浏览器位置可设置：

export CDP_PORT_FILE="/path/to/your/browser/profile/DevToolsActivePort"

关键命令

  • 列出所有打开的标签页（显示 targetId 前缀）：scripts/cdp.mjs list
  • 对标签页截图：scripts/cdp.mjs shot <target>
  • 获取无障碍树（紧凑、语义化，最适合理解页面结构）：scripts/cdp.mjs snap <target>
  • 获取完整 HTML，可限定到 CSS 选择器：scripts/cdp.mjs html <target> / scripts/cdp.mjs html <target> ".main-content"
  • 在页面上下文执行 JavaScript：scripts/cdp.mjs eval <target> "document.title"
  • 导航并等待加载：scripts/cdp.mjs nav <target> https://example.com
  • 网络资源时序：scripts/cdp.mjs net <target>
  • 按 CSS 选择器点击：scripts/cdp.mjs click <target> "button.submit"
  • 按坐标点击：scripts/cdp.mjs clickxy <target> 320 240
  • 在焦点元素输入文本（可跨域 iframe）：scripts/cdp.mjs type <target> "hello world"
  • 反复点击 "load more" 直到选择器消失：scripts/cdp.mjs loadall <target> ".load-more-btn"
  • 原始 CDP 命令透传：scripts/cdp.mjs evalraw <target> Page.captureScreenshot '{"format":"png"}'
  • 打开新标签页（触发一次 Allow 提示）：scripts/cdp.mjs open https://example.com
  • 停止守护进程：scripts/cdp.mjs stop / scripts/cdp.mjs stop <target>

其中 <target> 是 list 所显示 targetId 的唯一前缀。

代码示例

列出标签页并获取 target：

import { execSync } from 'child_process';

const tabs = execSync('scripts/cdp.mjs list').toString();
console.log(tabs);
// abc123  https://github.com/...  GitHub - some repo

const target = 'abc123';

读取页面内容：

const tree = execSync(`scripts/cdp.mjs snap ${target}`).toString();
const html = execSync(`scripts/cdp.mjs html ${target}`).toString();
const section = execSync(`scripts/cdp.mjs html ${target} "#content"`).toString();

与页面交互：

execSync(`scripts/cdp.mjs nav ${target} https://example.com`);
execSync(`scripts/cdp.mjs click ${target} "button[type=submit]"`);
execSync(`scripts/cdp.mjs click ${target} "input#search"`);
execSync(`scripts/cdp.mjs type ${target} "my search query"`);
execSync(`scripts/cdp.mjs shot ${target}`);

执行 JavaScript：

const title = execSync(`scripts/cdp.mjs eval ${target} "document.title"`).toString().trim();

const links = execSync(
  `scripts/cdp.mjs eval ${target} "JSON.stringify([...document.querySelectorAll('a')].map(a => ({text: a.textContent.trim(), href: a.href})))"`
).toString();

const parsed = JSON.parse(links);

处理无限滚动 / 加载更多：

execSync(`scripts/cdp.mjs loadall ${target} ".load-more"`);
const fullContent = execSync(`scripts/cdp.mjs html ${target}`).toString();

原始 CDP 透传：

const result = execSync(
  `scripts/cdp.mjs evalraw ${target} Page.captureScreenshot '{"format":"jpeg","quality":80}'`
).toString();

const cookies = execSync(
  `scripts/cdp.mjs evalraw ${target} Network.getCookies`
).toString();

在智能体工作流中使用（观察 → 推理 → 行动 → 验证）：

async function agentStep(targetPrefix) {
  const snapshot = execSync(`scripts/cdp.mjs snap ${targetPrefix}`).toString();
  // 推理 …
  execSync(`scripts/cdp.mjs click ${targetPrefix} ".btn-primary"`);
  const after = execSync(`scripts/cdp.mjs shot ${targetPrefix}`).toString();
  return after;
}

集成方式

  • 与 Claude Code / Cursor / Amp：将 skills/chrome-cdp/ 目录复制到项目中，并在智能体的系统提示或上下文中引用 SKILL.md，智能体即可把 scripts/cdp.mjs 作为 shell 命令调用。
  • 访问已认证服务：由于连接的是正在运行的 Chrome 会话，无需管理凭据，可直接读取你已登录的 Gmail、GitHub PR 等。
  • 处理 SPA 与动态内容：导航并等待后获取渲染后的内容，可结合 eval 等待特定元素出现，再读取指定区域 HTML。

适用场景

  • 需要读取或操作已登录账号页面（Gmail、GitHub、内部工具）。
  • 需要与当前打开的标签页交互而非启动新浏览器。
  • 处理 SPA 动态渲染内容。
  • 大量标签页（据称 100+）下的稳定操作。
  • 在智能体的观察-推理-行动循环中作为浏览器操作层。

限制与已知问题

  • 需要 Node.js 22+。
  • 必须先在 chrome://inspect/#remote-debugging 打开远程调试开关。
  • 若 "Allow debugging" 弹窗反复出现，可能是守护进程崩溃，可先执行 stop 再重试。
  • 若 Chrome 未被检测到，需检查 DevToolsActivePort 文件是否存在，或通过 CDP_PORT_FILE 指定路径。
  • target 未找到或前缀不明确时，可运行 list 获取当前 targetId，或使用更长前缀区分。
  • 守护进程在 20 分钟无活动后自动退出，下次命令会透明地重新生成。
  • 资料未提供收费、价格、平台范围或其他效果指标的说明。