Browser-Use：AI 操控网页的核心技术与实现

1. 项目概述：Browser-Use 如何实现 AI 操控网页

Browser-Use 是一个开源项目，它让 AI 能够像人类一样理解和操作网页。想象一下，你告诉 AI "帮我在 Amazon 上找台 4K 显示器并加入购物车"，它就能自动完成整个流程。这背后的核心技术在于解决了 AI "看不懂"网页的难题。

传统自动化工具如 Selenium 需要开发者预先编写精确的 XPath 或 CSS 选择器来定位元素。而 Browser-Use 的创新之处在于：

• 将复杂的网页结构转化为 AI 能理解的编号列表
• 结合视觉截图和结构化 DOM 信息
• 通过智能的感知-推理-执行循环完成任务

这个项目在 GitHub 上获得了 78k+ Star，是目前最受欢迎的 AI 浏览器自动化解决方案之一。

2. 核心架构解析

2.1 五大核心组件

Browser-Use 的技术栈基于 Python + Playwright + LLM，其架构包含五个关键部分：

1. Agent：核心调度器，驱动整个感知-推理-执行循环
2. BrowserContext：管理浏览器状态，获取页面快照
3. DomService：处理 DOM，将网页转化为 AI 友好的格式
4. Controller + Registry：执行 AI 决策的浏览器操作
5. MessageManager：维护对话历史和上下文记忆

底层使用 Playwright 通过 Chrome DevTools Protocol (CDP) 与浏览器通信，这种底层协议提供了更精细的控制能力，包括 DOM 检查、JavaScript 执行、网络拦截和输入模拟等。

2.2 关键技术选择

为什么选择 Playwright 而不是其他浏览器自动化工具？

• 跨浏览器支持（Chromium、Firefox、WebKit）
• 更快的执行速度和更稳定的 API
• 原生支持等待元素和网络请求
• 强大的调试工具和丰富的社区资源

3. DOM 处理机制

3.1 DOM 提取流程

Browser-Use 的核心创新在于其 DOM 处理方式。传统方法直接将完整 HTML 交给 AI，这会导致：

• 大量无关元素干扰 AI 判断
• 消耗过多 token
• 难以准确定位可交互元素

Browser-Use 的解决方案是 buildDomTree.js 脚本，它执行三重检查：

1. 可见性检查：过滤掉 display: none、visibility: hidden 等不可见元素
2. 可交互性检查：只保留按钮、链接、输入框等可操作元素
3. 位置检查：计算元素坐标，检测是否被遮挡

通过检查的元素会获得一个 highlight_index 编号，最终生成两个关键数据结构：

• element_tree：精简后的 DOM 树
• selector_map：索引到元素的映射字典

3.2 实现细节

DOM 提取的调用链如下：

python复制Agent.step()
 → BrowserContext.get_state()
   → DomService.get_clickable_elements()
     → page.evaluate(buildDomTree.js)  # 注入JS到浏览器
     → _construct_dom_tree(result)     # 转换结果为Python对象
   → 组装BrowserState（DOM树+截图+URL+标题）
 → 将BrowserState发送给LLM

关键代码实现：

python复制class DomService:
    def __init__(self, page):
        self.page = page
        self.js_code = resources.read_text('browser_use.dom', 'buildDomTree.js')

    async def _build_dom_tree(self, highlight_elements, viewport_expansion, ...):
        args = {
            'doHighlightElements': highlight_elements,
            'viewportExpansion': viewport_expansion,
        }
        eval_page = await self.page.evaluate(self.js_code, args)
        return await self._construct_dom_tree(eval_page)

4. AI 决策与执行机制

4.1 感知-推理-执行循环

Agent 的核心是一个持续运行的循环：

