- 什么是 Browser Skill？
Browser Skill 是一种赋予 AI Agent（如 Claude Code, Goose, 或自定义代理）操作真实浏览器能力的扩展包。它不只是简单的“网页抓取”，而是一个基于视觉与动作的交互系统。
通过集成的无头浏览器（Headless Browser，如 Playwright, Puppeteer）或 Chrome DevTools Protocol (CDP)，AI 可以像人类用户一样浏览网页、登录账户、点击按钮并提取动态生成的深层数据。 - 核心技术能力
能力维度 技术实现与功能
主动交互 (Action) 点击 (Click)、输入 (Type)、滚动 (Scroll)、拖拽 (Drag)、下拉选择。
视觉理解 (Vision) 实时截图 (Screenshots)、视口录制，辅助 AI 理解页面布局（特别是验证码或浮窗）。
状态持久化 (Persistence) 支持持久化 Profile（Session/Cookies），实现自动登录与跨会话访问。
语义导航 (Navigation) 基于可访问性树 (Accessibility Tree) 而非纯 HTML 识别元素，使 AI 能看懂“登录按钮”的意图而非仅搜索 标签。
脚本注入 (JS Execution) 在页面上下文中执行自定义 JavaScript，进行深层数据清洗或触发特定前端逻辑。 - 工作流程：AI 如何使用浏览器？
1.意图接收：用户下令：“帮我登录 Jira 并把上周过期的 Bug 导出为 Excel。”
2.环境启动：Browser Skill 启动一个隔离的浏览器实例。
3.视觉反馈环：
oAI 截取当前页面快照。
oBrowser Skill 为页面元素生成唯一标识符（如 @e1, @e2）。
4.决策与执行：AI 决定点击 @e1（登录按钮），Browser Skill 执行模拟点击。
5.结果返回：任务完成后，AI 提取目标数据或文件，关闭浏览器。 - 典型应用场景
自动化测试与调试：AI 自动运行端到端 (E2E) 测试，发现报错后通过截取 Console 日志和 Network 面板信息自行修复代码。
实时文档/竞品检索：查阅那些无法通过 API 获取、必须登录或动态渲染的内部文档系统。
复杂表单自动化：自动处理报销系统、CRM 入库等需要多步确认、逻辑判断的网页流程。
视觉回归分析：对比两个版本的 UI 差异，自动发现 CSS 错位或组件丢失。 - 为什么它比传统“爬虫”更强？
抗反爬性：模拟真实的人类轨迹、随机延迟与设备指纹，更难被检测。
动态渲染支持：完美处理 React, Vue 等框架生成的单页应用（SPA），支持长轮询数据加载。
逻辑自适应：当网页布局微调（如按钮从左改到右）时，传统爬虫会挂掉，但 Browser Skill 依靠 AI 的语义理解能自动找到新位置。
💡 专家建议
“在部署 Browser Skill 时，建议优先选择支持 MCP (Model Context Protocol) 协议的实现（如 agent-browser）。这能让你的 AI 在不同终端（CLI、IDE、Web）之间共享浏览器状态，极大降低 API Key 管理成本和环境配置难度。”
准备好给你的 AI 装上这副“机械臂”了吗？
安装指令示例：npx skills add https://github.com/vercel-labs/agent-browser