Skill: xiejianjun000/agent-browser-backup-20260407 (version 1.0.0)

--- name: Agent Browser description: A fast Rust-based headless browser automation CLI with Node.js fallback that enables AI agents to navigate, click, type, and snapshot pages via structured commands. read_when: - Automating web interactions - Extracting structured data from pages - Filling forms programmatically - Testing web UIs metadata: {"clawdbot":{"emoji":"🌐","requires":{"bins":["node","npm"]}}} allowed-tools: Bash(agent-browser:*) --- # Browser Automation with agent-browser ## Installation ### npm recommended ```bash npm install -g agent-browser agent-browser install agent-browser install --with-deps ``` ### From Source ```bash git clone https://github.com/vercel-labs/agent-browser cd agent-browser pnpm install pnpm build agent-browser install ``` ## Quick start ```bash agent-browser open <url> # Navigate to page agent-browser snapshot -i # Get interactive elements with refs agent-browser click @e1 # Click element by ref agent-browser fill @e2 "text" # Fill input by ref agent-browser close # Close browser ``` ## Core workflow 1. Navigate: `agent-browser open <url>` 2. Snapshot: `agent-browser snapshot -i` (returns elements with refs like `@e1`, `@e2`) 3. Interact using refs from the snapshot 4. Re-snapshot after navigation or significant DOM changes ## Commands ### Navigation ```bash agent-browser open <url> # Navigate to URL agent-browser back # Go back agent-browser forward # Go forward agent-browser reload # Reload page agent-browser close # Close browser ``` ### Snapshot (page analysis) ```bash agent-browser snapshot # Full accessibility tree agent-browser snapshot -i # Interactive elements only (recommended) agent-browser snapshot -c # Compact output agent-browser snapshot -d 3 # Limit depth to 3 agent-browser snapshot -s "#main" # Scope to CSS selector ``` ### Interactions (use @refs from snapshot) ```bash agent-browser click @e1 # Click agent-browser dblclick @e1 # Double-click agent-browser focus @e1 # Focus element agent-browser fill @e2 "text" # Clear and type agent-browser type @e2 "text" # Type without clearing agent-browser press Enter # Press key agent-browser press Control+a # Key combination agent-browser keydown Shift # Hold key down agent-browser keyup Shift # Release key agent-browser hover @e1 # Hover agent-browser check @e1 # Check checkbox agent-browser uncheck @e1 # Uncheck checkbox agent-browser select @e1 "value" # Select dropdown agent-browser scroll down 500 # Scroll page agent-browser scrollintoview @e1 # Scroll element into view agent-browser drag @e1 @e2 # Drag and drop agent-browser upload @e1 file.pdf # Upload files ``` ### Get information ```bash agent-browser get text @e1 # Get element text agent-browser get html @e1 # Get innerHTML agent-browser get value @e1 # Get input value agent-browser get attr @e1 href # Get attribute agent-browser get title # Get page title agent-browser get url # Get current URL agent-browser get count ".item" # Count matching elements agent-browser get box @e1 # Get bounding box ``` ### Check state ```bash agent-browser is visible @e1 # Check if visible agent-browser is enabled @e1 # Check if enabled agent-browser is checked @e1 # Check if checked ``` ### Screenshots & PDF ```bash agent-browser screenshot # Screenshot to stdout agent-browser screenshot path.png # Save to file agent-browser screenshot --full # Full page agent-browser pdf output.pdf # Save as PDF ``` ### Video recording ```bash agent-browser record start ./demo.webm # Start recording (uses current URL + state) agent-browser click @e1 # Perform actions agent-browser record stop # Stop and save video agent-browser record restart ./take2.webm # Stop current + start new recording ``` Recording creates a fresh context but preserves cookies/storage from your session. If no URL is provided, it automatically returns to your current page. For smooth demos, explore first, then start recording. ### Wait ```bash agent-browser wait @e1 # Wait for element agent-browser wait 2000 # Wait milliseconds agent-browser wait --text "Success" # Wait for text agent-browser wait --url "/dashboard" # Wait for URL pattern agent-browser wait --load networkidle # Wait for network idle agent-browser wait --fn "window.ready" # Wait for JS condition ``` ### Mouse control ```bash agent-browser mouse move 100 200 # Move mouse agent-browser mouse down left # Press button agent-browser mouse up left # Release button agent-browser mouse wheel 100 # Scroll wheel ``` ### Semantic locators (alternative to refs) ```bash agent-browser find role button click --name "Submit" agent-browser find text "Sign In" click agent-browser find label "Email" fill "[REDACTED_SECRET]" agent-browser find first ".item" click agent-browser find nth 2 "a" text ``` ### Browser settings ```bash agent-browser set viewport 1920 1080 # Set viewport size agent-browser set device "iPhone 14" # Emulate device agent-browser set geo 37.7749 -122.4194 # Set geolocation agent-browser set offline on # Toggle offline mode agent-browser set headers '{"X-Key":"v"}' # Extra HTTP headers agent-browser set credentials user pass # HTTP basic auth agent-browser set media dark # Emulate color scheme ``` ### Cookies & Storage ```bash agent-browser cookies # Get all cookies agent-browser cookies set name value # Set cookie agent-browser cookies clear # Clear cookies agent-browser storage local # Get all localStorage agent-browser storage local key # Get specific key agent-browser storage local set k v # Set value agent-browser storage local clear # Clear all ``` ### Network ```bash agent-browser network route <url> # Intercept requests agent-browser network route <url> --abort # Block requests agent-browser network route <url> --body '{}' # Mock response agent-browser network unroute [url] # Remove routes agent-browser network requests # View tracked requests agent-browser network requests --filter api # Filter requests ``` ### Tabs & Windows ```bash agent-browser tab # List tabs agent-browser tab new [url] # New tab agent-browser tab 2 # Switch to tab agent-browser tab close # Close tab agent-browser window new # New window ``` ### Frames ```bash agent-browser frame "#iframe" # Switch to iframe agent-browser frame main # Back to main frame ``` ### Dialogs ```bash agent-browser dialog accept [text] # Accept dialog agent-browser dialog dismiss # Dismiss dialog ``` ### JavaScript ```bash agent-browser eval "document.title" # Run JavaScript ``` ### State management ```bash agent-browser state save auth.json # Save session state agent-browser state load auth.json # Load saved state ``` ## Example: Form submission ```bash agent-browser open https://example.com/form agent-browser snapshot -i # Output shows: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3] agent-browser fill @e1 "[REDACTED_SECRET]" agent-browser fill @e2 "password123" agent-browser click @e3 agent-browser wait --load networkidle agent-browser snapshot -i # Check result ``` ## Example: Authentication with saved state ```bash # Login once agent-browser open https://app.example.com/login agent-browser snapshot -i agent-browser fill @e1 "username" agent-browser fill @e2 "password" agent-browser click @e3 agent-browser wait --url "/dashboard" agent-browser state save auth.json # Later sessions: load saved state agent-browser state load auth.json agent-browser open https://app.example.com/dashboard ``` ## Sessions (parallel browsers) ```bash agent-browser --session test1 open site-a.com agent-browser --session test2 open site-b.com agent-browser session list ``` ## JSON output (for parsing) Add `--json` for machine-readable output: ```bash agent-browser snapshot -i --json agent-browser get text @e1 --json ``` ## Debugging ```bash agent-browser open example.com --headed # Show browser window agent-browser console # View console messages agent-browser console --clear # Clear console agent-browser errors # View page errors agent-browser errors --clear # Clear errors agent-browser highlight @e1 # Highlight element agent-browser trace start # Start recording trace agent-browser trace stop trace.zip # Stop and save trace agent-browser record start ./debug.webm # Record from current page agent-browser record stop # Save recording agent-browser --cdp 9222 snapshot # Connect via CDP ``` ## Troubleshooting - If the command is not found on Linux ARM64, use the full path in the bin folder. - If an element is not found, use snapshot to find the correct ref. - If the page is not loaded, add a wait command after navigation. - Use --headed to see the browser window for debugging. ## Options - --session <name> uses an isolated session. - --json provides JSON output. - --full takes a full page screenshot. - --headed shows the browser window. - --timeout sets the command timeout in milliseconds. - --cdp <port> connects via Chrome DevTools Protocol. ## Notes - Refs are stable per page load but change on navigation. - Always snapshot after navigation to get new refs. - Use fill instead of type for input fields to ensure existing text is cleared. ## Reporting Issues - Skill issues: Open an issue at https://github.com/TheSethRose/Agent-Browser-CLI - agent-browser CLI issues: Open an issue at https://github.com/vercel-labs/agent-browser

