浏览器工具

约 2114 字大约 7 分钟

2026-03-02

Browser 技能为 OpenClaw 提供强大的网页访问与自动化能力，让你的 AI 助手能够像人类一样浏览网页、填写表单、抓取数据，实现真正的浏览器自动化。

🎯 核心功能

网页浏览

访问任意网页并获取内容
截图保存页面状态
滚动页面查看完整内容
处理动态加载的内容

页面交互

点击按钮和链接
填写表单和输入框
选择下拉菜单
上传文件

数据抓取

提取页面文本内容
获取特定元素信息
解析表格数据
下载文件

自动化任务

自动登录网站
批量操作表单
定时检查页面更新
执行复杂的多步骤流程

📦 安装与配置

安装 Browser 技能

# 从 ClawHub 安装
openclaw skill install browser

# 或使用 npm
npm install -g @openclaw/skill-browser

安装浏览器依赖

Browser 技能基于 Puppeteer，需要安装 Chromium：

# 自动安装 Chromium
npx puppeteer browsers install chrome

# 或使用系统已安装的 Chrome/Chromium
# 在配置中指定路径

基础配置

编辑 ~/.openclaw/config.json：

{
  "skills": {
    "browser": {
      "enabled": true,
      "headless": true,
      "executablePath": "/usr/bin/chromium",
      "defaultTimeout": 30000,
      "viewport": {
        "width": 1920,
        "height": 1080
      }
    }
  }
}

配置选项说明

选项	类型	默认值	说明
`enabled`	boolean	true	是否启用浏览器技能
`headless`	boolean	true	无头模式（不显示浏览器窗口）
`executablePath`	string	auto	Chrome/Chromium 可执行文件路径
`defaultTimeout`	number	30000	默认超时时间（毫秒）
`viewport.width`	number	1920	浏览器窗口宽度
`viewport.height`	number	1080	浏览器窗口高度
`userAgent`	string	auto	自定义 User-Agent
`proxy`	string	-	代理服务器地址

🚀 使用示例

示例 1：访问网页并截图

@OpenClaw 打开 https://github.com/openclaw/openclaw 并截图

OpenClaw 会：

启动浏览器
访问指定网页
等待页面加载完成
截取页面截图
返回截图和页面摘要

示例 2：搜索信息

@OpenClaw 用 Google 搜索 "OpenClaw 教程"，并总结前 3 个结果

OpenClaw 会：

打开 Google 搜索页面
输入搜索关键词
提取搜索结果
访问前 3 个链接
总结内容并返回

示例 3：填写表单

@OpenClaw 帮我在 https://example.com/contact 填写联系表单
姓名：张三
邮箱：zhangsan@example.com
消息：咨询产品信息

OpenClaw 会：

打开表单页面
识别表单字段
填写对应信息
提交表单
确认提交结果

示例 4：监控页面变化

@OpenClaw 每小时检查一次 https://example.com/price，如果价格低于 100 元就通知我

OpenClaw 会：

创建定时任务
定期访问页面
提取价格信息
比较价格变化
满足条件时发送通知

示例 5：批量操作

@OpenClaw 从这个 CSV 文件中读取 URL 列表，访问每个页面并提取标题

OpenClaw 会：

读取 CSV 文件
遍历 URL 列表
依次访问每个页面
提取页面标题
生成汇总报告

🎨 高级用法

自定义选择器

使用 CSS 选择器精确定位元素：

@OpenClaw 打开 https://example.com，点击 class 为 "submit-button" 的按钮

等待特定元素

@OpenClaw 打开 https://example.com，等待 id 为 "content" 的元素加载完成后截图

执行 JavaScript

@OpenClaw 打开 https://example.com，执行 JavaScript: document.querySelector('.price').textContent

处理弹窗

@OpenClaw 打开 https://example.com，如果出现弹窗就关闭它，然后继续操作

模拟移动设备

@OpenClaw 用 iPhone 12 的视图打开 https://example.com

🔧 技术细节

浏览器引擎

Browser 技能基于以下技术：

Puppeteer: Google 官方的 Node.js 库
Chromium: 开源浏览器引擎
DevTools Protocol: Chrome 开发者工具协议

工作原理

用户指令 → OpenClaw 解析 → 生成浏览器操作序列 → Puppeteer 执行 → 返回结果

性能优化

资源过滤: 阻止加载图片、字体等非必要资源
并发控制: 限制同时打开的页面数量
缓存策略: 复用浏览器实例
超时控制: 避免长时间等待

安全考虑

沙箱隔离: 浏览器运行在隔离环境中
权限控制: 限制可访问的域名和操作
内容过滤: 自动过滤恶意内容
日志记录: 记录所有浏览器操作

