OpenClaw进阶篇：浏览器自动化——让AI帮你操作网页

OpenClaw进阶篇：浏览器自动化——让AI帮你操作网页

前言

上篇我们写了自定义Skill，发现核心是Prompt模板。

但Skill只是告诉AI"怎么做"，真正执行还需要Tool。

今天讲一个强大的Tool：browser。

它让AI能像人一样操作浏览器——点击、输入、截图、执行JS。

一、browser工具是什么

OpenClaw的browser工具提供了三种连接模式：

1. 内置浏览器（默认）

OpenClaw自带Playwright浏览器，AI可以直接调用：

特点：开箱即用，适合大多数场景。

2. CDP模式（Chrome DevTools Protocol）

连接你已有的Chrome浏览器，通过调试端口控制：

// 启动Chrome时加上调试端口// macOS:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222// Windows:"C:\Program Files\Google\Chrome\Application\chrome.exe"--remote-debugging-port=9222// Linux: google-chrome --remote-debugging-port=9222

然后在OpenClaw配置中指定：

browser:remoteUrl: http://localhost:9222

优势：

• 保持登录状态（Cookie、Session持久化）
• 可以用已有浏览器，不额外占用资源
• 支持多个标签页

3. 浏览器扩展插件模式

安装OpenClaw的Chrome扩展，可以：

• 控制已打开的标签页
• 获取浏览器历史、书签
• 在用户当前浏览上下文中执行

适合需要「接管用户当前页面」的场景。

4. 远程浏览器服务

通过CDP协议连接远程服务器上的浏览器：

browser:node: your-remote-server # 指定远程节点# 或通过CDP URLcdpUrl: ws://your-server:9222

适合服务器环境或需要更高隔离性的场景。

核心能力：让AI像人一样操作网页。

选择建议：

• 个人使用、日常任务 → 内置浏览器
• 需要保持登录态 → CDP模式
• 需要接管用户当前页 → 扩展插件
• 服务器批量任务 → 远程浏览器

二、先看个例子

我们用浏览器自动化的思路，改造之前的热榜查询：

// 不再依赖外部API，直接爬取const result =await browser.navigate('https://weibo.com/hot')// 获取快照了解页面结构const page =await browser.snapshot()// 提取热搜标题const titles =await browser.evaluate(()=>{return[...document.querySelectorAll('.hot-item .title')].map(el=> el.innerText).slice(0,10)})// 输出结果 console.log(titles)

这就是浏览器自动化的威力——不依赖API，直接操作网页。

三、实战：自动获取微博热搜

3.1 两种方式的对比

获取微博热搜有两种方式：

各自适用场景：

• 定时任务、批量获取 → 用API（省资源）
• 获取详细内容、分析页面 → 用浏览器（更灵活）

3.2 用浏览器自动化的场景

什么时候适合用browser工具？

1. API不支持的数据：比如你想获取热搜的详细讨论、评论数等
2. 需要登录才能看到：比如知乎的关注者列表
3. 网页结构复杂：API返回的数据格式不够用

本节示例：演示如何用browser获取微博热搜（作为browser工具的入门案例）

3.3 编写Skill

---name: weibo_hot_browser description: 获取微博热搜榜单，了解最新热点话题（浏览器方式） ---# 微博热搜查询（browser版）## 什么时候触发- 用户问"微博热搜" - 用户说"今天有什么热点" - 用户说"帮我看看微博" ## 如何执行### 第1步：访问微博热搜 使用 `browser.navigate` 打开： ```text https://s.weibo.com/top/summary 

第2步：等待页面加载

页面是动态渲染的，需要等待热搜榜加载完成。
使用 browser.snapshot 查看当前页面状态。

如果页面还没加载完成，继续等待或刷新。

第3步：提取数据

使用 browser.evaluate 执行JS获取热搜列表：

const items = document.querySelectorAll('.c-table tbody tr')return[...items].slice(0,15).map(item=>{const rank = item.querySelector('.td-01').innerText const title = item.querySelector('.td-02 a').innerText const hot = item.querySelector('.td-02 span')?.innerText ||''return`${rank}. ${title}${hot}`})

第4步：格式化输出

🔥 微博热搜榜 1. xxx（热度过万） 2. xxx（热度8000） ... 数据来源：微博 | 时间：xxx 

注意事项

• 微博有反爬机制，可能需要登录
• 如果访问失败，尝试直接访问移动版：https://m.weibo.cn
• 返回结果要包含排名、标题、热度

3.4 测试

用户：帮我看看微博热搜 AI： → browser.navigate('https://s.weibo.com/top/summary') → browser.snapshot() → browser.evaluate(...) → 格式化输出 

四、进阶：多步骤自动化

browser工具的真正威力在于多步骤串联。

4.1 案例：自动登录知乎

---name: zhihu_login description: 自动登录知乎（需要提供账号密码） ---# 知乎自动登录## 触发场景 用户说"帮我登录知乎"、"登录我的知乎账号" ## 执行步骤### 第1步：打开知乎登录页 ```javascript await browser.navigate('https://www.zhihu.com/signin') await browser.snapshot() 