path: CONTRIBUTING.md
content: # Contributing to Agent Browser Skill

This skill wraps the agent-browser CLI. Determine where the problem lies before reporting issues.

## Issue Reporting Guide

### Open an issue in this repository if

- The skill documentation is unclear or missing
- Examples in SKILL.md do not work
- You need help using the CLI with this skill wrapper
- The skill is missing a command or feature

### Open an issue at the agent-browser repository if

- The CLI crashes or throws errors
- Commands do not behave as documented
- You found a bug in the browser automation
- You need a new feature in the CLI

## Before Opening an Issue

1. Install the latest version
   ```bash
   npm install -g agent-browser@latest
   ```

2. Test the command in your terminal to isolate the issue

## Issue Report Template

Use this template to provide necessary information.

```markdown
### Description
[Provide a clear and concise description of the bug]

### Reproduction Steps
1. [First Step]
2. [Second Step]
3. [Observe error]

### Expected Behavior
[Describe what you expected to happen]

### Environment Details
- **Skill Version:** [e.g. 1.0.2]
- **agent-browser Version:** [output of agent-browser --version]
- **Node.js Version:** [output of node -v]
- **Operating System:** [e.g. macOS Sonoma, Windows 11, Ubuntu 22.04]

### Additional Context
- [Full error output or stack trace]
- [Screenshots]
- [Website URLs where the failure occurred]
```

