OpenClaw 浏览器控制全解:让 AI 帮你操作网页,自动填表、截图、抓数据
0. 引言

前 9 篇,你的 AI 已经会聊天、查天气、看股票、搜索网页、发公众号了。但还缺了一大块——它不会”用手”。
什么叫用手?就是像人一样:打开浏览器、点击按钮、填写表单、滚动页面、截图保存。
今天这篇,带你解锁 OpenClaw 的浏览器控制——这才是真正的自动化。
打个比方:
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
| 第 10 篇(今天) | AI 能操作浏览器 | 朋友能帮你上网办事 |
💡 有了浏览器控制,你的 AI 助手才真正”长出了手”。
1. 浏览器控制是什么?
1.1 一句话:浏览器控制能干什么?
OpenClaw 可以启动一个独立的 Chrome 浏览器,AI 通过指令控制它:打开网页、点击、打字、截图、生成 PDF。
1.2 核心概念:快照+操作=控制一切
|
|
|
|---|---|
| openclaw 配置 |
|
| user 配置文件 |
|
| CDP |
|
| Playwright |
|
| 快照(Snapshot) |
|
1.3 和 Selenium/Puppeteer 的区别
很多人用过 Selenium 或 Puppeteer,可能会问:”这不就是自动化浏览器吗?有什么区别?”
|
|
|
|
|---|---|---|
| 谁来操作 |
|
|
| 选择元素 |
|
|
| 稳定性 |
|
|
| 入门门槛 |
|
|
| 适用场景 |
|
|
简单说:Selenium 是”写代码让机器人干活”,OpenClaw 是”告诉 AI 你想干嘛,它自己想办法”。
2. 启用浏览器控制
⚠️ 这是第一个坑——很多新手装完 OpenClaw 发现浏览器不能用,因为默认配置可能没开。
2.1 先检查:你的浏览器控制开了没?
在终端运行:
openclaw browser status
如果你看到 Browser disabled 或 unknown method: browser.request,说明没启用。
2.2 开启浏览器功能
在你的 openclaw.json 中添加:
{ "browser": { "enabled": true, // 开启浏览器控制 "defaultProfile": "openclaw" // 默认使用隔离的 openclaw 配置文件 }}
改完配置后,重启 Gateway:
openclaw gateway restart
2.3 验证是否成功
openclaw browser status
成功的话你会看到:
Browser: openclawStatus: runningProfile: openclawCDP Port: 18800
2.4 启动失败了怎么办?常见坑
|
|
|
|
|---|---|---|
Browser disabled |
|
browser.enabled: true |
unknown method: browser.request |
|
plugins.entries.browser 没被设为 false |
Playwright is not available |
|
npm install playwright |
|
|
|
|
3. 两种浏览器模式

这是最核心的概念——OpenClaw 提供两种浏览器模式,适用不同场景。
3.1 openclaw 配置文件(隔离模式)
默认推荐——AI 有自己的独立浏览器,完全不影响你的日常浏览。
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
适合场景:
-
查资料、抓数据 -
截图、生成 PD -
自动化测试 -
任何不需要登录的操作
3.2 user 配置文件(登录模式)
高级用法——AI 连接你已经登录的 Chrome,共享你的登录状态。
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
适合场景:
-
需要登录才能操作的网站 -
帮你在已登录的网站上填表 -
访问需要身份验证的内部系统
⚠️ 安全警告:user 模式下,AI 能以你的身份做任何操作。只在你在电脑前、且信任 AI 操作时使用。
3.3 两种模式怎么选?一张表说清楚
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4. AI 怎么”看”网页?

这是最有意思的部分——AI 不是像人一样”看”网页的。
4.1 快照(Snapshot):AI 的”眼睛”
当你让 AI 操作网页时,它的第一步是获取页面快照——这不是截图,而是一个结构化的文字地图。
快照长这样(简化版):
[1] 搜索框: "请输入关键词"[2] 按钮: "搜索"[3] 链接: "首页"[4] 链接: "登录"[5] 文本: "欢迎来到 OpenClaw"
每个元素都有一个数字编号(ref)。AI 通过编号来操作元素:
-
“点击 2” → 点击搜索按钮 -
“在 1 中输入 ‘天气'” → 在搜索框打字
4.2 快照的两种模式
|
|
|
|
|
|---|---|---|---|
| AI 快照 | [1], [2], [3] |
|
|
| 角色快照 | [e12], [e34] |
|
|
4.3 为什么不用 CSS 选择器?
你可能会想:”为什么不让 AI 用 #search-btn 这种 CSS 选择器?”
原因很简单:网页一改,选择器就废了。
AI 快照的好处是——理解页面语义。不管按钮的 CSS 类名怎么变,只要它还是”搜索按钮”,AI 就能找到它。
5. 实战演示

5.1 AI 怎么帮你打开网页?
最简单的操作——你只需要说:
“帮我打开 baidu.com”
AI 会自动启动浏览器、导航到目标网站、截图确认页面已加载。
5.2 截图:AI 的”眼睛”
“截个图给我看看”
AI 会调用截图工具,把当前页面画面发给你。想截完整的长页面?
“截全页图”
AI 会自动启用全页截图模式,把整个页面从上到下一张截完。
5.3 查看标签页:AI 打开了几个窗口?
“你现在开了几个页面?”
AI 会列出当前所有打开的标签页,让你一目了然。
5.4 点击:AI 的核心操作
“帮我点击搜索按钮”
AI 的操作流程(快照→识别→点击):
-
先获取页面快照,AI 的”眼睛”扫描页面
-
快照中识别出”搜索按钮”对应的元素编号
- 调用点击工具,精确点击该元素
- 再次截图确认点击成功
💡 你只需要说”点击 XXX”,AI 自动完成”看→找→点→确认”的全流程。
5.5 打字:自动填搜索框
“在搜索框里输入’OpenClaw 教程'”
AI 通过快照找到搜索框,然后调用打字工具,像人一样逐个字符输入。
5.6 自动填表:一次性搞定整个表单
“帮我填一下这个报名表:姓名张三,邮箱 zhangsan@example.com,手机 13800138000”
AI 会:
-
获取快照,识别所有表单字段
-
匹配字段名:”姓名”→ 姓名输入框,”邮箱”→ 邮箱输入框
-
批量填写所有字段
-
截图确认填写结果
💡 这是最实用的功能——从”一个一个找”到”说一句话全填完”。
5.7 生成 PDF:把网页存成永久文档
“把这个页面导出成 PDF”
AI 调用 PDF 生成工具,把当前网页转换成 PDF 文件,方便保存和分享。
5.8 完整实战:从打开网页到提交表单
一个真实的自动化流程,你只需要说:“帮我登录 XX 网站,把昨天的报表截图保存”
AI 自动执行的完整流程:
1. 打开目标网站 → 截图确认页面加载2. 获取快照 → 找到"登录"按钮 → 点击3. 快照识别用户名/密码框 → 填写登录信息4. 点击提交 → 截图确认登录成功5. 导航到报表页面 → 等待数据加载6. 找到昨天的报表 → 截图保存
💡 每一步你只需要用自然语言告诉 AI 做什么,它会自动执行快照→操作→确认的循环。
6. 高级功能
前面都是基础操作,下面这些才是真正解放双手的狠活——
6.1 等待:页面加载完再操作,别急
动态网页加载需要时间,AI 不会傻傻地盲操。它会等条件满足再继续。
“等页面加载完再截图”
AI 会这样操作:
-
先快照,看看页面当前状态
-
等条件满足——可以是特定文字出现、URL 跳转完成、网络请求结束
-
再执行后续操作
常见的等待场景:
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
💡 你只需要说”等加载完再做 XXX”,AI 会自动判断什么时候算”加载完”。
6.2 键盘操作:快捷键也能用
有些操作靠鼠标点不了,得用键盘。
“按回车提交表单” “按 Ctrl+C 复制” “按 Esc 关闭弹窗”
AI 通过快照找到当前焦点元素后,直接发送键盘指令:
-
单键:Enter、Esc、Tab、Backspace -
组合键:Ctrl+C、Ctrl+V、Ctrl+A -
特殊键:PageUp、PageDown、Home、End
真实场景:填完表单后说”按回车提交”,AI 会自动触发提交动作。
6.3 悬停:鼠标移上去才显示的内容
很多网站的下拉菜单、悬浮提示、二级导航,只有鼠标放上去才出现。
“把鼠标移到右上角的头像上”
AI 的操作流程:
-
快照,找到头像元素的编号
-
悬停在该元素上
-
再次快照,这时原本隐藏的菜单会出现在快照中
-
继续操作新出现的菜单项
典型场景:
-
鼠标悬停显示下拉菜单 → 点击菜单项 -
悬停显示 Tooltip 提示 -
电商网站悬停显示商品大图
6.4 拖拽:把元素从一个位置拖到另一个
有些操作不是点击能解决的,得拖。
“把左边的文件拖到右边的上传区域”
AI 会:
-
快照,找到源元素和目标区域的编号
-
拖拽,从源元素按住并拖到目标位置
典型场景:
-
文件上传拖拽区 -
看板工具(如 Trello)中拖拽卡片 -
排序列表拖拽调整顺序
6.5 下拉选择:不用点,直接选
“在下拉框里选择’广东省'”
AI 找到下拉框后,直接从选项中匹配并选中目标值,不需要展开→找→点三步。
支持多选:
“在下拉框里同时选’广东’、’江苏’、’浙江'”
6.6 Cookie 和登录状态管理
有些网站需要你先手动登录,然后 AI 在登录状态下继续操作。
典型流程:
-
AI 打开浏览器,导航到目标网站
-
你手动登录(输入账号密码、验证码)
-
AI 检测到你已登录,继续在登录状态下操作
“帮我打开 XX 后台,我自己登录后你再帮我操作”
AI 会识别你已登录的状态(通过快照中看到登录后的页面元素),然后继续执行后续任务。
⚠️ 不建议让 AI 记住你的密码自动登录,手动登录最安全。
6.7 设备模拟:假装用手机访问
有些网站手机版和电脑版显示不一样,AI 可以模拟手机浏览器访问。
“用 iPhone 的视角打开这个页面看看”
AI 可以:
-
模拟不同设备(iPhone、iPad、Android 手机) -
切换屏幕尺寸和分辨率 -
切换深色/浅色模式 -
模拟地理位置
典型场景:
-
检查网站的移动端适配 -
模拟手机用户操作小程序 H5 页面 -
测试响应式布局
7. 登录网站怎么办?
⚠️ 这是第二个坑——很多网站需要登录,新手不知道怎么处理。
7.1 推荐做法:用你已登录的浏览器最省事
不要让 AI 帮你登录! 原因:
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
正确做法:
-
让 AI 打开浏览器(说”打开浏览器”)
-
你自己手动登录
-
AI 就可以在登录状态下操作了
7.2 到底用哪个浏览器?一张图搞懂
OpenClaw 有两种浏览器,别被术语搞晕了,用大白话说:
第一种:AI 自己的浏览器(默认)
就像一个全新的 Chrome,刚装好的那种——没有书签、没有登录记录、干干净净。
-
查资料、搜信息、截图 → 用这个就对了 -
需要登录?你在这个浏览器里手动登录一次,以后 AI 就在这个状态下帮你操作
第二种:你平时用的浏览器
就是你每天上网用的那个 Chrome——书签、密码、登录状态全在里面。
-
AI 可以连过来,直接用你已登录的状态 - 但需要你在弹窗上点”允许”,AI 不能偷偷连
-
⚠️ AI 能以你的身份做任何操作,所以你在旁边看着的时候再用
💡 新手记住一句:默认就用 AI 自己的浏览器,够用又安全。
7.3 像 X/Twitter 这种严格的网站怎么搞?
有些网站(比如 X/Twitter、微博)反机器人特别狠,AI 一操作就容易被封。
原则就一个:你自己登录,AI 在登录后帮你干活。
具体怎么做?
-
让 AI 打开浏览器
-
你手动登录(自己输账号密码,搞定验证码)
-
告诉 AI:”我登好了,你帮我 XXX”
-
AI 就可以在登录状态下继续操作了
⚠️ 千万别做的事:- 把账号密码直接告诉 AI 让它自动登录- 在沙箱模式(隔离环境)下登录这种严格网站,更容易触发检测
简单说:登录这种活,你自己干;登录之后的操作,交给 AI。
8. 安全注意事项
⚠️ 浏览器控制是最强大的功能之一,也是风险最高的。
|
|
|
|
|---|---|---|
|
|
|
dangerouslyAllowPrivateNetwork: true(信任网络模式),严格模式设为 false |
|
|
evaluate 可执行任意 JavaScript |
browser.evaluateEnabled: false |
|
|
|
|
|
|
|
|
严格模式配置
{ "browser": { "ssrfPolicy": { "dangerouslyAllowPrivateNetwork": false, // 禁止访问内网 "hostnameAllowlist": ["*.example.com"], // 只允许特定域名 "allowedHostnames": ["localhost"] // 精确允许 } }}
9. 常见使用场景
9.1 数据采集:怎么批量把网页内容抓下来?
“帮我打开 XX 网站,把所有产品的价格截图保存”
9.2 自动化填表:一百个表单怎么一次提交?
“帮我填一下这个报名表,姓名张三,邮箱 zhangsan@example.com”
9.3 网页截图:怎么批量截几十张网页?
“帮我打开这个网站,截个图给我看看”
9.4 页面监控:盯住一个页面看变化
“每 30 分钟打开 XX 页面,截图保存”
配合定时任务(第 11 篇),可以实现定期监控。
9.5 自动化测试
“帮我测试一下登录流程是否正常”
9.6 PDF 导出:怎么把网页存成永久文档?
“把这个页面导出成 PDF 保存”
10. 调试技巧
当 AI 操作网页遇到意外时,怎么排查?
10.1 让 AI 只看可交互元素
页面元素太多,AI 可能被干扰。你可以说:
“只看能点的和能填的”
AI 会调用交互式快照,只列出按钮、输入框、链接等可操作元素,忽略纯文本和图片,方便快速定位目标。
10.2 让 AI 高亮目标元素
不确定 AI 找得对不对?
“高亮显示你要点的那个按钮”
AI 会在页面上用彩色框高亮目标元素,让你一眼确认:”对,就是它!” 或者 “不对,点错了”。
10.3 查看操作错误
AI 操作失败时,会记录错误信息。你可以直接问:
“刚才为什么失败了?”
AI 会告诉你具体原因:元素没找到?页面没加载完?权限不足?然后给出解决方案。
10.4 录制操作:把问题录下来分析
遇到复杂问题,你可以让 AI 把整个操作过程录下来:
“开始录制,我要复现一下问题”
AI 会记录每一步操作(打开、点击、打字、截图)。录完后:
“停止录制”
生成的追踪文件可以用 Chrome DevTools 打开,像看视频一样回放每一步,精确找到问题出在哪里。
11. AI 操作速查表
别纠结,对照这张表,知道怎么跟 AI 说就行:
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12. 配置选项全览
前面的章节带你把浏览器控制跑起来了。但你可能遇到了这些情况:
-
想让浏览器在服务器上后台运行? -
想区分 AI 浏览器和自己的浏览器? -
想连接远程服务器上的浏览器? -
AI 操作网页总失败,想调优?
这些都需要改配置。
下面是 openclaw.json 中所有浏览器相关配置。按照“新手必看 → 按需调整 → 高级玩法”的顺序排列,大部分保持默认就行。
12.1 基础配置(新手必看)
这是第一步——装完 OpenClaw 后,至少要看懂这 6 个配置项。
{ "browser": { "enabled": true, // 总开关:true 开启,false 关闭 "defaultProfile": "openclaw", // 默认用哪个浏览器配置文件 "headless": false, // 无头模式:true = 后台运行不显示窗口 "noSandbox": false, // Linux/Docker 环境可能需要设为 true "evaluateEnabled": true, // 是否允许 AI 执行页面 JavaScript "attachOnly": false // true = 只连接已打开的浏览器,不自己启动 }}
逐项解释:
|
|
|
|
|---|---|---|
enabled |
|
|
defaultProfile |
|
|
headless |
|
|
noSandbox |
|
|
evaluateEnabled |
|
|
attachOnly |
|
|
💡 新手只改两项: enabled设为true开启功能,headless本地调试保持false,服务器上跑改成true。其他保持默认。
12.2 端口配置(cdpPort)
每个浏览器配置文件需要一个独立的 CDP 通信端口。
怎么设置:
{ "browser": { "profiles": { "openclaw": { "cdpPort": 18800 // 隔离模式用 18800 }, "user": { "cdpPort": 18801 // 登录模式用 18801 } } }}
💡 一句话:每个配置文件必须用不同的端口,默认从 18800 起递增。大多数情况下你不需要改这个。
大多数情况下,两个核心配置文件就够了。 如果你需要更多独立的浏览器环境——
12.3 多配置文件(Profiles):一般不需要
openclaw(隔离)和 user(登录)两个核心配置文件已经覆盖 99% 的使用场景。
如果你确实需要更多独立的浏览器环境(比如给团队成员各自分配一个),可以按同样的格式添加:
{ "browser": { "profiles": { "openclaw": { "cdpPort": 18800 }, "user": { "cdpPort": 18801 } } }}
每个新配置文件需要不同的 cdpPort 端口号(从 18800 起递增)。
每个配置文件的详细选项:
|
|
|
|
|---|---|---|
cdpPort |
|
|
cdpUrl |
|
|
userDataDir |
|
|
driver |
|
|
attachOnly |
|
|
两个核心配置文件够用了。 如果你还有其他特殊情况——
12.4 自定义浏览器路径(找不到浏览器时用)
如果 OpenClaw 找不到你的 Chrome,可以手动指定:
{ "browser": { "executablePath": "C:\Program Files\Google\Chrome\Application\chrome.exe" }}
常见浏览器路径:
|
|
|
|---|---|
|
|
C:\Program Files\Google\Chrome\Application\chrome.exe |
|
|
C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe |
|
|
C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe |
指定路径后,AI 就能找到浏览器了。 如果你的浏览器不在本机呢?
12.5 远程浏览器连接
如果你的浏览器不在本地,而是在远程服务器上:
{ "browser": { "cdpUrl": "ws://192.168.1.100:9222", "remoteCdpTimeoutMs": 10000, // 连接超时(毫秒) "remoteCdpHandshakeTimeoutMs": 15000 // 握手超时(毫秒) }}
|
|
|
|---|---|
cdpUrl |
|
remoteCdpTimeoutMs |
|
remoteCdpHandshakeTimeoutMs |
|
远程连接搞定了,再来看看怎么让 AI “看”网页的方式更顺手——
12.6 快照默认配置
AI 看网页的方式(快照)也可以自定义:
{ "browser": { "snapshotDefaults": { "mode": "ai" // "ai" 默认模式 / "role" 只列可交互元素 } }}
|
|
|
|---|---|
ai |
|
role |
|
快照调优搞定了,最后还有两个锦上添花的配置——
12.7 额外启动参数
可以给浏览器传额外的启动参数:
{ "browser": { "extraArgs": [ "--window-size=1920,1080", "--disable-gpu" ] }}
以上配置按需调整。 最后,把所有配置组合起来,看一个完整示例——
12.8 完整配置示例(抄作业区)
把所有配置组合起来,一个完整示例:
{ "browser": { // 基础配置 "enabled": true, "defaultProfile": "openclaw", "headless": false, "evaluateEnabled": true, // 快照默认 "snapshotDefaults": { "mode": "ai" }, // 配置文件(两种核心模式) "profiles": { "openclaw": { "cdpPort": 18800 }, "user": { "cdpPort": 18801 } } }}
💡 新手建议:大部分配置保持默认就行,只需要把 enabled设为true就能用。其他选项遇到问题时再调整。
13. 总结
搞了 10 篇教程,我们终于让 AI”长出了手”。
回顾一下:
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 第 10 篇(今天) | 浏览器控制(让 AI 能操作网页) |
💡 一句话总结:浏览器控制 = AI 的”双手”
浏览器控制 = AI 的手 = 真正解放双手的自动化
🚀 下一篇:让 AI 定时自动干活
有了浏览器控制,AI 能帮你操作网页了。但如果每次都手动告诉它”打开这个、点击那个”,还是不够智能。
下一步是让 AI 定时自动干活——每天早上打开网页、截图、推送给你。不用你开口,它自己就干了。
💡 下一篇预告:《定时任务 Cron 全解》——让 AI 每天早上 9 点自动推送天气、新闻、股票,真正 7×24 小时在线!
_👋 我是路人甲甲,公众号「AI 打怪升级」,专注 AI 工具实战。_
_觉得有用?点个在看,分享给需要的朋友。_
夜雨聆风