第2步：输入用户名

await browser.click('[name="username"]')await browser.type('[name="username"]','你的手机号')

第3步：点击获取验证码

await browser.click('.SignFlow-tab')await browser.click('.SignFlow-sendInput-button')

第4步：等待用户输入验证码

AI应该提示用户：验证码已发送到手机，请在30秒内输入。

第5步：完成登录

// 用户手动输入验证码后await browser.click('.SignFlow-submitButton')await browser.snapshot()// 验证是否登录成功

注意

• 这个Skill需要用户配合（输入验证码）
• 不能自动跳过验证码，这是安全机制
• 登录状态会保持，直到退出或过期

五、进阶：数据提取与保存

浏览器自动化最强大的场景之一：提取网页数据并保存。

5.1 案例：定期抓取B站热门视频

---name: bilibili_trend description: 获取B站热门视频排行榜 ---# B站热门榜查询## 触发场景- 用户问"B站热门" - 用户说"今天B站什么视频火" - 用户说"帮我看看哔哩哔哩排行榜" ## 执行步骤### 第1步：访问B站排行榜 ```javascript await browser.navigate('https://www.bilibili.com/v/popular/rank/all') await browser.snapshot() 

第2步：等待内容加载

B站是SPA（单页应用），需要等待视频列表渲染。

检查是否有多于0个视频元素，如果有则继续。

第3步：提取数据

const videos =await browser.evaluate(()=>{return[...document.querySelectorAll('.video-item')].slice(0,20).map(item=>{const title = item.querySelector('.title').innerText const author = item.querySelector('.author').innerText const play = item.querySelector('.play').innerText const like = item.querySelector('.like').innerText return{ title, author, play, like }})})

第4步：格式化输出

📺 B站热门榜 🥇 {videos[0].title} UP主：{videos[0].author} | 播放：{videos[0].play} | 点赞：{videos[0].like} 🥈 {videos[1].title} UP主：{videos[1].author} | 播放：{videos[1].play} | 点赞：{videos[1].like} ...（展示前10） 

第5步：保存数据（可选）

如果用户要求"每天定时发送"，可以将数据保存到文件或数据库。

// 保存为JSONconst fs =require('fs')const data ={date:newDate().toISOString(),platform:'bilibili',videos: videos } fs.writeFileSync('/tmp/bilibili-trend.json',JSON.stringify(data,null,2))

注意事项

• B站有反爬限制，频繁访问可能需要登录
• 排行榜每2小时更新一次
• 视频标题可能包含emoji，需要清理

六、调试技巧

6.1 查看页面快照

// 获取当前页面所有可交互元素const snapshot =await browser.snapshot() console.log(JSON.stringify(snapshot,null,2))

输出会包含：

• 当前URL
• 页面标题
• 所有可点击的按钮、链接
• 所有输入框
• 所有图片（用于验证截图）

6.2 截图debug

// 在关键步骤截图await browser.screenshot({path:'/tmp/step1.png'})// 出现问题时截图try{await browser.click('.login-button')}catch(e){await browser.screenshot({path:'/tmp/error.png'})throw e }

6.3 等待技巧

// 等待元素出现（最多等10秒）await browser.waitForSelector('.hot-list',{timeout:10000})// 等待页面加载完成await browser.waitForLoadState('networkidle')// 等待某个条件await browser.waitForFunction(()=>{return document.querySelectorAll('.item').length >0})

七、常见问题

Q1: 页面加载慢怎么办？

// 增加超时时间await browser.navigate('https://example.com',{waitUntil:'networkidle',// 等待网络空闲timeout:30000// 30秒超时})

Q2: 元素找不到？

// 先用snapshot看页面结构const page =await browser.snapshot()// 检查选择器是否正确// 注意：很多网站动态生成class，可能需要用其他选择器await browser.click('text=登录')// 用文本选择器await browser.click('[aria-label="搜索"]')// 用aria属性

Q3: 被反爬了怎么办？

// 设置User-Agentawait browser.extra.setExtraHTTPHeaders({'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64) ...'})// 或者用stealth模式// 注意：频繁访问仍然可能被限制

Q4: 登录状态如何保持？

// 保存浏览器上下文await browser.contexts[0].storageState({path:'/tmp/zhihu-state.json'})// 下次使用时恢复await browser.newContext({storageState:'/tmp/zhihu-state.json'})

八、总结

今天我们学会了：

• ✅ browser工具是什么（操作浏览器的瑞士军刀）
• ✅ 如何用navigate + snapshot + evaluate组合抓取数据
• ✅ 编写微博热搜、B站热门等Skill
• ✅ 多步骤自动化（登录、填表、提交）
• ✅ 调试技巧（snapshot、screenshot、wait）

更多内容

如果你对AI开发、Agent实战感兴趣，欢迎关注公众号【码头码农】：

• 每日AI热点解读
• 实战项目复盘
• 技术成长心得