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 URL
cdpUrl: 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工具？

本节示例：演示如何用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步：保存数据（可选）

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

// 保存为JSON
const fs = require('fs')
const data = {
date: new Date().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-Agent
await 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热点解读
• 实战项目复盘
• 技术成长心得