让AI自己打开网页、点按钮、截图并识别内容——Claude Code这个插件我天天在用

今天开始给大家分享真正的AI知识了，去年还和大家分享过很多次Cursor使用手册，说实话博主现在基本都已经很少用Cursor了，Cursor目前只给我拿来当代码搜索工具和偶尔看下源码的IDE，编程已经基本不用它了！

要说2026年想学AI，你一定要学会使用的是Claude Code，它的编程生态和插件系统确实要甩其它工具几条街，后面几期我也将结合我在海外公司上班后的项目经验和大家分享下如何打造AI Workflow、如何维护AI Harness、如何使用Hermes Agent等最新热门AI技术。

今天先和大家分享下如何正确使用Claude Code!

很多人都已经安装了Claude Code、CodeX这些CLI工具，如果你还只是停留在进入项目根目录，输入下claude启动终端对话，然后就直接提问去改代码阶段，那这篇文章你一定要看下！

说到Claude Code今年编程能排第一，那就得提到它强大的插件系统，包含了大量实用的Skills和MCP工具，一般输入/plugin就可以看到插件市场了，然而不是所有的插件都装起来就好用！

我这边首推两个必装插件，第一个是：agent-browser，第二个是：Superpowers！

这篇文章和大家分享下agent-browser是什么以及如何安装和使用！

agent-browser 详细教程

它是什么？

agent-browser 是一个专为 AI 智能体设计的命令行浏览器自动化工具，由 Vercel Labs 开源（⭐ 29.9K stars）。它的核心特点是：

• 用 Rust 原生编写，性能极快，不依赖 Node.js

• 通过 Chrome DevTools Protocol (CDP) 直接驱动 Chrome/Chromium，无需 Playwright 或 Puppeteer

• 专门优化了与 AI 编程助手（Claude Code、Cursor、Codex、Copilot 等）的集成体验

• 每周安装量达 187.4K 次

开源地址：https://github.com/vercel-labs/agent-browser

安装

# 全局安装（推荐） npm install -g agent-browser agent-browser install   # 第一次运行，下载 Chrome # macOS Homebrew brew install agent-browser agent-browser install # Cargo (Rust) cargo install agent-browser agent-browser install # Linux 需要额外依赖 agent-browser install –with-deps

升级：

agent-browser upgrade

核心工作流（最重要）

大家都知道现在很多网站直接fetch去抓包是抓不到内容的，而且很多网站都有网爬虫策略，所有agent-browser完全解决了这个问题，它能让AI自己去点击页面识别截图方式模拟人类浏览网页方式进行网站数据读取！

agent-browser 的 AI 推荐工作模式是 snapshot + ref 引用 模式，以下是它操作的相关步骤：

第一步：打开页面

例如，我这里打开我自己的一个最新新闻资讯网站https://news.quanyouhulian.com/，里面是一些新闻最新资讯信息

没有安装 agent-browser 前，直接查询这个网站内容 AI 是看不到的

我们使用该命令打开

agent-browser open https://news.quanyouhulian.com/

第二步：获取无障碍树（带元素引用 ref）

使用命令就可以操作网站上面的元素信息了

agent-browser snapshot -i   # -i 只显示可交互元素 # 输出示例： # – button "Submit" [ref=e2] # – textbox "Email" [ref=e3] # – link "Learn more" [ref=e4]

第三步：用 ref 直接操作元素

获取到元素信息后，就可以直接使用命令操作网站页面了

agent-browser click @e2 agent-browser fill @e3 "test@example.com" agent-browser get text @e1

第四步：截图确认

agent-browser就可以进行截图循环识别网站的内容

agent-browser screenshot page.png # 完成后关闭 agent-browser close

常用命令分类

导航

agent-browser open <url>      # 打开网址 agent-browser back / forward  # 前进/后退 agent-browser reload          # 刷新

元素交互

