新手保姆级教程：OpenClaw 自动化操作浏览器！

测试开发技术

发布于 2026-03-05 14:48:18

21.6K8

文章被收录于专栏：测试开发技术测试开发技术

浏览器自动化一般主要靠代码框架、零代码工具和 AI 辅助工具实现，常用于功能测试、回归测试和跨浏览器兼容性测试。

常见的代码框架类工具：

• Playwright：微软开发，速度快，自动等待机制强，支持 Python、JS、Java、.NET，适合复杂的跨浏览器测试。
• Puppeteer：Google 开发，专为 Chrome/Chromium 设计，适合前端开发者。
• Selenium：老牌工具，生态成熟，支持几乎所有浏览器和主流编程语言。

在 AI Agent 时代，浏览器自动化已成为必备技能，而上述传统的 Puppeteer/Playwright/Selenium 框架存在以下痛点：

• ❌ 需要编写大量代码
• ❌ 难以与 AI Agent 集成
• ❌ 缺少统一的管理界面
• ❌ 远程调试配置复杂

OpenClaw 的出现改变了这一切，它是一个自托管的 AI Agent 网关，内置了强大的浏览器控制能力，可以通过 CDP 协议实现了：

• ✅ CLI + AI Agent 双模式控制
• ✅ 开箱即用的浏览器管理
• ✅ 支持远程 CDP 连接

这一篇我们来介绍一下，OpenClaw 如何通过浏览器自动化操作网站。

一、OpenClaw连接CDP架构

1、OpenClaw

OpenClaw 是一个多通道 AI Agent 网关，提供：

• 🦞 独立浏览器配置文件（隔离于个人浏览器）
• 🔌 Chrome 扩展接力（控制现有 Chrome 标签）
• 🌐 远程 CDP 支持（连接云端浏览器）
• 📊 Web 控制面板（可视化管理）

2、CDP（Chrome DevTools Protocol）

CDP 是 Chrome 浏览器的调试协议，允许开发者通过编程方式：

• 控制页面导航、点击、输入
• 捕获网络请求和响应
• 执行 JavaScript
• 截图和生成 PDF

所有现代浏览器自动化工具（Puppeteer、Playwright）都基于 CDP 构建。

3、CDP 连接架构

┌─────────────┐
│  AI Agent   │
│  (OpenClaw) │
└──────┬──────┘
       │ HTTP API
       ▼
┌─────────────────┐
│ Browser Control │
│    Service      │
└────────┬────────┘
         │ CDP Protocol
         ▼
┌─────────────────┐
│   Chromium      │
│  (CDP Port)     │
└─────────────────┘

架构分三部分：

1. 浏览器控制服务：运行在 OpenClaw Gateway 或节点上的 API
2. Chrome MV3 插件：用 chrome.debugger API 附加到标签页，把 CDP 消息传给本地中继
3. 本地中继服务器：在控制服务器和插件之间搭桥，默认端口 127.0.0.1:18792

二、环境准备

这里主要以浏览器自动化为主，简化一下步骤，主要分两步

1、安装 OpenClaw

# 全局安装（需要 Node.js 22+）
npm install -g openclaw@latest

# 验证安装
openclaw --version
# 输出：2026.3.2（或更新版本）

2、初始化配置

# 交互式配置向导
openclaw onboard --install-daemon

# 启动 Gateway（网关服务）
openclaw gateway --port 18789

三、快速上手

目前 OpenClaw 提供了两种浏览器模式：

• 第一种是 OpenClaw 自带的托管浏览器。
• 第二种是 Chrome 扩展中继。

说白了，就是：让 AI 直接用我的 Chrome，带着我所有的登录状态，稳定地、像我本人一样去操作网页。

这类需求其实有一个更底层、更可靠的解决方案：通过 Chrome 的远程调试协议（CDP）直接连接。

1、浏览器（OpenClaw 托管）

它会启动一个全新的 Chromium 实例，有自己独立的用户数据目录。但问题很明显：这是一台"全新的电脑"，什么登录状态都没有。你想让 AI 帮你操作后台管理页面？不好意思，先登录。碰到二次验证、短信验证码的？那基本没戏。而且这个浏览器的连接稳定性也一般，时不时会断。

这种方式，它是怎么工作的呢？

Chrome 内置了一个叫 DevTools Protocol（CDP）的调试接口。平时你按 F12 打开的开发者工具，底层用的就是这个协议。我们要做的，就是让 Chrome 把这个接口通过一个本地端口暴露出来，然后让 OpenClaw 连上去。

连上之后，OpenClaw 就能像人一样操作浏览器：点击按钮、填写表单、读取页面内容，截图快照全都可以。而且因为走的是底层协议，比扩展中继稳定得多。

新手视角：