## Adding New Commands to the Skill

Update SKILL.md when the upstream CLI adds new commands.
- Keep the Installation section
- Add new commands in the correct category
- Include usage examples


path: _meta.json
content: ownerId: kn72ce44tqw8bnnnewrn1s5x3s7yz7sq
slug: agent-browser
version: 0.2.0
publishedAt: 1768882342488

path: 快速演示.md
content: # agent-browser 快速演示

## ✅ 安装验证

```bash
$ agent-browser --version
agent-browser 0.21.2

$ which agent-browser
/opt/jvs-claw/base/bin/agent-browser
```

## 🎯 演示场景：访问 Example.com

### 步骤 1：打开网页
```bash
agent-browser open https://example.com
```

### 步骤 2：获取页面快照
```bash
agent-browser snapshot -i
```

预期输出：
```
[ref=e1] heading "Example Domain"
[ref=e2] paragraph "This domain is for use in documentation..."
[ref=e3] link "Learn more"
```

### 步骤 3：获取页面信息
```bash
# 获取标题
agent-browser get title

# 获取 URL
agent-browser get url

# 获取文本
agent-browser get text @e1
```

### 步骤 4：截图
```bash
agent-browser screenshot example.png
```

### 步骤 5：关闭浏览器
```bash
agent-browser close
```

---

## 📋 实际演示命令（可复制执行）

```bash
# 1. 打开并快照
agent-browser open https://example.com && agent-browser snapshot -i

# 2. 获取页面标题
agent-browser get title

# 3. 获取 heading 文本
agent-browser get text @e1

# 4. 截图保存
agent-browser screenshot /tmp/example.png

# 5. 关闭浏览器
agent-browser close
```

---

## 🎬 更多演示场景

### 百度搜索
```bash
agent-browser open https://www.baidu.com
agent-browser snapshot -i
agent-browser fill @e1 "Kimi Agent"
agent-browser click @e2
agent-browser wait 2000
agent-browser screenshot /tmp/baidu.png
agent-browser close
```

### 获取新闻标题
```bash
agent-browser open https://news.example.com
agent-browser snapshot -i
agent-browser get count ".news-item"
agent-browser get text ".news-item:first-child .title"
agent-browser close
```

---

## 📊 演示状态

