### [新手保姆级教程：OpenClaw 自动化操作浏览器](https://www.jiyueip.com/topic/1890) **Published:** 2026-03-05T11:59:53 **Author:** 斑斓 **Excerpt:** 面向新手梳理浏览器自动化工具和 OpenClaw 操作流程，介绍 Playwright、Puppeteer、S… ![](https://image.kjdaohang.com/PicGo/20260304203907212.webp) 浏览器自动化一般主要靠代码框架、零代码工具和 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 连接架构** ```scss ┌─────────────┐ │ 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** ```bash # 全局安装（需要 Node.js 22+） npm install -g openclaw@latest # 验证安装 openclaw --version # 输出：2026.3.2（或更新版本） ``` ### **2、初始化配置** ```bash # 交互式配置向导 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 连上去。 ![](https://image.kjdaohang.com/PicGo/20260304194612136.png) 连上之后，OpenClaw 就能像人一样操作浏览器：点击按钮、填写表单、读取页面内容，截图快照全都可以。而且因为走的是底层协议，比扩展中继稳定得多。 **新手视角：** - 把它想象成一个**独立的、仅供智能体使用的浏览器**。 - `openclaw` 配置文件**不会**触及你的个人浏览器配置文件。 - 智能体可以在安全的通道中**打开标签页、读取页面、点击和输入**。 - 默认的 `chrome` 配置文件通过扩展中继使用**系统默认的 Chromium 浏览器**；切换到 `openclaw` 可使用隔离的托管浏览器。 > 此浏览器**不是**你的日常浏览器。它是一个安全、隔离的界面，用于智能体自动化和验证。 **具体怎么使用：** 1、先查看浏览器状态（默认是关闭的） ```bash openclaw browser status # 或 openclaw browser --browser-profile openclaw status ``` ![](https://image.kjdaohang.com/PicGo/20260304132751774.png) 2、启动独立浏览器（openclaw 配置文件），完全隔离的浏览器实例，适合自动化任务： ```bash openclaw browser start # 或使用独立浏览器 openclaw browser --browser-profile openclaw start ``` ![](https://image.kjdaohang.com/PicGo/20260304132841702.png) 3、启动后，就可以打开指定网页了，比如 ```bash openclaw browser open https://testfather.cn # 或 openclaw browser --browser-profile openclaw open https://testfather.cn ``` ![](https://image.kjdaohang.com/PicGo/20260304132943850.png) OpenClaw 默认是**无头（headless）无界面**模式，看不到窗口。 4、也可以直接截图，截图是基于第3步打开的网页页面来截取的。 ```bash openclaw browser screenshot # 或 openclaw browser --browser-profile openclaw snapshot ``` ![](https://image.kjdaohang.com/PicGo/20260304134058584.png) 5、如果你想更改配置，比如想将OpenClaw默认改为有头模式，可以修改浏览器设置位于 `~/.openclaw/openclaw.json` ```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 设置这些。 更多使用，可查询**帮助命令：** ```bash openclaw browser --help ``` ![](https://image.kjdaohang.com/PicGo/20260304181840485.png) ### **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” 或直接访问： ```ruby https://chromewebstore.google.com/detail/openclaw-browser-relay/nglingapjinhecnfejdcpihlpneeadjp?pli=1 ``` 扩展作为静态文件包含在 OpenClaw 发行版中，没有单独的”构建”步骤。升级 OpenClaw 后： - 重新运行 `openclaw browser extension install` 刷新文件 - 在 `chrome://extensions` 页面点击扩展的”重新加载”按钮 #### **方法二：手工安装** 1）如果无法访问 Chrome Web Store，可以手工安装。 ```bash # 安装 Chrome 扩展 openclaw browser extension install # 查看扩展路径 openclaw browser extension path ``` ![](https://image.kjdaohang.com/PicGo/20260304141950774.png) 2）在 Chrome 中加载扩展，打开 Chrome → 访问 `chrome://extensions` - 访问 `chrome://extensions` - 启用”开发者模式” - 点击”加载未打包的扩展程序” - 选择扩展路径（选择上面命令打印的目录） ![](https://image.kjdaohang.com/PicGo/20260304145234381.png) 3）插件安装好之后，在扩展程序列表中，可以看到名称为：`OpenClaw Browser Relay`插件 ![](https://image.kjdaohang.com/PicGo/20260304142128363.png) 4）访问：[http://127.0.0.1:18789/overview，获取网关令牌](http://127.0.0.1:18789/overview%EF%BC%8C%E8%8E%B7%E5%8F%96%E7%BD%91%E5%85%B3%E4%BB%A4%E7%89%8C) ![](https://image.kjdaohang.com/PicGo/20260304142617538.png) 5）在OpenClaw Browser Relay插件配置页面，配置OpenClaw Token ![](https://image.kjdaohang.com/PicGo/20260304145333208.png) > 保存成功，提示：Relay reachable and authenticated at [http://127.0.0.1:18792/，说明已连接到本地的中继服务](http://127.0.0.1:18792/%EF%BC%8C%E8%AF%B4%E6%98%8E%E5%B7%B2%E8%BF%9E%E6%8E%A5%E5%88%B0%E6%9C%AC%E5%9C%B0%E7%9A%84%E4%B8%AD%E7%BB%A7%E6%9C%8D%E5%8A%A1) 插件安装完成后，需要重启一下 OpenClaw 网关使配置生效： ```undefined openclaw gateway restart ``` 6）使用扩展 OpenClaw 附带一个名为 `chrome` 的内置浏览器配置文件，它指向默认端口上的扩展中继。使用它： - CLI：`openclaw browser --browser-profile chrome tabs` - 智能体工具：`browser` 配合 `profile="chrome"` ![](https://image.kjdaohang.com/PicGo/20260304193114916.png) 如果你想要不同的名称或不同的中继端口，创建你自己的配置文件： ```lua 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）固定扩展到工具栏， 点击扩展图标将其固定，方便后续操作。 ![](https://image.kjdaohang.com/PicGo/20260304193157784.png) ### **3、如何使用** 把 openclaw 插件固定到工具栏后，比如访问 `weibo.com`网站，点击插件，显示红色 “ON” 字样表示已 attached： ![](https://image.kjdaohang.com/PicGo/20260304171113783.png) 接下来就可以用 openclaw 操作浏览器了，我还是通过飞书进行交互，比如： ```undefined 我已经打开并登录了微博，获取今天最新10条微博热搜消息 ``` 我让 openclaw 获取最新的 10 条微博消息，然后，它自动的打开了微博热搜地址 ![](https://image.kjdaohang.com/PicGo/20260304171514983.png) 根据微博热搜排名，自动获取了最近10条热搜返回给了我 ![](https://image.kjdaohang.com/PicGo/20260304171540687.png) 接着，我继续问它，这次它有点偷懒了，直接切换到文娱标签上搜索，但貌似它也并不是傻瓜式的对照文娱版块，还是会结合热搜来判断是否会八卦新闻 ```undefined 今天微博上，有哪些八卦新闻 ``` ![](https://image.kjdaohang.com/PicGo/20260304172345749.png) 除了可以直接在飞书这类聊天软件直接问外，还可以在OpenClaw控制台的聊天窗口使用，比如访问：[http://127.0.0.1:18789/chat，在聊天窗中，让它帮我搜一下林俊旸的信息（阿里千问大模型团队技术负责人离职了，这两天各种流言，惋惜。。。）](http://127.0.0.1:18789/chat%EF%BC%8C%E5%9C%A8%E8%81%8A%E5%A4%A9%E7%AA%97%E4%B8%AD%EF%BC%8C%E8%AE%A9%E5%AE%83%E5%B8%AE%E6%88%91%E6%90%9C%E4%B8%80%E4%B8%8B%E6%9E%97%E4%BF%8A%E6%97%B8%E7%9A%84%E4%BF%A1%E6%81%AF%EF%BC%88%E9%98%BF%E9%87%8C%E5%8D%83%E9%97%AE%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%9B%A2%E9%98%9F%E6%8A%80%E6%9C%AF%E8%B4%9F%E8%B4%A3%E4%BA%BA%E7%A6%BB%E8%81%8C%E4%BA%86%EF%BC%8C%E8%BF%99%E4%B8%A4%E5%A4%A9%E5%90%84%E7%A7%8D%E6%B5%81%E8%A8%80%EF%BC%8C%E6%83%8B%E6%83%9C%E3%80%82%E3%80%82%E3%80%82%EF%BC%89) ```undefined 去百度搜索“林俊旸” ``` ![](https://image.kjdaohang.com/PicGo/20260304173211186.png) 它会自动帮我打开浏览器，访问百度，并且在输入框搜索：“林俊旸”，最后将信息结果汇总一并返回 ![](https://image.kjdaohang.com/PicGo/20260304173246442.png) 这种操控浏览器的方式体验下来就是快跟准两个字，但是搜索毕竟是简单的操作。比如来个复杂一点的任务：打开B站，搜索OpenClaw，给第一条视频点赞。当然这些操作，在这篇教程中我就不演示了，感兴趣的话，可自行实践吧~ ## **四、写在最后** 虽然，OpenClaw能自动化浏览器，简单场景够用了，但说实话，不太好用，插件有时不太稳定，经常断开，还得我手工点重连，但毕意人无完人，工具也一样，OpenClaw还在进化中，有点小Bug可以理解，所以大家在养虾的过程中遇到点挫折时，多点耐心，折腾AI就得心态好点。 不管是browser-use 还是 openclaw 的浏览器功能，未来都会有很多应用场景，先熟悉起来。 🎯 **记住**：浏览器自动化的核心不是工具，而是理解 CDP 协议和网页结构。掌握 OpenClaw，你就掌握了新一代自动化的钥匙！ 📚 **资源链接** - **OpenClaw 官方文档**: [https://docs.openclaw.ai](https://docs.openclaw.ai/) - **OpenClaw浏览器插件:** [https://docs.openclaw.ai/zh-CN/tools/chrome-extension](https://docs.openclaw.ai/zh-CN/tools/chrome-extension) - **GitHub 仓库**: [https://github.com/openclaw/openclaw](https://github.com/openclaw/openclaw) - **Chrome DevTools Protocol**: [https://chromedevtools.github.io/devtools-protocol/](https://chromedevtools.github.io/devtools-protocol/) **觉得有用的话，记得点赞、收藏、转发三连支持！** ❤️ > 有问题欢迎在评论区留言，有时间我会及时回复的！ 技术改变世界！ ---