• 把它想象成一个独立的、仅供智能体使用的浏览器。
• openclaw 配置文件不会触及你的个人浏览器配置文件。
• 智能体可以在安全的通道中打开标签页、读取页面、点击和输入。
• 默认的 chrome 配置文件通过扩展中继使用系统默认的 Chromium 浏览器；切换到 openclaw 可使用隔离的托管浏览器。

此浏览器不是你的日常浏览器。它是一个安全、隔离的界面，用于智能体自动化和验证。

具体怎么使用：

1、先查看浏览器状态（默认是关闭的）

openclaw browser status
# 或
openclaw browser --browser-profile openclaw status

2、启动独立浏览器（openclaw 配置文件），完全隔离的浏览器实例，适合自动化任务：

openclaw browser start

# 或使用独立浏览器
openclaw browser --browser-profile openclaw start

3、启动后，就可以打开指定网页了，比如

openclaw browser open https://testfather.cn
# 或
openclaw browser --browser-profile openclaw open https://testfather.cn

OpenClaw 默认是无头（headless）无界面模式，看不到窗口。

4、也可以直接截图，截图是基于第3步打开的网页页面来截取的。

openclaw browser screenshot
# 或
openclaw browser --browser-profile openclaw snapshot

5、如果你想更改配置，比如想将OpenClaw默认改为有头模式，可以修改浏览器设置位于 ~/.openclaw/openclaw.json

{
  browser: {
    enabled: true, // default: true
    // cdpUrl: "http://127.0.0.1:18792", // legacy single-profile override
    remoteCdpTimeoutMs: 1500, // remote CDP HTTP timeout (ms)
    remoteCdpHandshakeTimeoutMs: 3000, // remote CDP WebSocket handshake timeout (ms)
    defaultProfile: "chrome",
    color: "#FF4500",
    headless: false,
    noSandbox: false,
    attachOnly: false,
    executablePath: "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
    profiles: {
      openclaw: { cdpPort: 18800, color: "#FF4500" },
      work: { cdpPort: 18801, color: "#0066CC" },
      remote: { cdpUrl: "http://10.0.0.42:9222", color: "#00AA00" },
    },
  },
}

注意事项：

• 浏览器控制服务绑定到 loopback 上的端口，该端口从 gateway.port 派生（默认：18791，即 gateway + 2）。中继使用下一个端口（18792）。
• 如果你覆盖了 Gateway 网关端口（gateway.port 或 OPENCLAW_GATEWAY_PORT），派生的浏览器端口会相应调整以保持在同一”系列”中。
• 未设置时，cdpUrl 默认为中继端口。
• remoteCdpTimeoutMs 适用于远程（非 loopback）CDP 可达性检查。
• remoteCdpHandshakeTimeoutMs 适用于远程 CDP WebSocket 可达性检查。
• attachOnly: true 表示”永不启动本地浏览器；仅在浏览器已运行时附加”。
• color + 每个配置文件的 color 为浏览器 UI 着色，以便你能看到哪个配置文件处于活动状态。
• 默认配置文件是 chrome（扩展中继）。使用 defaultProfile: "openclaw" 来使用托管浏览器。
• 自动检测顺序：如果系统默认浏览器是基于 Chromium 的则使用它；否则 Chrome → Brave → Edge → Chromium → Chrome Canary。
• 本地 openclaw 配置文件会自动分配 cdpPort/cdpUrl — 仅为远程 CDP 设置这些。

更多使用，可查询帮助命令：

openclaw browser --help

2、Chrome 扩展中继

OpenClaw Chrome（chrome extension relay）扩展让代理能控制你现有的 Chrome 标签页，通过 Chrome 扩展控制你正在使用的 Chrome 标签，而不是启动一个单独的浏览器配置文件，附加/分离通过一个工具栏按钮完成。

具体流程：

• Gateway 网关在本地运行（同一台机器）或节点主机在浏览器所在机器上运行。
• 本地中继服务器在 loopback 的 cdpUrl 上监听（默认：http://127.0.0.1:18792）。
• 你点击标签页上的 OpenClaw Browser Relay 扩展图标来附加（它不会自动附加）。
• 智能体通过选择正确的配置文件，使用普通的 browser 工具控制该标签页。

如果 Gateway 网关在其他地方运行，请在浏览器所在机器上运行节点主机，以便 Gateway 网关可以代理浏览器操作。

安装步骤：

整个操作过程还是非常简单的，总共分两步，第一步安装OpenClaw的插件，第二步安装谷歌浏览器的拓展程序。

方法一：通过web store 商店安装

扩展已经发布到 Chrome 商店，搜索 "openclaw-browser-relay" 或直接访问：

https://chromewebstore.google.com/detail/openclaw-browser-relay/nglingapjinhecnfejdcpihlpneeadjp?pli=1