| 项目 | 状态 |
|------|------|
| SkillHub CLI | ✅ 已安装 |
| agent-browser | ✅ 已安装 (v0.21.2) |
| 技能文档 | ✅ 已创建 |
| 演示文档 | ✅ 已创建 |
| 浏览器服务 | 🟡 初始化中 |

---

_演示时间：2026-03-27 14:45_


path: 演示文档.md
content: # agent-browser 技能演示文档

_创建时间：2026-03-27_  
_演示人：小濮存_

---

## 🌐 agent-browser 简介

**agent-browser** 是一个基于 Rust 的快速无头浏览器自动化 CLI 工具，支持：

- ✅ 页面导航、点击、输入、快照
- ✅ AI 代理友好的结构化命令
- ✅ 无障碍树快照 + 引用式元素选择
- ✅ 网页测试、表单填写、数据提取
- ✅ 截图、录屏、PDF 生成

---

## 📦 安装状态

| 组件 | 状态 | 位置 |
|------|------|------|
| **SkillHub CLI** | ✅ 已安装 | `/home/admin/.local/bin/skillhub` |
| **agent-browser** | ✅ 已安装 | `/opt/jvs-claw/base/bin/agent-browser` |
| **技能文档** | ✅ 已安装 | `/home/admin/openclaw/workspace/skills/agent-browser/` |

---

## 🚀 快速开始

### 1. 打开网页

```bash
agent-browser open https://example.com
```

### 2. 获取页面快照（查看可交互元素）

```bash
agent-browser snapshot -i
```

输出示例：
```
[ref=e1] heading "Example Domain"
[ref=e2] paragraph "This domain is for use in documentation..."
[ref=e3] link "Learn more"
```

### 3. 与元素交互

```bash
# 点击链接
agent-browser click @e3

# 获取文本
agent-browser get text @e1

# 获取 URL
agent-browser get url
```

### 4. 关闭浏览器

```bash
agent-browser close
```

---

## 📋 完整演示场景

### 场景 1：百度搜索

```bash
# 1. 打开百度
agent-browser open https://www.baidu.com

# 2. 获取页面快照
agent-browser snapshot -i

# 3. 找到搜索框并输入
agent-browser fill @e1 "Kimi Agent 生态爪痕"

# 4. 点击搜索按钮
agent-browser click @e2

# 5. 等待页面加载
agent-browser wait --load networkidle

# 6. 获取搜索结果
agent-browser get count ".result"

# 7. 截图保存
agent-browser screenshot baidu_search.png

# 8. 关闭浏览器
agent-browser close
```

---

### 场景 2：表单自动填写

```bash
# 1. 打开表单页面
agent-browser open https://example.com/form

# 2. 获取表单元素
agent-browser snapshot -i

# 3. 填写表单
agent-browser fill @e1 "张三"           # 姓名
agent-browser fill @e2 "[REDACTED_SECRET]"  # 邮箱
agent-browser fill @e3 "13800138000"    # 电话
agent-browser select @e4 "北京"         # 城市下拉选择
agent-browser check @e5                 # 勾选协议

# 4. 提交表单
agent-browser click @e6

# 5. 等待提交完成
agent-browser wait --text "提交成功"

# 6. 关闭浏览器
agent-browser close
```

---

### 场景 3：数据抓取

```bash
# 1. 打开目标网站
agent-browser open https://news.example.com

# 2. 获取新闻列表
agent-browser snapshot -i

# 3. 循环获取每条新闻标题
for i in {1..10}; do
    agent-browser get text @e$i
done

# 4. 或者使用 CSS 选择器
agent-browser get count ".news-item"
agent-browser get text ".news-item:nth-child(1) .title"

# 5. 保存为 JSON
agent-browser eval "
  Array.from(document.querySelectorAll('.news-item')).map(item => ({
    title: item.querySelector('.title').textContent,
    link: item.querySelector('a').href,
    time: item.querySelector('.time').textContent
  }))
" --json > news.json

# 6. 关闭浏览器
agent-browser close
```

---

### 场景 4：登录并保存会话

```bash
# 第一次：登录并保存状态
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "username"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --url "/dashboard"
agent-browser state save auth.json

# 后续使用：直接加载状态
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard
agent-browser snapshot -i

# 关闭浏览器
agent-browser close
```

