OpenClaw 浏览器自动化教程

本文教你用 OpenClaw 做浏览器自动化：先理解 CDP 架构，再掌握托管浏览器与 Chrome 扩展中继两种模式的使用方法。

原文链接：https://www.cnblogs.com/jinjiangongzuoshi/p/19673570 整理时间：2026-03-05 21:27 GMT+8

概述

浏览器自动化一般主要靠代码框架、零代码工具和 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 连接 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)      │
└─────────────────┘

架构分三部分：

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

二、环境准备

如果你是新手，想学习 OpenClaw 完整安装配置方法及如何接入飞书，可以查阅上一篇文章：为什么我拖了一个多月才开始使用OpenClaw？（附接入飞书完整详细教程，新手必看）

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

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 可使用隔离的托管浏览器。

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

具体使用方法：

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

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

启动独立浏览器（openclaw 配置文件），完全隔离的浏览器实例，适合自动化任务：
```
openclaw browser start
# 或使用独立浏览器
openclaw browser --browser-profile openclaw start
```

打开指定网页：

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

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

截图（基于第 3 步打开的网页页面）：

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

修改浏览器配置（位于 ~/.openclaw/openclaw.json）：

{
  "browser": {
    "enabled": true,
    "remoteCdpTimeoutMs": 1500,
    "remoteCdpHandshakeTimeoutMs": 3000,
    "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 页面点击扩展的"重新加载"按钮

方法二：手工安装

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

# 安装 Chrome 扩展
openclaw browser extension install

# 查看扩展路径
openclaw browser extension path

在 Chrome 中加载扩展，打开 Chrome → 访问 chrome://extensions
- 访问 chrome://extensions
- 启用"开发者模式"
- 点击"加载未打包的扩展程序"
- 选择扩展路径（选择上面命令打印的目录）
插件安装好之后，在扩展程序列表中，可以看到名称为：OpenClaw Browser Relay 插件
访问：http://127.0.0.1:18789/overview，获取网关令牌
在 OpenClaw Browser Relay 插件配置页面，配置 OpenClaw Token

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

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

openclaw gateway restart

使用扩展

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 令牌不匹配）。

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

3. 如何使用

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

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

获取微博热搜：我已经打开并登录了微博，获取今天最新 10 条微博热搜消息
搜索信息：访问 http://127.0.0.1:18789/chat，在聊天窗中，让它帮我搜一下林俊旸的信息

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

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

验证与自查

openclaw browser status 能显示浏览器状态（关闭/运行中）与当前配置文件
托管浏览器：openclaw browser start 后执行 openclaw browser open <url> 再 openclaw browser screenshot，能拿到页面截图
扩展中继：点击插件图标显示 “ON”，且提示 Relay reachable and authenticated at http://127.0.0.1:18792/
让 AI 执行一次完整的「打开网页 → 搜索 → 返回结果」任务，确认端到端可用

四、写在最后

虽然，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/

文档整理完成于：2026-03-05 21:27 GMT+8

OpenClaw 浏览器自动化教程#

概述#

常见的代码框架类工具#

一、OpenClaw 连接 CDP 架构#

1. OpenClaw#

2. CDP（Chrome DevTools Protocol）#

3. CDP 连接架构#

二、环境准备#

1. 安装 OpenClaw#

2. 初始化配置#

三、快速上手#

1. 浏览器（OpenClaw 托管）#

2. Chrome 扩展中继#

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

方法二：手工安装#

3. 如何使用#

验证与自查#

四、写在最后#

参考#