📊 实战案例

案例 1：自动签到

需求: 每天自动在某网站签到

实现:

@OpenClaw 创建定时任务：每天早上 9 点访问 https://example.com/signin，点击签到按钮

配置:

{
  "tasks": [{
    "name": "daily-signin",
    "schedule": "0 9 * * *",
    "action": "browser.navigate",
    "params": {
      "url": "https://example.com/signin",
      "actions": [
        { "type": "click", "selector": ".signin-button" }
      ]
    }
  }]
}

案例 2：价格监控

需求: 监控商品价格，降价时通知

实现:

@OpenClaw 监控 https://example.com/product/123 的价格，低于 500 元时通知我

工作流:

定期访问商品页面
提取价格信息
与历史价格对比
满足条件时发送通知

案例 3：数据采集

需求: 采集竞品网站的产品信息

实现:

@OpenClaw 访问 https://competitor.com/products，提取所有产品的名称、价格和描述，保存为 CSV

输出:

产品名称,价格,描述
产品A,99.00,高性能产品
产品B,199.00,旗舰级产品
...

案例 4：自动化测试

需求: 测试网站的登录流程

实现:

@OpenClaw 测试 https://example.com 的登录功能：
1. 打开登录页面
2. 输入用户名: test@example.com
3. 输入密码: password123
4. 点击登录按钮
5. 验证是否成功跳转到首页

案例 5：内容聚合

需求: 从多个新闻网站聚合今日头条

实现:

@OpenClaw 访问以下新闻网站，提取今日头条新闻：
- https://news1.com
- https://news2.com
- https://news3.com
生成一份汇总报告

⚠️ 注意事项

法律与道德

遵守网站条款: 不要违反网站的使用条款
尊重 robots.txt: 遵守网站的爬虫规则
合理频率: 避免过于频繁的请求
数据使用: 合法使用采集的数据

技术限制

验证码: 无法自动处理复杂验证码
动态内容: 某些 SPA 应用可能需要特殊处理
登录状态: 需要手动配置 Cookie 或登录凭证
反爬虫: 某些网站有反爬虫机制

性能影响

资源消耗: 浏览器会占用较多内存和 CPU
网络带宽: 访问网页会消耗网络流量
响应时间: 浏览器操作通常比 API 调用慢

🔍 故障排除

问题 1: 浏览器启动失败

症状: 提示 "Failed to launch browser"

解决方案:

# 检查 Chromium 是否安装
which chromium

# 重新安装 Chromium
npx puppeteer browsers install chrome

# 或指定系统 Chrome 路径
export PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome

问题 2: 页面加载超时

症状: 提示 "Navigation timeout"

解决方案:

{
  "skills": {
    "browser": {
      "defaultTimeout": 60000,
      "waitUntil": "networkidle2"
    }
  }
}

问题 3: 元素找不到

症状: 提示 "Element not found"

解决方案:

检查选择器是否正确
等待页面完全加载
使用更具体的选择器
检查元素是否在 iframe 中

问题 4: 内存占用过高

症状: 系统内存不足

解决方案:

{
  "skills": {
    "browser": {
      "maxConcurrentPages": 3,
      "closeIdlePages": true,
      "idleTimeout": 300000
    }
  }
}

问题 5: 被网站检测为机器人

症状: 访问被拒绝或需要验证

解决方案:

{
  "skills": {
    "browser": {
      "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
      "stealth": true,
      "randomDelay": true
    }
  }
}

📚 相关资源

🎓 最佳实践

1. 合理使用无头模式

开发时使用有头模式便于调试：

{
  "skills": {
    "browser": {
      "headless": false
    }
  }
}

生产环境使用无头模式节省资源：

{
  "skills": {
    "browser": {
      "headless": true
    }
  }
}

2. 设置合理的超时时间

根据网站响应速度调整：

{
  "skills": {
    "browser": {
      "defaultTimeout": 30000,
      "navigationTimeout": 60000
    }
  }
}

3. 使用选择器最佳实践

优先级：

ID 选择器: #unique-id
数据属性: [data-testid="button"]
Class 选择器: .specific-class
标签选择器: button.submit

4. 错误处理

添加重试机制：

{
  "skills": {
    "browser": {
      "retryAttempts": 3,
      "retryDelay": 5000
    }
  }
}

5. 日志记录

启用详细日志便于调试：

{
  "skills": {
    "browser": {
      "logLevel": "debug",
      "screenshotOnError": true
    }
  }
}

💡 提示

Browser 技能是 OpenClaw 最强大的功能之一，但也需要谨慎使用。请确保：

遵守目标网站的使用条款
合理控制请求频率
注意资源消耗
保护个人隐私和数据安全