教程 04 — 浏览器自动化：让 AI 帮你操控网页

目标：使用 OpenClaw 内置的浏览器工具，让 AI 自动浏览网页、截图、提取信息、填写表单。

原理

OpenClaw 集成了一个专用的 Chrome/Chromium 实例，AI 可以通过工具调用来：

• 导航到指定 URL
• 截图并分析页面
• 点击元素、填写表单
• 提取结构化数据

你的指令 → AI → browser_navigate / browser_action → Chrome → 截图/结果 → AI 分析 → 回复

前置条件

确保 Chrome 或 Chromium 已安装：

# macOS
brew install --cask google-chrome
 
# 或者使用 Chromium
brew install --cask chromium

基础用法：让 AI 抓取网页信息

在 WebChat 或 Telegram 中直接描述任务：

示例 1：查看天气

帮我打开 https://wttr.in/Shanghai 截图，告诉我上海今天天气

示例 2：抓取 GitHub 仓库信息

帮我打开 https://github.com/trending，列出今天 GitHub 上最热门的 5 个项目，包括语言和 star 数

示例 3：读取在线文档

打开 https://docs.python.org/3/library/asyncio.html，给我总结 asyncio 最常用的 5 个函数

进阶：表单自动填写

帮我打开 https://httpbin.org/forms/post
填写以下信息：
- custname: 张三
- custtel: 13800138000
- custemail: zhangsan@example.com
- comments: 这是一个测试订单

然后截图给我看结果

进阶：批量数据提取

结合自定义 Skill，创建一个数据采集技能：

~/.openclaw/workspace/skills/数据采集/SKILL.md:

# 网页数据采集专家
 
用户会提供一个网址和需要提取的数据字段。你需要：
 
1. 使用 browser_navigate 打开页面
2. 使用 browser_snapshot 获取页面内容
3. 按用户要求提取结构化数据
4. 以 JSON 或 Markdown 表格格式输出
 
注意：
- 如果页面需要滚动，分多次截图
- 如果有分页，询问用户是否需要翻页采集
- 遇到登录墙时告知用户

使用：

/数据采集

网址：https://news.ycombinator.com
需要提取：标题、链接、分数、评论数（前 10 条）

进阶：监控网页变化

结合 Cron 定时任务（需配置 cron 频道），可以定期检查网页：

{
  "channels": {
    "cron": {
      "enabled": true,
      "jobs": [
        {
          "cron": "0 9 * * 1-5",
          "message": "打开 https://github.com/trending 截图，总结今日热门项目并发给我",
          "channel": "telegram"
        }
      ]
    }
  }
}

这样每个工作日早上 9 点，AI 会自动爬取 GitHub Trending 并通过 Telegram 发给你。

工具一览

AI 在浏览器任务中可以使用的工具：

注意事项

• 浏览器工具在沙盒模式下运行，不会影响你日常使用的浏览器
• 不要用于登录涉及敏感账户的网站（AI 会看到截图内容）
• 复杂 SPA 页面（如 React/Vue 应用）可能需要等待加载，可以在指令里说明

常见问题

需要额外安装 ChromeDriver 或 Selenium 吗？

不需要。OpenClaw 使用 Playwright 内核直接控制 Chrome/Chromium，无需手动安装 ChromeDriver。你只需确保 Chrome 或 Chromium 已安装在系统中即可，其他都由 OpenClaw 自动处理。

浏览器任务失败了怎么调试？

在指令中加上"截图给我看"，AI 会在关键步骤截图汇报进度，方便你判断卡在哪里。也可以查看网关日志：tail -f /tmp/openclaw/openclaw-$(date +%Y-%m-%d).log | grep browser，查看详细的工具调用记录。

能访问需要登录的网站吗？

可以，但需要注意安全：AI 会看到页面截图中的所有内容，包括账号密码输入框和隐私数据。建议只在自己控制的网站上做登录自动化，不要用于银行、支付等敏感账户。

能处理 React/Vue 等动态加载的 SPA 页面吗？

可以，但需要在指令中说明等待时机，例如："打开页面后等待 3 秒再截图"，或"等到页面加载完成再提取数据"。AI 会使用 browser_action 执行等待操作。对于需要滚动加载的页面，可以告诉 AI "向下滚动 3 次后截图"。

浏览器自动化会影响我正在用的 Chrome 吗？

不会。OpenClaw 启动的是一个独立的 Chromium 实例（无头模式），和你日常使用的浏览器完全隔离，Cookie、账户状态互不影响。

下一步

• 教程 05 — 配置多个模型，Claude 贵了自动切 MiniMax