代理浏览器:先进的网页自动化 CLI - Openclaw 技能

作者:互联网

2026-03-28

AI教程

什么是 代理浏览器?

代理浏览器是由 Vercel 开发的专用命令行界面,旨在促进快速的浏览器自动化。它是需要直接网页交互的 Openclaw 技能的核心组件,例如导航复杂的单页应用程序或执行重复的在线任务。与标准的自动化脚本不同,它通过 Playwright 引擎提供了一个灵活的环境,可以高效地处理动态内容。

通过利用此工具,开发人员可以直接从终端或通过自动化脚本执行复杂的浏览器工作流。它在传统抓取工具不足的情况下特别有效,为在 Openclaw 技能生态系统中管理浏览器会话提供了一种更具响应性和可编程性的方式。

下载入口:https://github.com/openclaw/skills/tree/main/skills/joshhuang123/agent-browser-cli

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install agent-browser-cli

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 /skills/

优先级:工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 agent-browser-cli。如果尚未安装 Clawhub,请先安装(npm i -g clawhub)。

代理浏览器 应用场景

  • 针对奖励系统或考勤跟踪,自动完成每日登录和数字签到。
  • 高速批量表单填写和向 Web 应用程序自动输入数据。
  • 捕获网页截图和无障碍快照,用于视觉监控或技术研究。
  • 提取特定网页内容或无障碍树,用于 Openclaw 技能内的数据分析。
  • 导航需要模拟用户交互(如点击和按键)的多步骤 Web 工作流。
代理浏览器 工作原理
  1. 使用 navigate 或 open 命令打开目标 URL 以初始化浏览器会话。
  2. 生成页面快照以检索无障碍树和元素引用,以便精确锁定目标。
  3. 使用生成的引用(例如 @e14)、CSS 选择器或 ARIA 角色识别特定的 UI 元素。
  4. 根据任务要求执行点击按钮、填写输入字段或选择下拉选项等交互。
  5. 捕获必要的数据、HTML 或截图作为输出,以便进一步处理或存储。
  6. 使用 close 命令终止浏览器会话以释放系统资源。

代理浏览器 配置指南

要将此功能集成到您的环境中,请确保已安装 Node.js,然后执行以下命令:

npm install -g agent-browser
agent-browser install

安装完成后,该工具即可用于任何需要浏览器级自动化的 Openclaw 技能。

代理浏览器 数据架构与分类体系

代理浏览器通过快照和元数据捕获来组织数据。它主要利用以下结构来管理 Web 元素和页面状态:

数据类型 描述 格式
快照 当前页面的无障碍树,用于元素发现 文本
元素引用 在快照期间生成的 UI 元素唯一标识符(例如 @e1) 字符串
视觉输出 用于调试或存档的全页或带注释的截图 PNG
页面元数据 描述性属性,包括页面标题、当前 URL 和原始 HTML 文本/HTML
name: agent-browser
description: 使用 agent-browser CLI 进行浏览器自动化。用于签到、填表、截图、信息抓取等需要控制浏览器的任务。触发条件:(1) 用户要求自动化浏览器操作 (2) 需要签到、填表、点击按钮 (3) 需要抓取网页内容作为研究素材

Agent Browser

Vercel 出品的浏览器自动化 CLI,基于 Playwright,比标准浏览器工具更快更灵活。

快速开始

agent-browser open      # 打开网页
agent-browser snapshot       # 获取页面可访问性树
agent-browser click @   # 点击元素(用ref引用)
agent-browser fill @ "内容"  # 填入内容
agent-browser close         # 关闭浏览器

常用命令

导航

agent-browser open       # 打开URL(别名:goto, navigate)
agent-browser back            # 后退
agent-browser forward         # 前进
agent-browser reload          # 刷新

交互

agent-browser click                     # 点击
agent-browser dblclick                   # 双击
agent-browser fill  "text"               # 填入(清空后填)
agent-browser type  "text"               # 输入(追加)
agent-browser select               # 选择下拉选项
agent-browser check                       # 勾选复选框
agent-browser uncheck                    # 取消勾选
agent-browser press                       # 按键(Enter, Tab, Escape等)

获取信息

agent-browser snapshot              # 获取可访问性树(推荐)
agent-browser get text         # 获取文本
agent-browser get html         # 获取HTML
agent-browser get value        # 获取输入值
agent-browser get title             # 获取页面标题
agent-browser get url               # 获取当前URL
agent-browser screenshot [path]     # 截图
agent-browser screenshot --annotate  # 带标注的截图

元素定位

通过 snapshot 输出的 ref(如 @e14)直接引用:

agent-browser click @e14
agent-browser fill @e13 "hello"

或使用 CSS 选择器:

agent-browser click "#submit"
agent-browser fill "input[name='email']" "test@test.com"

或使用 ARIA 角色查找:

agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "test@test.com"
agent-browser find placeholder "Search" type "query"

典型工作流

1. 签到任务

# 打开登录页
agent-browser open <签到页面URL>

# 获取页面结构
agent-browser snapshot

# 点击登录/签到按钮(用实际ref替换 @eXX)
agent-browser click @eXX

# 等待页面加载
sleep 2
agent-browser snapshot

2. 填表任务

agent-browser open <表单URL>
agent-browser snapshot

# 填入各字段
agent-browser find label "用户名" fill "myuser"
agent-browser find label "密码" fill "mypassword"
agent-browser find role button click --name "提交"

3. 定时签到(配合cron)

创建脚本 ~/.openclaw/scripts/daily-checkin.sh

#!/bin/bash
agent-browser open <签到URL>
sleep 2
agent-browser find role button click --name "签到"
agent-browser screenshot /tmp/checkin_$(date +%Y%m%d).png
agent-browser close

注意事项

  1. 先 snapshot 再操作 - 每次页面变化后重新获取 ref
  2. 添加等待 - 页面加载需要时间,用 sleep 2 或等待
  3. 保持浏览器开启 - 多个操作可以在同一浏览器会话中完成
  4. 完成后关闭 - 用 agent-browser close 释放资源

依赖安装

如果 agent-browser 未安装:

npm install -g agent-browser
agent-browser install