camofox-browser截图与快照组合拳base64 PNG可访问性树【免费下载链接】camofox-browserStealth headless browser for AI agents — bypass Cloudflare, bot detection, and anti-scraping. Drop-in Puppeteer/Playwright replacement.项目地址: https://gitcode.com/GitHub_Trending/ca/camofox-browsercamofox-browser 是一款面向 AI 代理的隐身无头浏览器服务它把截图与快照做成了黄金搭档一次 API 调用既能拿到 base64 编码的 PNG 截图又能拿到带元素引用的可访问性树ARIA 快照。图像负责看见快照负责理解两者组合让 AI 代理像人一样浏览网页——既能感知视觉布局又能精确点击任意元素。本文带你快速掌握这套组合拳的正确打开方式 为什么 AI 代理需要截图 快照双通道很多无头浏览器方案只给 AI 一种视角而 camofox-browser 认为两者缺一不可通道输出形式擅长场景短板截图Screenshotbase64 PNG 图像视觉布局、验证码、品牌配色、看起来对不对纯图像 Token 消耗大无法精确定位元素快照Snapshot可访问性树 元素引用结构化语义、元素定位、点击/输入丢失视觉信息颜色、位置、图片内容camofox-browser 的可访问性快照比原始 HTML小约 90%Token 效率极高而 base64 PNG 截图则补齐了视觉维度。两者一次调用同时返回正是组合拳的核心价值。快照端点把网页变成可点击的可访问性树调用快照端点后服务端会用 CamoufoxC 层反指纹的 Firefox 分支提取页面的可访问性树并为每个交互元素标注稳定引用e1、e2……# 获取带元素引用的可访问性快照 curl http://localhost:9377/tabs/TAB_ID/snapshot?userIdagent1 # - { url: ..., snapshot: - button \Submit\ [e1] - link \Learn more\ [e2], refsCount: 2, ... }拿到引用后后续交互直接用ref操作无需脆弱的 CSS 选择器# 按引用点击元素 curl -X POST http://localhost:9377/tabs/TAB_ID/click \ -H Content-Type: application/json \ -d {userId: agent1, ref: e1}元素引用的标注逻辑位于 server.js服务端的refreshTabRefs为按钮、链接、输入框等交互角色生成引用再逐行注入 YAML 快照。一键组合拳includeScreenshottrue 附带 base64 PNG在快照请求上多加一个查询参数即可在同一次响应里拿到截图 curl http://localhost:9377/tabs/TAB_ID/snapshot?userIdagent1includeScreenshottrue响应中会多出一个screenshot对象{ url: https://example.com, snapshot: - heading \Welcome\ - button \Submit\ [e1], refsCount: 1, screenshot: { data: iVBORw0KGgo..., mimeType: image/png } }data字段就是标准 base64 编码的 PNG解码后前 4 字节为 PNG 魔数0x89 P N G可直接写入文件交给多模态模型。该逻辑实现在 server.js服务端调用page.screenshot({ type: png })后将 Buffer 转 base64 附加到响应。 注意开启截图不会改变快照内容本身——带不带includeScreenshot返回的可访问性树完全一致e2e 测试 snapshotScreenshot.test.js 专门验证了这一点。独立截图端点支持 fullPage 整页长图除了顺路截图还有专门的截图端点GET /tabs/:tabId/screenshot直接返回image/png二进制流并支持fullPagetrue截取整页# 视口截图直接得到 PNG 文件 curl http://localhost:9377/tabs/TAB_ID/screenshot?userIdagent1 -o shot.png # 整页长截图 curl http://localhost:9377/tabs/TAB_ID/screenshot?userIdagent1fullPagetrue -o full.png该端点位于 server.js截图时还会触发tab:screenshot插件事件方便插件体系扩展例如 VNC 插件监听浏览器状态。大页面怎么办快照分页与截断策略超长页面如搜索结果页的可访问性树可能非常大camofox-browser 内置了智能分页避免一次性撑爆上下文响应字段含义truncated快照是否被截断totalChars完整快照总字符数hasMore/nextOffset是否还有下文 / 下次请求的 offset分页窗口逻辑见 lib/snapshot.js单窗口上限80000 字符约 2 万 Token且永远保留尾部 5000 字符——因为分页导航链接往往在页面底部保留尾部能让 AI 随时翻页# 用返回的 nextOffset 继续读取下一段 curl http://localhost:9377/tabs/TAB_ID/snapshot?userIdagent1offset74800includeScreenshottrue带 offset 的二次读取走缓存路径见 server.js不重新解析页面响应更快。组合拳实战一次调用完成看图 理解 操作一个典型的代理工作流长这样创建标签页POST /tabs打开目标 URL组合拳取快照GET /tabs/:id/snapshot?includeScreenshottrue一次拿到可访问性树 base64 PNG多模态判断把快照文本和截图一起喂给 AI——文字树负责定位元素图像负责验证视觉状态如登录框是否真的渲染出来了按引用操作POST /tabs/:id/click传ref: e1精准点击循环操作后再次组合拳持续感知页面变化。在 OpenClaw 插件形态下以上能力对应camofox_snapshot与camofox_screenshot两个工具见 README.md代理可直接调用。完整接口定义可在 docs/openapi.json 中查阅。快速上手git clone https://gitcode.com/GitHub_Trending/ca/camofox-browser cd camofox-browser npm install npm start # 服务启动于 http://localhost:9377也可以直接运行npx askjo/camofox-browser。首次运行会自动下载 Camoufox 引擎约 300MB空闲时内存仅约 40MB树莓派和 $5 VPS 都能跑 ☕相关文件导航快照路由与引用标注server.js截图路由fullPage 支持server.js快照窗口分页实现lib/snapshot.js组合拳 e2e 测试tests/e2e/snapshotScreenshot.test.jsOpenAPI 接口文档openapi.json、docs/api.html插件工具定义plugin.js总结截图让 AI 代理看得见可访问性快照让它读得懂、点得准。camofox-browser 用一个includeScreenshottrue参数把两者打包成一次调用配合智能分页成为 AI 代理浏览器能力的标准姿势。【免费下载链接】camofox-browserStealth headless browser for AI agents — bypass Cloudflare, bot detection, and anti-scraping. Drop-in Puppeteer/Playwright replacement.项目地址: https://gitcode.com/GitHub_Trending/ca/camofox-browser创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
