浏览器自动化：网页交互与数据提取 - Openclaw Skills

什么是 浏览器自动化？

浏览器自动化技能是 Openclaw Skills 系列中一个强大的解决方案，旨在简化 AI 智能体的网页交互。通过利用 Stagehand CLI，它消除了手动 DOM 选择的复杂性，允许用户用普通英语描述操作。对于希望将基于 Web 的任务集成到其自动化流水线中，而又不想承担传统爬虫脚本维护开销的开发人员来说，这项技能至关重要。

Openclaw Skills 库中此项功能的一个突出特点是其智能环境处理。它会根据您的配置，在本地 Chrome 浏览器和远程 Browserbase 设置之间无缝切换。这确保了无论您是在本地开发，还是运行需要代理或验证码解决的生产负载，浏览器技能都能自动适应您的需求。

下载入口:https://github.com/openclaw/skills/tree/main/skills/peytoncasper/browser-automation

安装与下载

1. ClawHub CLI

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

npx clawhub@latest install browser-automation

2. 手动安装

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

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

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

3. 提示词安装

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

请帮我使用 Clawhub 安装 browser-automation。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。

浏览器自动化 应用场景

• 自动化复杂的 Web 工作流，例如多步骤表单填写或账号注册。
• 从现代 Web 应用程序中抓取结构化数据以进行数据分析。
• 通过自动截图捕获对网站更改进行视觉监控。
• 用于调试或探索新 Web 界面的自然语言元素发现。
• 使用远程浏览器环境提供的隐身模式进行大批量数据提取。

浏览器自动化 工作原理

1. 该技能检测环境变量，以在本地 Chrome 实例或远程 Browserbase 项目之间做出选择。
2. 通过特定的导航命令启动浏览器会话到目标 URL。
3. 处理自然语言操作，以动态地与按钮、输入框和其他页面元素进行交互。
4. 应用提取逻辑来检索特定信息，这些信息可以根据提供的 JSON Schema 进行格式化。
5. 拍摄截图以验证页面状态并提供自动化过程的视觉日志。
6. 请求的任务完成后，安全终止浏览器实例。

浏览器自动化 配置指南

要在您的 Openclaw Skills 环境中开始使用此工具，请确保已安装 Node.js。按照以下步骤设置浏览器自动化技能：

npm install
npm link

对于具有隐身功能的生产用途，请将您的 Browserbase 凭据添加到 .env 文件中：

• BROWSERBASE_API_KEY
• BROWSERBASE_PROJECT_ID

浏览器自动化 数据架构与分类体系

该技能使用命令行界面管理浏览器交互，并根据执行的任务输出结果。以下是 Openclaw Skills 此组件内的数据结构方式：

数据点	描述	格式
浏览器命令	navigate, act, extract, observe, 和 screenshot 等命令	CLI 字符串
自然语言查询	传递给浏览器以执行特定任务的指令	文本字符串
提取的数据	从网页检索到的信息	JSON 或纯文本
观察日志	当前页面上可发现元素的列表	文本摘要
验证资产	当前浏览器状态的视觉证明	PNG 截图

name: browser
description: Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications.
allowed-tools: Bash

Browser Automation

Automate browser interactions using Stagehand CLI with Claude.

First: Environment Selection (Local vs Remote)

The skill automatically selects between local and remote browser environments:

• If Browserbase API keys exist (BROWSERBASE_API_KEY and BROWSERBASE_PROJECT_ID in .env file): Uses remote Browserbase environment
• If no Browserbase API keys: Falls back to local Chrome browser
• No user prompting: The selection happens automatically based on available configuration

Setup (First Time Only)

Check setup.json in this directory. If setupComplete: false:

npm install    # Install dependencies
npm link       # Create global 'browser' command

Commands

All commands work identically in both modes:

browser navigate <url>                    # Go to URL
browser act "<action>"                    # Natural language action
browser extract "<instruction>" ['{}']    # Extract data (optional schema)
browser observe "<query>"                 # Discover elements
browser screenshot                        # Take screenshot
browser close                             # Close browser

Quick Example

browser navigate https://example.com
browser act "click the Sign In button"
browser extract "get the page title"
browser close

Mode Comparison

Best Practices

1. Always navigate first before interacting
2. View screenshots after each command to verify
3. Be specific in action descriptions
4. Close browser when done

Troubleshooting

• Chrome not found: Install Chrome or use Browserbase mode
• Action fails: Use browser observe to discover available elements
• Browserbase fails: Verify API key and project ID are set

For detailed examples, see EXAMPLES.md. For API reference, see REFERENCE.md.