作者

dev-book

发布时间

2026/3/6

OpenClaw 使用浏览器工具

OpenClaw 使用浏览器工具 (Browser) 为 OpenClaw 提供强大的网页存取与自动化流功能，让您的 AI 助手能够像人类一样浏览网页、填写表单并抓取数据。

返回列表

浏览器工具

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
      }
    }
  }
}

配置选项说明

选项类型默认值说明
enabledbooleantrue是否启用浏览器技能
headlessbooleantrue无头模式（不显示浏览器窗口）
executablePathstringautoChrome/Chromium 可执行文件路径
defaultTimeoutnumber30000默认超时时间（毫秒）
viewport.widthnumber1920浏览器窗口宽度
viewport.heightnumber1080浏览器窗口高度
userAgentstringauto自定义 User-Agent
proxystring-代理服务器地址

🚀 使用示例

示例 1：访问网页并截图

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

OpenClaw 会：

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

示例 2：搜索信息

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

OpenClaw 会：

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

示例 3：填写表单

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

OpenClaw 会：

  1. 打开表单页面
  2. 识别表单字段
  3. 填写对应信息
  4. 提交表单
  5. 确认提交结果

示例 4：监控页面变化

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

OpenClaw 会：

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

示例 5：批量操作

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

OpenClaw 会：

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

🎨 高级用法

自定义选择器

使用 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. 资源过滤: 阻止加载图片、字体等非必要资源
  2. 并发控制: 限制同时打开的页面数量
  3. 缓存策略: 复用浏览器实例
  4. 超时控制: 避免长时间等待

安全考虑

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

📊 实战案例

案例 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 元时通知我

工作流:

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

案例 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. 使用选择器最佳实践

优先级：

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

4. 错误处理

添加重试机制：

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

5. 日志记录

启用详细日志便于调试：

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

💡 提示

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

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