---

### 场景 5：截图和录屏

```bash
# 截图
agent-browser open https://example.com
agent-browser screenshot example.png
agent-browser screenshot --full example_full.png  # 全屏截图

# 录屏
agent-browser record start demo.webm
agent-browser open https://example.com
agent-browser click @e1
agent-browser fill @e2 "test"
agent-browser record stop

# 生成 PDF
agent-browser open https://example.com
agent-browser pdf example.pdf

# 关闭浏览器
agent-browser close
```

---

## 🔧 常用命令速查

### 导航
```bash
agent-browser open <url>      # 打开网页
agent-browser back            # 后退
agent-browser forward         # 前进
agent-browser reload          # 刷新
agent-browser close           # 关闭
```

### 快照
```bash
agent-browser snapshot            # 完整快照
agent-browser snapshot -i         # 仅可交互元素（推荐）
agent-browser snapshot -c         # 紧凑输出
agent-browser snapshot -d 3       # 限制深度
```

### 交互
```bash
agent-browser click @e1           # 点击
agent-browser fill @e2 "text"     # 填写输入框
agent-browser type @e2 "text"     # 输入（不清空）
agent-browser press Enter         # 按键
agent-browser hover @e1           # 悬停
agent-browser check @e1           # 勾选
agent-browser select @e1 "value"  # 下拉选择
```

### 获取信息
```bash
agent-browser get text @e1        # 获取文本
agent-browser get html @e1        # 获取 HTML
agent-browser get value @e1       # 获取输入值
agent-browser get url             # 获取当前 URL
agent-browser get title           # 获取页面标题
```

### 截图/录屏
```bash
agent-browser screenshot          # 截图
agent-browser screenshot path.png # 保存到文件
agent-browser screenshot --full   # 全屏截图
agent-browser record start demo.webm  # 开始录屏
agent-browser record stop             # 停止录屏
agent-browser pdf output.pdf          # 生成 PDF
```

### 等待
```bash
agent-browser wait @e1                     # 等待元素
agent-browser wait 2000                    # 等待 2 秒
agent-browser wait --text "Success"        # 等待文本
agent-browser wait --url "/dashboard"      # 等待 URL
agent-browser wait --load networkidle      # 等待网络空闲
```

---

## 💡 最佳实践

### 1. 总是先快照再交互
```bash
# ✅ 正确
agent-browser open https://example.com
agent-browser snapshot -i
agent-browser click @e1

# ❌ 错误（不知道元素 ref）
agent-browser open https://example.com
agent-browser click ???
```

### 2. 使用 fill 而不是 type
```bash
# ✅ fill 会先清空再输入
agent-browser fill @e1 "新文本"

# ❌ type 会追加到现有文本后
agent-browser type @e1 "新文本"
```

### 3. 导航后重新快照
```bash
# 导航后 refs 会变化，需要重新快照
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # 重新获取 refs
```

### 4. 使用语义化选择器
```bash
# 使用角色查找
agent-browser find role button click --name "提交"

# 使用文本查找
agent-browser find text "登录" click

# 使用标签查找
agent-browser find label "邮箱" fill "[REDACTED_SECRET]"
```

---

## 🐛 故障排除

| 问题 | 解决方案 |
|------|----------|
| 命令未找到 | 检查路径：`which agent-browser` |
| 元素未找到 | 先执行 `snapshot -i` 获取正确的 ref |
| 页面未加载 | 添加 `wait --load networkidle` |
| 需要调试 | 添加 `--headed` 参数显示浏览器窗口 |
| 超时错误 | 添加 `--timeout 30000` 增加超时时间 |

---

## 📊 演示统计

| 指标 | 数据 |
|------|------|
| 技能名称 | agent-browser |
| 版本 | 0.2.0 |
| 安装位置 | `/opt/jvs-claw/base/bin/agent-browser` |
| 技能文档 | `/home/admin/openclaw/workspace/skills/agent-browser/` |
| 安装时间 | 2026-03-27 13:42 |
| 演示时间 | 2026-03-27 14:40 |

---

_演示完成：小濮存 · 严谨专业版_


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)