需要让 Claude Code…

适用于让 Claude Code 在真实 Chrome 会话中执行网页搜索、静态/动态页面读取、点击、上传、并行研究和媒体提取。

适用场景

解决思路

1. 安装技能（选项 A）：对 Claude 说「帮我安装这个 skill：https://github.com/eze-is/web-access」或「Install this skill for me: https://github.com/eze-is/web-access」。
2. 安装技能（选项 B 手动）：执行 `git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access`；技能文件为 `~/.claude/skills/web-access/SKILL.md`，Claude Code 会自动加载 `~/.claude/skills/` 下所有 `SKILL.md`。
3. 检查 Node.js 版本：执行 `node --version`，必须 >= 22。
4. 启用 Chrome 远程调试：在 Chrome 打开 `chrome://inspect/#remote-debugging`，勾选 **Allow remote debugging for this browser instance**，按提示重启 Chrome。
5. 验证依赖：执行 `bash ~/.claude/skills/web-access/scripts/check-deps.sh`，期望输出 `✅ Node.js 22.x found`、`✅ Chrome DevTools reachable at localhost:9222`、`✅ curl available`。
6. 启动 CDP Proxy：后台执行 `node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs &`；确认运行 `curl -s http://localhost:3456/ping` 返回 `{"status":"ok"}`。
7. 使用 Tab 管理 API：打开新标签 `curl -s "http://localhost:3456/new?url=https://example.com"` 返回 `targetId`；关闭标签 `curl -s "http://localhost:3456/close?target=ABC123"` 返回 `{"closed":true}`。
8. 使用页面内容 API：执行 JavaScript `curl -s -X POST "http://localhost:3456/eval?target=ABC123" -d 'document.title'`；获取完整 HTML `curl -s -X POST "http://localhost:3456/eval?target=ABC123" -d 'document.documentElement.outerHTML'`。
9. 使用交互 API：JS 点击 `curl -s -X POST "http://localhost:3456/click?target=ABC123" -d 'button.submit'`；真实鼠标点击 `curl -s -X POST "http://localhost:3456/clickAt?target=ABC123" -d '.upload-btn'`；文件上传 `curl -s -X POST "http://localhost:3456/setFiles?target=ABC123" -H "Content-Type: application/json" -d '{"selector":"input[type=file]","files":["/tmp/photo.png"]}'`。
10. 使用导航 API：滚动到底部 `curl -s "http://localhost:3456/scroll?target=ABC123&direction=bottom"`；滚动到顶部 `curl -s "http://localhost:3456/scroll?target=ABC123&direction=top"`。
11. 使用视觉 API：截图到文件 `curl -s "http://localhost:3456/screenshot?target=ABC123&file=/tmp/shot.png"`；截图返回 base64 `curl -s "http://localhost:3456/screenshot?target=ABC123"` 返回 `{"base64":"iVBORw0KGgo..."}`。
12. 三层通道调度：通用搜索查询用 `WebSearch`；静态页面/文档/API 用 `WebFetch` 或 Jina；登录受限/动态页面用 CDP Proxy；重 JS/SPA 用 CDP Proxy；视频/canvas 交互用 CDP Proxy 的 `clickAt`；批量文本提取用 Jina（token 高效）；原始 HTTP/自定义头用 `curl`。
13. 使用 Jina 进行 token 高效读取：`curl -s "https://r.jina.ai/https://docs.example.com/api"` 将任意 URL 转为干净 markdown。
14. 示例1：打开页面并提取数据：1) `fetch('http://localhost:3456/new?url=https://news.ycombinator.com')` 获取 `targetId`；2) 等待加载后向 `http://localhost:3456/eval?target=${targetId}` POST `Array.from(document.querySelectorAll('.titleline > a')).slice(0, 10).map(a => ({ title: a.textContent, href: a.href }))`；3) `fetch('http://localhost:3456/close?target=${targetId}')` 关闭标签。
15. 示例2：登录受限页面（复用现有 Chrome 会话）：1) `fetch('http://localhost:3456/new?url=${url}')` 获取 `targetId`，CDP 自动继承 cookies；2) 用 `eval` POST `new Promise(r => setTimeout(r, 2000))` 等待动态内容；3) 用 `eval` POST `document.querySelector('.main-content')?.innerText` 提取内容；4) 关闭标签。
16. 示例3：文件上传自动化：1) `fetch('http://localhost:3456/new?url=${pageUrl}')` 获取 `targetId`；2) 等待 1500ms；3) `fetch('http://localhost:3456/clickAt?target=${targetId}', {method:'POST', body:'.upload-trigger-button'})` 点击上传触发按钮（真实鼠标事件）；4) 等待 500ms；5) `fetch('http://localhost:3456/setFiles?target=${targetId}', {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({selector:'input[type=file]', files:[filePath]})})`；6) `fetch('http://localhost:3456/click?target=${targetId}', {method:'POST', body:'button[type=submit]'})` 提交；7) `fetch('http://localhost:3456/screenshot?target=${targetId}&file=/tmp/upload-result.png')` 截图验证；8) 关闭标签。
17. 示例4：并行研究（子代理）：定义 `targets` 数组；对每个 URL 在 `Promise.all` 中：1) `fetch('http://localhost:3456/new?url=${url}')` 获取 `targetId`；2) 等待 2000ms；3) 用 `eval` POST `({title: document.title, description: document.querySelector('meta[name=description]')?.content, h1: document.querySelector('h1')?.textContent, pricing: document.querySelector('[class*="pric"]')?.innerText?.slice(0,200)})`；4) 关闭标签；5) 返回 `{ url, data: JSON.parse(result) }`；最后 `console.table(results)`。每个子代理使用自己的 `targetId`，共享同一个 Proxy，按标签隔离。
18. 示例5：视频帧截图：1) `fetch('http://localhost:3456/new?url=${pageUrl}')` 获取 `targetId`；2) 等待 3000ms；3) 用 `eval` POST `const v = document.querySelector('video'); v.currentTime = ${timestampSeconds}; v.pause();` 跳转并暂停视频；4) 等待 500ms；5) `fetch('http://localhost:3456/screenshot?target=${targetId}&file=/tmp/frame-${timestampSeconds}s.png')` 截图；6) 关闭标签。
19. 常见模式：在 CDP 任务前检查 Proxy：`curl -s http://localhost:3456/ping || node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs &`。
20. 常见模式：文档阅读用 Jina：`curl -s "https://r.jina.ai/https://api.anthropic.com/docs"`，比 WebFetch 更便宜、更干净。
21. 常见模式：WebSearch 做发现，CDP 做执行：1) `WebSearch` 找到正确 URL；2) `WebFetch` 读取静态/公开内容；3) CDP 进行交互、认证、动态内容。
22. 常见模式：提取所有媒体 URL：用 `eval` POST `({images: Array.from(document.images).map(i => i.src), videos: Array.from(document.querySelectorAll('video source, video[src]')).map(v => v.src || v.getAttribute('src'))})`。
23. 故障排查：Proxy 无法启动：`lsof -i :3456` 检查端口；`kill $(lsof -ti :3456)` 杀死已有 Proxy；`node ~/.claude/skills/web-access/scripts/cdp-proxy.mjs &` 重启。
24. 故障排查：Chrome 不可达：`curl -s http://localhost:9222/json/version` 应返回 Chrome 版本 JSON；若为空，去 `chrome://inspect/#remote-debugging` 启用。
25. 故障排查：`/clickAt` 无效：先用 `curl -s -X POST "http://localhost:3456/eval?target=ID" -d 'document.querySelector(".btn").scrollIntoView()'` 滚动元素到视图，再重试 `/clickAt`。
26. 故障排查：页面内容为空/JS 未渲染：在 `/new` 后加等待 `curl -s -X POST "http://localhost:3456/eval?target=ID" -d 'new Promise(r => setTimeout(r, 3000))'`，再获取内容。
27. 故障排查：文件上传输入未找到：SPA 可能只在触发点击后渲染 `<input type=file>`；先 `/clickAt` 可见上传按钮，等待 500ms，再 `/setFiles`。
28. 故障排查：子代理标签干扰：每个子代理保存自己的 `targetId`，绝不共享；Proxy 按标签无状态。
29. Proxy 自动关闭与保活：Proxy 在 20 分钟无请求后自动退出；长任务用 `while true; do curl -s http://localhost:3456/ping > /dev/null; sleep 300; done &` 后台保活。
30. 站点经验存储：技能在 `~/.claude/skills/web-access/data/site-experience.json` 累积域名知识（可用 URL 模式、登录流程怪癖、稳定/动态选择器、限流行为），跨 Claude 会话持久；可手动检查或编辑以添加域名知识。
31. 能力总结与任务路由：用户说「Search for X」用 `WebSearch`；「Read this URL」用 `WebFetch` 或 Jina；「Go to my dashboard on X」用 CDP（登录态）；「Click the submit button on X」用 CDP `/click` 或 `/clickAt`；「Upload this file to X」用 CDP `/setFiles`；「Research these 5 products」用并行子代理 via CDP；「Extract images from X」用 CDP `/eval` + DOM 查询；「Screenshot X at 1:23 in the video」用 CDP `/eval` seek + `/screenshot`。

适用边界 · 注意事项

• 只需简单搜索或静态页面读取时，不必启动 CDP/Chrome 远程调试。
• 无法安装 Node.js 22+、无法启用 Chrome 远程调试或无法使用 Claude Code 技能机制时不适用。
• 环境不允许修改 Chrome 设置、不允许本地端口通信或运行后台进程时不适用。