扩展作为静态文件包含在 OpenClaw 发行版中，没有单独的"构建"步骤。升级 OpenClaw 后：

• 重新运行 openclaw browser extension install 刷新文件
• 在 chrome://extensions 页面点击扩展的"重新加载"按钮

方法二：手工安装

1）如果无法访问 Chrome Web Store，可以手工安装。

# 安装 Chrome 扩展
openclaw browser extension install

# 查看扩展路径
openclaw browser extension path

2）在 Chrome 中加载扩展，打开 Chrome → 访问 chrome://extensions

• 访问 chrome://extensions
• 启用"开发者模式"
• 点击"加载未打包的扩展程序"
• 选择扩展路径（选择上面命令打印的目录）

3）插件安装好之后，在扩展程序列表中，可以看到名称为：OpenClaw Browser Relay插件

4）访问：http://127.0.0.1:18789/overview，获取网关令牌

5）在OpenClaw Browser Relay插件配置页面，配置OpenClaw Token

保存成功，提示：Relay reachable and authenticated at http://127.0.0.1:18792/，说明已连接到本地的中继服务

插件安装完成后，需要重启一下 OpenClaw 网关使配置生效：

openclaw gateway restart

6）使用扩展

OpenClaw 附带一个名为 chrome 的内置浏览器配置文件，它指向默认端口上的扩展中继。使用它：

• CLI：openclaw browser --browser-profile chrome tabs
• 智能体工具：browser 配合 profile="chrome"

如果你想要不同的名称或不同的中继端口，创建你自己的配置文件：

openclaw browser create-profile \
  --name my-chrome \
  --driver extension \
  --cdp-url http://127.0.0.1:18792 \
  --color "#00AA00"

安装完成后，Chrome 工具栏会出现 OpenClaw 图标。

• 附加控制：打开你想要操作的网页，点击扩展图标。当图标上显示 “ON” 时，表示该标签页已受 OpenClaw 控制。
• 切换标签页：只需在其他标签页点击图标，即可将控制权切换过去。

点击工具栏上的插件图标就能授权控制。图标上会显示状态：ON 是已连接，... 是正在连接，! 是中继不可达或认证失败（通常是 Gateway 令牌不匹配）。

7）固定扩展到工具栏，点击扩展图标将其固定，方便后续操作。

3、如何使用

把 openclaw 插件固定到工具栏后，比如访问 weibo.com网站，点击插件，显示红色 "ON" 字样表示已 attached：

接下来就可以用 openclaw 操作浏览器了，我还是通过飞书进行交互，比如：

我已经打开并登录了微博，获取今天最新10条微博热搜消息

我让 openclaw 获取最新的 10 条微博消息，然后，它自动的打开了微博热搜地址

根据微博热搜排名，自动获取了最近10条热搜返回给了我

接着，我继续问它，这次它有点偷懒了，直接切换到文娱标签上搜索，但貌似它也并不是傻瓜式的对照文娱版块，还是会结合热搜来判断是否会八卦新闻

今天微博上，有哪些八卦新闻

除了可以直接在飞书这类聊天软件直接问外，还可以在OpenClaw控制台的聊天窗口使用，比如访问：http://127.0.0.1:18789/chat，在聊天窗中，让它帮我搜一下林俊旸的信息（阿里千问大模型团队技术负责人离职了，这两天各种流言，惋惜。。。）

去百度搜索“林俊旸”

它会自动帮我打开浏览器，访问百度，并且在输入框搜索：“林俊旸”，最后将信息结果汇总一并返回

这种操控浏览器的方式体验下来就是快跟准两个字，但是搜索毕竟是简单的操作。比如来个复杂一点的任务：打开B站，搜索OpenClaw，给第一条视频点赞。当然这些操作，在这篇教程中我就不演示了，感兴趣的话，可自行实践吧~

四、写在最后

虽然，OpenClaw能自动化浏览器，简单场景够用了，但说实话，不太好用，插件有时不太稳定，经常断开，还得我手工点重连，但毕意人无完人，工具也一样，OpenClaw还在进化中，有点小Bug可以理解，所以大家在养虾的过程中遇到点挫折时，多点耐心，折腾AI就得心态好点。

不管是browser-use 还是 openclaw 的浏览器功能，未来都会有很多应用场景，先熟悉起来。

🎯 记住：浏览器自动化的核心不是工具，而是理解 CDP 协议和网页结构。掌握 OpenClaw，你就掌握了新一代自动化的钥匙！

📚 资源链接

• OpenClaw 官方文档: https://docs.openclaw.ai
• OpenClaw浏览器插件: https://docs.openclaw.ai/zh-CN/tools/chrome-extension
• GitHub 仓库: https://github.com/openclaw/openclaw
• Chrome DevTools Protocol: https://chromedevtools.github.io/devtools-protocol/