chrome-cdp-live-browser by aradotso/trending-skills
npx skills add https://github.com/aradotso/trending-skills --skill chrome-cdp-live-browser技能来自 ara.so — Daily 2026 Skills 集合。
chrome-cdp 通过 Chrome DevTools 协议将您的 AI 代理直接连接到正在运行的 Chrome 浏览器。与启动全新独立浏览器的浏览器自动化工具不同,此技能连接到您已经打开的标签页——您的登录状态、Cookie 和当前页面状态都保持不变。
type 命令即使在跨域 iframe 内部也能工作pi install git:github.com/pasky/chrome-cdp-skill@v1.0.1
git clone https://github.com/pasky/chrome-cdp-skill
# 将 skills/chrome-cdp/ 目录复制到您的代理加载上下文的任何位置
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
chrome://inspect/#remote-debugging这样就完成了。无需设置标志,无需重启 Chrome。
脚本会自动检测 macOS、Linux 和 Windows 上的 Chrome、Chromium、Brave、Edge 和 Vivaldi。对于非标准安装:
export CDP_PORT_FILE=/path/to/DevToolsActivePort
所有命令都使用 scripts/cdp.mjs 作为入口点。<target> 是 list 命令显示的 targetId 的唯一前缀。
node scripts/cdp.mjs list
# 输出:
# A1B2C3 https://github.com/pasky/chrome-cdp-skill chrome-cdp-skill
# D4E5F6 https://mail.google.com/mail/u/0/ Gmail
node scripts/cdp.mjs shot A1B2
# 将屏幕截图保存到运行时目录,打印文件路径
node scripts/cdp.mjs snap A1B2
# 返回紧凑的语义无障碍功能树 — 最适合理解页面结构
node scripts/cdp.mjs html A1B2 # 完整页面 HTML
node scripts/cdp.mjs html A1B2 ".main-content" # 限定到 CSS 选择器
node scripts/cdp.mjs html A1B2 "#article-body" # 限定到 ID
node scripts/cdp.mjs eval A1B2 "document.title"
node scripts/cdp.mjs eval A1B2 "window.location.href"
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('a').length"
node scripts/cdp.mjs nav A1B2 https://example.com
# 导航并等待页面加载
node scripts/cdp.mjs net A1B2
# 显示当前页面的网络资源计时信息
node scripts/cdp.mjs click A1B2 "button.submit"
node scripts/cdp.mjs click A1B2 "#login-btn"
node scripts/cdp.mjs click A1B2 "[data-testid='confirm']"
node scripts/cdp.mjs clickxy A1B2 320 480
# 在 CSS 像素坐标 (x=320, y=480) 处点击
node scripts/cdp.mjs type A1B2 "Hello, world!"
# 在当前获得焦点的元素处输入 — 在跨域 iframe 中也能工作
node scripts/cdp.mjs loadall A1B2 "button.load-more"
# 持续点击选择器,直到它从 DOM 中消失
node scripts/cdp.mjs open
node scripts/cdp.mjs open https://example.com
# 注意:会触发 Chrome 的 "允许" 提示
node scripts/cdp.mjs stop # 停止所有守护进程
node scripts/cdp.mjs stop A1B2 # 停止特定标签页的守护进程
node scripts/cdp.mjs evalraw A1B2 "Page.getFrameTree"
node scripts/cdp.mjs evalraw A1B2 "Runtime.evaluate" '{"expression":"1+1"}'
# 列出标签页以找到您的目标
node scripts/cdp.mjs list
# 获取无障碍功能树以获得语义视图
node scripts/cdp.mjs snap D4E5
# 或者获取特定区域的限定范围 HTML
node scripts/cdp.mjs html D4E5 ".email-list"
# 点击输入字段
node scripts/cdp.mjs click A1B2 "input[name='search']"
# 输入内容
node scripts/cdp.mjs type A1B2 "my search query"
# 点击提交
node scripts/cdp.mjs click A1B2 "button[type='submit']"
# 截取屏幕截图以验证结果
node scripts/cdp.mjs shot A1B2
# 获取页面上所有链接的 href
node scripts/cdp.mjs eval A1B2 "Array.from(document.querySelectorAll('a')).map(a => a.href)"
# 获取特定元素的文本内容
node scripts/cdp.mjs eval A1B2 "document.querySelector('.price').textContent.trim()"
# 将表格数据获取为 JSON
node scripts/cdp.mjs eval A1B2 "
Array.from(document.querySelectorAll('table tr')).map(row =>
Array.from(row.querySelectorAll('td,th')).map(cell => cell.textContent.trim())
)
"
# 导航然后立即读取页面
node scripts/cdp.mjs nav A1B2 https://news.ycombinator.com
node scripts/cdp.mjs snap A1B2
# 持续加载内容直到 "加载更多" 按钮消失
node scripts/cdp.mjs loadall A1B2 "button[data-action='load-more']"
# 然后提取所有已加载的内容
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('.item').length"
import { execFile } from 'node:child_process';
import { promisify } from 'node:util';
const exec = promisify(execFile);
const CDP = (...args) => exec('node', ['scripts/cdp.mjs', ...args]);
async function getPageTitle(tabPrefix) {
const { stdout } = await CDP('eval', tabPrefix, 'document.title');
return stdout.trim();
}
async function takeScreenshot(tabPrefix) {
const { stdout } = await CDP('shot', tabPrefix);
return stdout.trim(); // 返回文件路径
}
async function navigateAndSnap(tabPrefix, url) {
await CDP('nav', tabPrefix, url);
const { stdout } = await CDP('snap', tabPrefix);
return stdout;
}
// 用法
const tabs = (await CDP('list')).stdout;
console.log(tabs);
| 环境变量 | 用途 |
|---|---|
CDP_PORT_FILE | 用于非标准浏览器安装的 DevToolsActivePort 文件路径 |
守护进程在 20 分钟无活动后自动退出 — 正常使用下无需手动清理。
如果守护进程没有持久化,就会发生这种情况。请确保您使用的是同一个 scripts/cdp.mjs 入口点 — 它会自动管理守护进程的生命周期。如果您在会话中途切换了工具,请运行 stop 并让守护进程重新启动。
如果自动检测失败,请找到您的 DevToolsActivePort 文件并设置环境变量:
# macOS Chrome 示例
export CDP_PORT_FILE="$HOME/Library/Application Support/Google/Chrome/Default/DevToolsActivePort"
# Linux Chrome 示例
export CDP_PORT_FILE="$HOME/.config/google-chrome/Default/DevToolsActivePort"
再次运行 list — 当标签页关闭/重新打开时,标签页 ID 会改变。如果多个标签页共享相同的前缀字符,请使用更长的前缀。
请确保您在 chrome://inspect/#remote-debugging(不仅仅是 chrome://inspect/)。开关位于页面的右上角。
此项目需要 Node.js 22+。使用 node --version 检查,如果需要,请通过 nvm 或您的包管理器升级。
屏幕截图反映的是实际渲染的视口。如果标签页位于后台窗口,或者操作系统有显示缩放,clickxy 的像素坐标可能需要调整。使用 snap 或 eval 来检查 DOM 状态,而不是仅仅依赖屏幕截图。
type 直接使用 CDP 输入域,绕过了 iframe 来源限制每周安装次数
369
代码仓库
GitHub 星标数
10
首次出现
9 天前
安全审计
安装于
cursor364
gemini-cli364
github-copilot364
codex364
amp364
cline364
Skill by ara.so — Daily 2026 Skills collection.
chrome-cdp connects your AI agent directly to your running Chrome browser via the Chrome DevTools Protocol (CDP). Unlike browser automation tools that spin up fresh isolated browsers, this connects to tabs you already have open — with your logins, cookies, and current page state intact.
type command works even inside cross-origin iframespi install git:github.com/pasky/chrome-cdp-skill@v1.0.1
git clone https://github.com/pasky/chrome-cdp-skill
# Copy the skills/chrome-cdp/ directory to wherever your agent loads context from
chrome://inspect/#remote-debuggingThat's all. No flags, no relaunching Chrome.
The script auto-detects Chrome, Chromium, Brave, Edge, and Vivaldi on macOS, Linux, and Windows. For non-standard installs:
export CDP_PORT_FILE=/path/to/DevToolsActivePort
All commands use scripts/cdp.mjs as the entry point. <target> is a unique prefix of the targetId shown by list.
node scripts/cdp.mjs list
# Output:
# A1B2C3 https://github.com/pasky/chrome-cdp-skill chrome-cdp-skill
# D4E5F6 https://mail.google.com/mail/u/0/ Gmail
node scripts/cdp.mjs shot A1B2
# Saves screenshot to runtime dir, prints the file path
node scripts/cdp.mjs snap A1B2
# Returns compact, semantic accessibility tree — best for understanding page structure
node scripts/cdp.mjs html A1B2 # full page HTML
node scripts/cdp.mjs html A1B2 ".main-content" # scoped to CSS selector
node scripts/cdp.mjs html A1B2 "#article-body" # scoped to ID
node scripts/cdp.mjs eval A1B2 "document.title"
node scripts/cdp.mjs eval A1B2 "window.location.href"
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('a').length"
node scripts/cdp.mjs nav A1B2 https://example.com
# Navigates and waits for page load
node scripts/cdp.mjs net A1B2
# Shows network resource timing for the current page
node scripts/cdp.mjs click A1B2 "button.submit"
node scripts/cdp.mjs click A1B2 "#login-btn"
node scripts/cdp.mjs click A1B2 "[data-testid='confirm']"
node scripts/cdp.mjs clickxy A1B2 320 480
# Clicks at CSS pixel coordinates (x=320, y=480)
node scripts/cdp.mjs type A1B2 "Hello, world!"
# Types at the currently focused element — works in cross-origin iframes
node scripts/cdp.mjs loadall A1B2 "button.load-more"
# Keeps clicking the selector until it disappears from the DOM
node scripts/cdp.mjs open
node scripts/cdp.mjs open https://example.com
# Note: triggers Chrome's "Allow" prompt
node scripts/cdp.mjs stop # stop all daemons
node scripts/cdp.mjs stop A1B2 # stop daemon for specific tab
node scripts/cdp.mjs evalraw A1B2 "Page.getFrameTree"
node scripts/cdp.mjs evalraw A1B2 "Runtime.evaluate" '{"expression":"1+1"}'
# List tabs to find your target
node scripts/cdp.mjs list
# Grab the accessibility tree for a semantic view
node scripts/cdp.mjs snap D4E5
# Or get scoped HTML for a specific section
node scripts/cdp.mjs html D4E5 ".email-list"
# Click the input field
node scripts/cdp.mjs click A1B2 "input[name='search']"
# Type into it
node scripts/cdp.mjs type A1B2 "my search query"
# Click submit
node scripts/cdp.mjs click A1B2 "button[type='submit']"
# Take a screenshot to verify result
node scripts/cdp.mjs shot A1B2
# Get all link hrefs on a page
node scripts/cdp.mjs eval A1B2 "Array.from(document.querySelectorAll('a')).map(a => a.href)"
# Get text content of a specific element
node scripts/cdp.mjs eval A1B2 "document.querySelector('.price').textContent.trim()"
# Get table data as JSON
node scripts/cdp.mjs eval A1B2 "
Array.from(document.querySelectorAll('table tr')).map(row =>
Array.from(row.querySelectorAll('td,th')).map(cell => cell.textContent.trim())
)
"
# Navigate and then immediately read the page
node scripts/cdp.mjs nav A1B2 https://news.ycombinator.com
node scripts/cdp.mjs snap A1B2
# Keep loading content until "Load More" button disappears
node scripts/cdp.mjs loadall A1B2 "button[data-action='load-more']"
# Then extract all loaded content
node scripts/cdp.mjs eval A1B2 "document.querySelectorAll('.item').length"
import { execFile } from 'node:child_process';
import { promisify } from 'node:util';
const exec = promisify(execFile);
const CDP = (...args) => exec('node', ['scripts/cdp.mjs', ...args]);
async function getPageTitle(tabPrefix) {
const { stdout } = await CDP('eval', tabPrefix, 'document.title');
return stdout.trim();
}
async function takeScreenshot(tabPrefix) {
const { stdout } = await CDP('shot', tabPrefix);
return stdout.trim(); // returns file path
}
async function navigateAndSnap(tabPrefix, url) {
await CDP('nav', tabPrefix, url);
const { stdout } = await CDP('snap', tabPrefix);
return stdout;
}
// Usage
const tabs = (await CDP('list')).stdout;
console.log(tabs);
| Environment Variable | Purpose |
|---|---|
CDP_PORT_FILE | Path to DevToolsActivePort file for non-standard browser installs |
Daemons auto-exit after 20 minutes of inactivity — no manual cleanup needed in normal use.
This happens if daemons aren't persisting. Make sure you're using the same scripts/cdp.mjs entry point — it manages daemon lifecycle automatically. If you switched tools mid-session, run stop and let daemons restart fresh.
If auto-detection fails, find your DevToolsActivePort file and set the env var:
# macOS Chrome example
export CDP_PORT_FILE="$HOME/Library/Application Support/Google/Chrome/Default/DevToolsActivePort"
# Linux Chrome example
export CDP_PORT_FILE="$HOME/.config/google-chrome/Default/DevToolsActivePort"
Run list again — tab IDs change when tabs are closed/reopened. Use a longer prefix if multiple tabs share the same prefix characters.
Ensure you're on chrome://inspect/#remote-debugging (not just chrome://inspect/). The toggle is in the top-right of the page.
This project requires Node.js 22+. Check with node --version and upgrade if needed via nvm or your package manager.
The screenshot reflects the actual rendered viewport. If the tab is in a background window or the OS has display scaling, pixel coordinates for clickxy may need adjustment. Use snap or eval to inspect DOM state instead of relying solely on screenshots.
type uses CDP Input domain directly, bypassing iframe origin restrictionsWeekly Installs
369
Repository
GitHub Stars
10
First Seen
9 days ago
Security Audits
Gen Agent Trust HubFailSocketPassSnykFail
Installed on
cursor364
gemini-cli364
github-copilot364
codex364
amp364
cline364
代码审查最佳实践指南:完整流程、安全与性能审查清单
12,400 周安装
Cloudflare MCP Server 教程:在Cloudflare Workers上构建远程模型上下文协议服务器
328 周安装
Cloudflare Images 图像托管与转换 API 使用指南 | 支持 AI 人脸裁剪与内容凭证
328 周安装
Swift iOS HomeKit Matter 开发指南:控制智能家居与设备配网
329 周安装
iOS WeatherKit 使用指南:获取天气数据、预报与警报的 Swift 实现
329 周安装
Microsoft Agent Framework 开发指南:统一Semantic Kernel与AutoGen的AI智能体框架
329 周安装
Spring缓存单元测试指南:@Cacheable、@CacheEvict、@CachePut测试方法与内存缓存管理器
329 周安装