python复制class Agent:
    async def run(self, max_steps=100):
        for step in range(max_steps):
            result = await self.step()
            if result.is_done:
                break

    async def step(self):
        # 1. 感知：获取当前页面状态
        state = await self.browser_context.get_state()
        
        # 2. 将状态加入消息历史
        self._message_manager.add_state_message(state)
        
        # 3. 推理：询问LLM下一步操作
        messages = self._message_manager.get_messages()
        llm_response = await self.llm.invoke(messages)
        
        # 4. 执行：执行LLM决定的动作
        for action in llm_response.actions:
            result = await self.controller.act(action, self.browser_context)
        
        return result

4.2 System Prompt 设计

System Prompt 是指导 AI 行为的关键，它明确告诉 AI：

1. 角色定位：浏览器自动化 Agent
2. 输入信息：DOM 编号列表和截图
3. 可用操作：click_element、input_text 等
4. 响应格式：严格的 JSON 结构

示例响应格式：

json复制{
    "current_state": {
        "evaluation_previous_goal": "Success - 找到了搜索框",
        "memory": "我在 Google 首页，需要搜索 cute cats",
        "next_goal": "在搜索框 [5] 里输入 cute cats"
    },
    "action": [
        {
            "input_text": {
                "index": 5,
                "text": "cute cats"
            }
        },
        {
            "press_keys": {
                "keys": "Enter"
            }
        }
    ]
}

4.3 动作执行系统

Controller 和 Registry 共同完成动作执行：

1. Registry：定义所有可用动作及其参数

python复制class ClickElementAction(BaseModel):
    index: int
    xpath: Optional[str] = None

2. Controller：执行具体操作

python复制class Controller:
    def __init__(self):
        self.registry = Registry()

        @self.registry.action("Click element", param_model=ClickElementAction)
        async def click_element(params, browser):
            element_node = await browser.get_dom_element_by_index(params.index)
            await browser._click_element_node(element_node)
            return ActionResult(extracted_content=f"Clicked element {params.index}")

5. 高级特性与优化

5.1 自定义工具扩展

Browser-Use 支持通过装饰器添加自定义功能：

python复制from browser_use import Tools

tools = Tools()

@tools.action(description='保存商品价格到数据库')
def save_price(product_name: str, price: float) -> str:
    db.save(product_name, price)
    return f"Saved {product_name}: ${price}"

agent = Agent(
    task="找到最便宜的 4K 显示器并保存价格",
    llm=llm,
    browser=browser,
    tools=tools,
)

5.2 Watchdog 监控系统

后台监控系统处理各种边缘情况：

5.3 性能优化策略

1. Token 消耗控制：

   • 只发送视口内元素
   • 适当缩小截图尺寸
   • 清理历史消息中的截图

2. DOM 缓存：

   • 同一 Step 内缓存 DOM 结果
   • 操作后自动失效缓存

3. LLM 选择：

   • 官方优化模型 ChatBrowserUse
   • 支持主流模型如 GPT-4o、Claude、Gemini
   • 关键要求：结构化输出能力

6. 实际应用与对比

6.1 典型应用场景

1. 自动化测试：复杂用户流程验证
2. 数据采集：从多个页面提取结构化信息
3. RPA 流程：跨系统数据录入和处理
4. 智能助手：根据自然语言指令操作网页

6.2 同类方案对比

7. 开发实践建议

7.1 值得借鉴的设计

1. 编号地图：简化 DOM 复杂度
2. 双通道感知：截图+DOM 互补
3. 动作注册表：灵活扩展能力
4. 循环架构：稳定的执行流程
5. 事件监控：处理边缘情况

7.2 潜在挑战

1. Token 成本：长任务消耗大
2. 动态页面：SPA 应用适配
3. 反爬机制：自动化检测规避
4. 错误恢复：健壮性设计

8. 总结与资源

Browser-Use 的创新在于将网页操作抽象为 AI 能理解的任务，其核心价值在于：

• 智能的 DOM 预处理
• 高效的感知-推理-执行循环
• 灵活的动作扩展机制
• 稳定的执行环境

对于开发者而言，Browser-Use 不仅是一个工具，更提供了一套可复用的架构模式，适用于各种需要 AI 与界面交互的场景。