










让 AI Agent 拥有"看得见"的浏览器,实现真正的自动化运营
你有没有想过,AI 助手不仅能聊天、写代码,还能像人一样操作浏览器——扫码登录、填写表单、发布文章、甚至处理验证码?
今天分享一套完整方案:OpenClaw + VNC 桌面环境 + Chrome 浏览器,让你的 AI Agent 获得"视觉"和"双手",实现真正的浏览器自动化。
本文将手把手教你从零部署到实战应用,包含完整配置步骤、踩坑经验和自动化发文案例。
┌─────────────────────────────────────────────────────────┐
│ OpenClaw AI Agent │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 自然语言 │───→│ 任务规划 │───→│ 浏览器控制 │ │
│ │ 理解 │ │ & 决策 │ │ (CDP协议) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ VNC 桌面环境 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ XFCE4 桌面 + TigerVNC Server + noVNC Web客户端 │ │
│ │ (运行在云端服务器 / 本地机器) │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ Google Chrome 浏览器 │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 页面渲染 │ │ 用户交互 │ │ 媒体处理 │ │
│ │ JavaScript │ │ 点击/输入 │ │ 截图/录屏 │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────┘
| 组件 | 作用 | 关键技术 |
|---|---|---|
| OpenClaw | AI Agent 大脑,理解指令并控制浏览器 | CDP (Chrome DevTools Protocol) |
| VNC 桌面 | 提供可视化图形界面,远程操作 | TigerVNC + noVNC |
| Chrome | 真实浏览器环境,处理所有网页交互 | --no-sandbox 模式 |
# 更新系统
sudo apt update && sudo apt upgrade -y
# 安装基础依赖
sudo apt install -y \
xfce4 xfce4-goodies \
tigervnc-standalone-server \
novnc websockify \
wget curl gnupg2 software-properties-common
# 安装 Google Chrome
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main"
sudo apt update
sudo apt install -y google-chrome-stable
# 创建专用用户 (避免 root 运行桌面应用的安全风险)
sudo useradd -m -s /bin/bash vncuser
sudo passwd vncuser
sudo usermod -aG sudo vncuser
su - vncuser
# 设置 VNC 密码 (最多8位)
vncpasswd
# 创建 VNC 启动脚本
mkdir -p ~/.vnc
cat > ~/.vnc/xstartup << 'EOF'
#!/bin/bash
xrdb $HOME/.Xresources
startxfce4 &
EOF
chmod +x ~/.vnc/xstartup
# 启动 VNC (显示号 :1,对应端口 5901)
vncserver :1 -geometry 1280x800 -depth 24
# 查看运行状态
vncserver -list
# 停止 VNC
vncserver -kill :1
# 启动 noVNC 代理
/usr/share/novnc/utils/novnc_proxy \
--vnc localhost:5901 \
--listen 6080 \
--web /usr/share/novnc
# 现在可以通过浏览器访问: http://你的IP:6080/vnc.html
由于 VNC 环境通常以 root 运行,Chrome 需要特殊参数:
# 关键参数解释
google-chrome \
--no-sandbox \ # 禁用沙箱 (root 运行必需)
--disable-dev-shm-usage \ # 避免 /dev/shm 空间不足
--disable-gpu \ # 禁用 GPU 加速 (VNC 环境)
--disable-software-rasterizer \
--disable-extensions \ # 禁用扩展,提高稳定性
--remote-debugging-port=9222 \ # CDP 调试端口
--window-size=1280,800 \ # 窗口大小
--start-maximized # 最大化启动
cat > ~/start-chrome.sh << 'EOF'
#!/bin/bash
export DISPLAY=:1
# 杀死已有 Chrome 进程
pkill -f "google-chrome"
sleep 2
# 启动 Chrome
google-chrome \
--no-sandbox \
--disable-dev-shm-usage \
--disable-gpu \
--disable-software-rasterizer \
--disable-extensions \
--remote-debugging-port=9222 \
--window-size=1280,800 \
--start-maximized \
"about:blank" &
echo "Chrome started on DISPLAY :1 with CDP port 9222"
EOF
chmod +x ~/start-chrome.sh
# 确保在 VNC 会话中执行
export DISPLAY=:1
./start-chrome.sh
在 OpenClaw 的 TOOLS.md 中添加配置:
### VNC 桌面环境 + Chrome
- **用途**: Agent 通过 CDP (Chrome DevTools Protocol) 操作真实浏览器
- **桌面**: XFCE4
- **VNC 服务器**: TigerVNC (端口 5901)
- **noVNC**: Web 版 VNC 客户端 (端口 6080)
- **Chrome**: Google Chrome 146.0.7680.153
- **访问地址**: `http://你的IP:6080/vnc.html`
- **VNC 密码**: `你的密码`
- **Chrome 启动参数**: `--no-sandbox --disable-dev-shm-usage --disable-gpu`
- **CDP 端口**: 9222
**应用场景**:
- 登录需要验证码的网站
- 发布文章到社交媒体
- 采集网页数据
- 真实浏览器行为模拟
# 测试 CDP 是否可用
curl http://localhost:9222/json/version
# 预期输出示例
{
"Browser": "Chrome/146.0.7680.153",
"Protocol-Version": "1.3",
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64)...",
"V8-Version": "11.4.150.18",
"WebKit-Version": "537.36 (@...)",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/..."
}
让 AI Agent 自动完成:
# 1. 启动 VNC
vncserver :1 -geometry 1280x800 -depth 24
# 2. 启动 noVNC
/usr/share/novnc/utils/novnc_proxy --vnc localhost:5901 --listen 6080 &
# 3. 启动 Chrome
export DISPLAY=:1
./start-chrome.sh
// OpenClaw 使用 browser 工具控制 Chrome
// 示例:打开公众号后台
await browser({
action: "navigate",
url: "https://mp.weixin.qq.com"
});
// 截图查看当前状态
await browser({
action: "screenshot",
fullPage: true
});
// 等待扫码登录...
// 人工在 VNC 中扫码后,继续自动化
// 点击"新的创作" → "图文消息"
await browser({
action: "act",
kind: "click",
ref: "新的创作"
});
await browser({
action: "act",
kind: "click",
ref: "图文消息"
});
// 填写标题
await browser({
action: "act",
kind: "fill",
ref: "标题",
text: "OpenClaw + VNC 实战指南"
});
// 切换到正文编辑区,输入内容
await browser({
action: "act",
kind: "fill",
ref: "正文",
text: "文章内容..."
});
// 上传封面图
await browser({
action: "act",
kind: "click",
ref: "选择封面"
});
await browser({
action: "upload",
paths: ["/path/to/cover.jpg"]
});
OpenClaw 的 wechat-toolkit skill 封装了完整的发布流程:
# 1. 准备 Markdown 文章 (必须包含 frontmatter)
cat > article.md << 'EOF'
---
title: OpenClaw + VNC 桌面 + Chrome 完整实战指南
cover: /path/to/cover.jpg
---
# 正文内容...
EOF
# 2. 一键发布到公众号草稿箱
node /path/to/wechat-toolkit/scripts/publisher/publish.js article.md
问题: 报错 Running as root without --no-sandbox
解决: 确保启动参数包含 --no-sandbox
问题: 连接后只看到黑屏或灰屏
解决:
# 检查 xstartup 权限
chmod +x ~/.vnc/xstartup
# 重新初始化
vncserver -kill :1
rm -rf ~/.vnc/*.log
vncserver :1 -geometry 1280x800 -depth 24
问题: 页面显示不全或字体异常
解决:
# 安装字体
sudo apt install -y fonts-wqy-zenhei fonts-wqy-microhei
# 重启 Chrome
问题: curl http://localhost:9222/json/version 无响应
解决:
# 检查 Chrome 是否以 --remote-debugging-port=9222 启动
ps aux | grep chrome
# 检查端口监听
netstat -tlnp | grep 9222
问题: 微信公众号登录后很快失效
解决:
问题: OpenClaw 无法点击某些元素
解决:
browser action=snapshot 查看当前页面状态delayMs 参数等待页面加载完成ref 或 selector 定位元素结合 OpenClaw 的 cron 功能,实现定时发文:
{
"schedule": "0 9 * * *",
"task": "自动发布每日技术早报到公众号"
}
通过不同的 Chrome Profile 管理多个账号:
google-chrome --user-data-dir=/path/to/profile1
google-chrome --user-data-dir=/path/to/profile2
通过 OpenClaw + VNC + Chrome 的组合,我们让 AI Agent 具备了:
✅ 可视化能力 - 通过 VNC 远程查看浏览器状态
✅ 真实浏览器环境 - 完整的 Chrome 功能支持
✅ 自动化操作 - CDP 协议精确控制浏览器
✅ 人机协作 - 扫码登录等需要人工介入的环节无缝衔接
这套方案不仅适用于公众号发文,还可以扩展到:
希望这篇指南对你有帮助!如果有任何问题,欢迎在评论区留言讨论。
相关资源:
部署时间: 2026-03-23
适用版本: OpenClaw 2026.3.x, Chrome 146+, Ubuntu 22.04
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。