如何用OpenClaw实现自动化操作浏览器？

浏览器自动化一般主要靠代码框架、零代码工具和 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) │ └─────────────────┘ 架构分三部分： 浏览器控制服务：运行在 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 可使用隔离的托管浏览器。 此浏览器不是你的日常浏览器。它是一个安全、隔离的界面，用于智能体自动化和验证。 具体怎么使用： 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/ 觉得有用的话，记得点赞、收藏、转发三连支持！ ❤️ 有问题欢迎在评论区留言，有时间我会及时回复的！