agent-browser click @e2               # 点击 agent-browser dblclick @e2            # 双击 agent-browser fill @e3 "文本"         # 清空并填入 agent-browser type @e3 "文本"         # 逐字输入 agent-browser hover @e4               # 悬停 agent-browser select @e5 "选项"       # 下拉框 agent-browser check @e6               # 勾选复选框 agent-browser scroll down 500         # 滚动 agent-browser press Enter             # 按键

页面信息获取

agent-browser snapshot -i             # 可交互元素（适合 AI） agent-browser snapshot -i -c -d 5    # 精简输出，限制深度 agent-browser get text @e1           # 获取文本 agent-browser get url                # 获取当前 URL agent-browser get title              # 获取页面标题 agent-browser screenshot page.png    # 截图 agent-browser screenshot –annotate  # 带编号标注的截图（可视化定位）

等待

agent-browser wait "#spinner" –state hidden   # 等待元素消失 agent-browser wait –text "欢迎"               # 等待文本出现 agent-browser wait –load networkidle          # 等待网络空闲 agent-browser wait 2000                        # 等待 2 秒

批量执行（提升性能）

agent-browser batch "open https://example.com" "snapshot -i" "screenshot"

JavaScript 执行

agent-browser eval "document.title" agent-browser eval "window.scrollTo(0, 500)"

网络与调试

agent-browser console               # 查看浏览器控制台 agent-browser errors                # 查看页面报错 agent-browser network requests      # 查看网络请求 agent-browser trace start           # 开始录制 trace

会话与身份认证

复用 Chrome 本地登录状态（最方便）

# 列出本地 Chrome 配置文件 agent-browser profiles # 使用已登录的 Chrome 配置文件（会复制一份，不影响原始数据） agent-browser –profile Default open https://gmail.com

保存/加载认证状态

# 连接到已开启远程调试的 Chrome，保存登录态 agent-browser –auto-connect state save ./my-auth.json # 之后使用保存的登录态 agent-browser –state ./my-auth.json open https://app.example.com

多会话隔离

agent-browser –session agent1 open site-a.com agent-browser –session agent2 open site-b.com agent-browser session list

与 AI 助手集成

上面介绍了agent-browser的强大功能，不过我们不可能每次自己去敲那些命令，所以我们需要让AI能自己去执行这些命令并获取数据，一般集成有两种方式

方式一：直接添加 Skill（推荐）

npx skills add vercel-labs/agent-browser

支持 Claude Code、Cursor、Codex、Gemini CLI、GitHub Copilot、Windsurf 等。

这里选择自己使用的CLI工具就可以，我是用的Claude Code

这个工具我建议可以直接安装到用户角色下面，因为功能非常实用，建议每个项目都有该skills

方式二：自然语言 Chat 模式

# 设置环境变量 export AI_GATEWAY_API_KEY=gw_your_key_here # 单次执行 agent-browser chat "打开 google.com 并搜索猫咪" # 交互式 REPL agent-browser chat

可观测性：实时监控面板

# 启动本地 Web 监控面板（默认端口 4848） agent-browser dashboard start # 自定义端口 agent-browser dashboard start –port 8080 # 停止 agent-browser dashboard stop

面板功能：实时浏览器视口、命令执行流水线、控制台输出、AI 对话。

云端浏览器支持

不需要本地 Chrome 时，可接入多种云服务：

安全配置

# 限制只能访问指定域名 agent-browser –allowed-domains "example.com,*.example.com" open example.com # 操作内容用分隔符包裹（防止 LLM 误读） agent-browser –content-boundaries snapshot # 限制输出长度（防止 context 爆满） agent-browser –max-output 50000 snapshot # 敏感操作需确认 agent-browser –confirm-actions eval,download open example.com

总结

agent-browser 本质上是一个桥接 AI 智能体与浏览器的命令行工具。你可以把它理解为：让 Claude Code、Cursor 这类 AI 能"看到"并"操控"浏览器的工具层。它的 Rust 原生性能、无依赖设计、以及专门优化的 snapshot → ref → action 工作流，使其成为目前 AI Agent 浏览器自动化领域最流行的选择之一。