头像

白日梦与诗

林深时见鹿，海蓝深见鲸

AI操控浏览器的三种方案对比：bb-browser、Playwright、Browser-Agent

9分钟阅读

为什么 AI 需要操控浏览器？

当我们让 AI Agent 帮忙做事时，很多任务离不开浏览器：查收藏、发帖、抓取网页内容、填写表单……这些操作需要 AI 能”看到”页面、“点击”按钮、“输入”文字。

目前在 Claude Code 生态中，主要有三种浏览器自动化方案：

  • bb-browser：轻量级 CLI，连接真实浏览器
  • Playwright MCP：标准化自动化框架
  • Browser-Agent：基于无障碍树的智能操控

这三种方案各有侧重，选错了要么登录不了、要么 Token 爆炸、要么不够稳定。下面逐一拆解。

方案一：bb-browser

核心理念

复用你已经登录的浏览器，AI 直接在你的浏览器里操作。

bb-browser 通过 Chrome DevTools Protocol（CDP）连接到你正在运行的浏览器（Chrome 或 Edge），所有操作都在你当前的浏览器会话中进行。

工作流程

你的浏览器（已登录各种网站）
    ↑ CDP 连接（端口 9222/9223）
bb-browser CLI
    ↑ 调用
Claude Code

关键命令

bb-browser open <url>        # 打开页面（新 tab）
bb-browser snapshot -i       # 获取可交互元素（返回 @ref）
bb-browser click @5          # 点击元素
bb-browser fill @3 "text"    # 填写输入框
bb-browser eval "JS代码"     # 执行 JavaScript
bb-browser screenshot p.png  # 截图
bb-browser close             # 关闭 tab

优点

  • 直接复用登录态：B站、小红书、微信公众号……已登录的网站直接可用，不需要扫码或输密码
  • Token 消耗低：用 @ref 引用元素（如 @1、@2），比传输完整 DOM 树省很多 Token
  • 启动快：不需要启动新浏览器，连上就能用
  • 支持 JS 执行：eval 命令可以直接运行 JavaScript，灵活提取页面内容

缺点

  • 浏览器必须在运行：需要先用调试端口启动浏览器
  • 页面导航后 @ref 失效：页面跳转或动态加载后，必须重新 snapshot -i
  • 非无头模式：操作时会在浏览器中看到 tab 打开和关闭

适用场景

  • 查看 B站收藏、小红书笔记等需要登录的内容
  • 在微信公众号后台发文
  • 任何需要登录态的私域操作

方案二：Playwright MCP

核心理念

启动一个全新的、干净的浏览器实例，用标准化 API 进行自动化。

Playwright 是微软开源的浏览器自动化框架，Playwright MCP 将其封装为 MCP 工具，供 AI Agent 调用。

工作流程

Playwright 启动的新浏览器（无登录态）
    ↑ Playwright API
Playwright MCP Server
    ↑ MCP 协议
Claude Code

关键操作

browser_navigate → 打开页面
browser_snapshot → 获取无障碍快照
browser_click    → 点击元素
browser_type     → 输入文字
browser_screenshot → 截图

优点

  • 最稳定可靠：Playwright 是成熟的自动化框架，API 设计完善，错误处理好
  • 不影响你的浏览器：在独立实例中运行，不会干扰你的日常浏览
  • 支持无头模式：可以完全在后台运行，不显示窗口
  • 跨浏览器：支持 Chromium、Firefox、WebKit

缺点

  • 没有登录态：每次启动都是全新浏览器，需要重新登录
  • 启动较慢：需要初始化浏览器实例
  • 处理登录麻烦：面对验证码、二维码扫码等登录方式基本无能为力

适用场景

  • 抓取公开网页内容
  • 测试网站功能
  • 填写不需要登录的表单
  • 截图公开页面

方案三：Browser-Agent

核心理念

连接真实浏览器，通过完整的无障碍树理解页面语义。

Browser-Agent 也通过 CDP 连接到你的真实浏览器，但它的特点是返回完整的无障碍树（Accessibility Tree），让 AI 能更好地理解页面结构和语义。

工作流程

你的浏览器（已登录）
    ↑ CDP 连接 + 无障碍树提取
Browser-Agent
    ↑ 调用
Claude Code

优点

  • 复用登录态：和 bb-browser 一样，直接使用已登录的浏览器
  • 语义理解强：无障碍树包含元素的角色、名称、状态等信息，AI 理解页面更准确
  • 页面结构清晰：对于复杂页面，无障碍树比原始 DOM 更有条理

缺点

  • Token 消耗大：完整的无障碍树信息量很大，一次 snapshot 可能消耗大量 Token
  • 速度较慢：提取和传输无障碍树需要时间
  • 浏览器必须在运行：和 bb-browser 一样的限制

适用场景

  • 复杂页面的智能交互（AI 需要理解页面上下文）
  • 需要登录 + 需要精准定位元素的场景
  • 页面结构复杂、bb-browser 的 @ref 不够用时

横向对比

维度bb-browserPlaywright MCPBrowser-Agent
连接方式CDP → 真实浏览器启动新浏览器实例CDP → 真实浏览器
登录态有无有
Token 消耗低（@ref）中（快照）高（无障碍树）
启动速度快慢快
稳定性中高中
无头模式不支持支持不支持
元素定位@ref 编号无障碍快照 + ref无障碍树节点
JS 执行支持支持支持
安装方式npx bb-browserMCP Server 配置Skill 安装

我的选择建议

按场景选：

  1. 需要登录的操作（B站、小红书、微信等）→ bb-browser

    • 登录态是刚需，Playwright 做不到
    • Token 比 Browser-Agent 省

  2. 公开页面抓取/测试 → Playwright MCP

    • 最稳定，不影响你的浏览器
    • 支持无头模式，后台静默运行

  3. 复杂页面的智能操作 → Browser-Agent

    • AI 需要深度理解页面结构时
    • 不在乎 Token 消耗时

按优先级选：

日常使用中，我的推荐优先级是：

bb-browser（大多数场景） > Playwright（公开页面） > Browser-Agent（复杂交互）

原因很简单：大部分有价值的操作都需要登录态，而 bb-browser 在保持登录态的同时 Token 消耗最低。

实际使用小贴士

bb-browser 使用前准备

需要先用调试端口启动浏览器：

# Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
 
# Edge（指定用户数据目录以保持登录态）
/Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --remote-debugging-port=9223 --user-data-dir="$HOME/Library/Application Support/Microsoft Edge"

注意：重启浏览器时必须指定原始的 --user-data-dir，否则会创建新的配置文件，登录态就丢了。

长文本提取优先用 eval

当需要提取页面上的大段文字时，不要用 snapshot，直接用 JS：

# 比 snapshot 高效得多
bb-browser eval "document.querySelector('.article-content').innerText"

Playwright 的快捷用法

对于简单的公开页面，Playwright 一步到位：

browser_navigate → url
browser_snapshot → 看页面结构
browser_click    → 交互

总结

AI 操控浏览器不是只有一种方案。理解三种工具的差异，按需选择，才能让 AI Agent 既高效又省钱。

一句话记忆：要登录用 bb-browser，不登录用 Playwright，搞不定用 Browser-Agent。

关系图谱

1