OpenClaw 系列教程(七):给 AI 长出一双会操作网页的手

OpenClaw 系列教程（七）：给 AI 长出一双会操作网页的手

前六篇里的 AI，不管是聊天、装插件、还是定时跑任务，干的全是"嘴上活"——接收指令、调模型、吐文字。它能帮你写邮件，但没法帮你点发送。它能帮你分析数据，但得你把数据喂给它。

浏览器自动化，就是给 AI 长手。

长手之后它能干嘛？登录后台拉数据、填表单提交审批、截图监控竞品页面、批量下载文件……你平时对着浏览器干的那堆重复活，它都能替你干。

一个独立的"AI 专用浏览器"

第一件事你得搞清楚：OpenClaw 的浏览器不是你日常用的那个浏览器。

它会给 AI 单独开一个 Chrome 配置文件（默认叫 openclaw，橙色主题色），跟你平时用的浏览器完全隔离。你的登录态、你的书签、你的插件，AI 一概碰不到。它就是一个干净的、专属的自动化工作台。

这样做有两个好处：一是安全，AI 不会误碰你的个人数据；二是稳定，AI 的操作不会把你的浏览器搞崩。

三种"手"，按需选

OpenClaw 的浏览器分三种配置文件，对应三种使用场景：

1. openclaw 配置文件（默认） — 干净的隔离浏览器，从零开始，没有登录态。适合操作公开网页、填表单、抓数据。

2. user 配置文件 — 通过 Chrome DevTools 协议附加到你真实已登录的 Chrome上。AI 能用你已登录的账号操作。但首次连接时 Chrome 会弹一个"允许远程调试？"的提示，需要你在电脑前点同意。

3. chrome 配置文件 — 通过 OpenClaw 浏览器扩展驱动你已登录的 Chrome 标签页。不需要人在电脑前，手机上就能让 AI 操作你的浏览器。

简单说：不需要登录态用 openclaw，需要登录态且人在电脑前用 user，需要登录态且人不在电脑前用 chrome。

开启浏览器自动化

浏览器功能默认是开的，但如果你的配置里限制了插件白名单，需要确认 browser 在列表里：

// ~/.openclaw/openclaw.json
{
  plugins: {
    allow: ["telegram", "browser"]
  },
  browser: {
    enabled: true,
    headless: false  // false = 可以看到 AI 在操作，true = 后台静默跑
  }
}

如果你的工具配置文件是 coding，默认不带 browser 工具，需要手动加上：

{
  tools: {
    profile: "coding",
    alsoAllow: ["browser"]
  }
}

改完配置重启 Gateway 就生效了。

先做个健康检查

配置好了，先跑一句诊断，确认浏览器能正常启动：

openclaw browser doctor

这会检查 Gateway、插件、配置文件、浏览器进程、标签页是否就绪。全绿了再继续。

如果 doctor 过了但操作报错，加 --deep 做深度诊断，它会额外跑一次实时快照探测：

openclaw browser doctor --deep

AI 操作网页的基本流程

AI 操作网页跟人不一样——人靠眼睛看，AI 靠快照。

流程是这样的：

快照（snapshot） — AI 先给当前页面拍一个结构快照，拿到一个 UI 树，每个可交互元素都有一个 ref ID
操作（act） — AI 用 ref ID 点击、输入、拖拽、选择
重新快照 — 页面变了，AI 重新拍快照，拿到新的 ref ID
重复 — 直到任务完成

你不用手动管这些。你只需要告诉 AI "帮我登录 XX 后台，拉出本月销售数据"，AI 自己会一步步快照→操作→再快照。

OpenClaw 还打包了一个 browser-automation 技能，自动教 AI 这些操作循环——包括遇到登录验证码或 2FA 时，报告给你手动处理而不是瞎猜。

四个实战场景

场景一：自动登录后台拉数据

"帮我打开公司的 BI 后台，筛选本月数据，把表格截图发给我。"

AI 用 openclaw 配置文件打开后台 URL，走快照→输入账号→点击登录→等页面加载→点筛选→选本月→截图。如果遇到验证码，它会告诉你"这里需要你手动过一下"。

场景二：批量填表单提交审批

"把这 20 条记录逐条填进 OA 系统的报销表单，每条提交后等审批结果。"

AI 打开 OA 表单页，快照拿到字段 ref，逐条输入→提交→等结果→下一条。fill 操作可以一次性填充多个字段，比逐个 type 快。

场景三：竞品页面定时监控

配合上一篇讲的定时任务，每天早上 8 点自动打开竞品官网，截图存档，如果页面有变化就通知你：

openclaw cron create "0 8 * * *" \
  "打开 https://competitor.com，截全页图，对比昨天截图，有变化就通知我。" \
  --name "竞品监控" --tz "Asia/Shanghai" --session isolated --announce

场景四：网页数据提取生成报告

"打开这个统计页面，把表格里的数据提取出来，生成一份月度报告。"

AI 用 extract 操作，传入一个 query，它会自动提取页面可读文本并回答问题。比返回完整快照省 token 多了。如果只需要部分内容，还能传 selector 只截取相关区域。

命令速查

常用 CLI 命令，调试和手动操作时用：

openclaw browser start                    # 启动浏览器
openclaw browser start --headless          # 无头模式启动（一次性）
openclaw browser stop                      # 停止浏览器
openclaw browser tabs                       # 查看所有标签页
openclaw browser open https://example.com  # 打开网页
openclaw browser snapshot                   # 获取页面快照
openclaw browser screenshot                # 截图
openclaw browser screenshot --full-page    # 全页截图
openclaw browser navigate https://xxx.com  # 导航到 URL（返回内联快照）
openclaw browser click 12                   # 点击 ref=12 的元素
openclaw browser type 23 "hello"            # 在 ref=23 的输入框输入文字
openclaw browser pdf                        # 导出页面为 PDF

两个要注意的点

1. 不是万能的。 遇到验证码、2FA、人脸识别这些反自动化措施，AI 会老老实实报告"这里需要你手动处理"。这是设计如此，不是 bug——瞎猜验证码只会把你的账号搞封。

2. 安全意识别丢。 evaluate 操作可以在页面里执行任意 JavaScript，功能很强但也意味着风险。如果你的使用场景不需要，可以在配置里关掉：browser.evaluateEnabled: false。浏览器导航有 SSRF 策略保护，默认不允许访问内网地址，别随便放开 dangerouslyAllowPrivateNetwork。