最近一周我一直在研究AI驱动浏览器，主要想实现让AI自主操控浏览器，完成公开数据获取、信息发布等操作。

试过不少相关工具，效果都不太理想，于是决定从底层开始深入学习。

打算追根溯源把原理彻底吃透，既然别人都能开发出来，我也不能只停留在简单使用层面，差距还是很明显的。接下来就系统开始学习实践。

如果大家不想看中间的学习过程，直接看文末最终成果就可以了。

我调研了Browser-use、agent-browser、Puppeteer、Playwright、CDP、midscene、BrowserMCP等相关工具，不过涉及的种类较多，部分就没有整理进来，一些我没有实际使用过的也暂不列入。

一、先搞懂：浏览器自动化的 “三层逻辑”

1. 底层：CDP（浏览器的 “操作说明书”）

CDP 是浏览器内置的 “接口”，就像一本详细的操作说明书，告诉程序 “如何打开网页”“如何点击按钮”。但它非常复杂，需要写大量代码，比如要实现 “打开百度”，就得发送好几条 CDP 指令。小白直接用 CDP 基本会劝退。

启动CPD 启动 Chrome 开启 CDP

Windows 上的代码

chrome.exe --remote-debugging-port=9222

或使用无头模式

chrome.exe --headless --remote-debugging-port=9222

特殊情况

当我尝试在Qclaw里边启动的时，他给出了一些说明。也就是说只允许启动一个，那现在我正开着浏览器再用命令执行呢，它并不会开启这个远程调试。

会有各种问题：

另一个协议WebDriver WebDriver 定义了一套用于用户代理自省与远程控制的协议。本规范通过引入双向通信对 WebDriver 进行扩展。相较于 WebDriver 严格的请求 / 响应格式，该扩展允许事件从用户代理流式传输至控制软件，更贴合浏览器文档对象模型的事件驱动特性。

WebDriver BiDi 是一种正在开发中的新型跨浏览器自动化协议，旨在结合 WebDriver “经典” 和 CDP 的优点。WebDriver BiDi 实现了双向通信，使其默认情况下速度很快，并且附带底层的控制功能。

2. 中间层：Puppeteer 和 Playwright（自动化 “工具包”）

为了简化 CDP 的使用，开发者封装出了 Puppeteer 和 Playwright。它们就像 “工具包”，把复杂的 CDP 指令打包成简单的函数，比如用 page.goto('你的网址') 就能直接打开百度。

• Puppeteer：谷歌开发，专注 Chrome 浏览器，适合简单自动化。

• Playwright：微软开发，支持 Chrome、Firefox、Safari，功能更强，还能自动等待元素加载，稳定性更高。

Puppeteer介绍

什么是 Puppeteer？

Puppeteer 是一个由 Google 官方开发的 Node.js JavaScript 库，提供了高级 API，通过 DevTools 协议 (Chrome DevTools Protocol CDP) 或 WebDriver BiDi 来控制 Chrome/Chromium 或 Firefox 浏览器。它默认以无头模式 (Headless Mode) 运行（无图形界面）。

Puppeteer 支持使用 Chrome 和 Firefox 的 WebDriver BiDi 自动化。启动 Firefox 时，WebDriver BiDi 协议默认启用。启动 Chrome 时，仍然默认使用 CDP，因为 WebDriver BiDi 尚不支持所有 CDP 功能。如果某个 Puppeteer 功能尚不支持通过 WebDriver BiDi 使用，将抛出 UnsupportedOperation 错误。另请参见下面关于 WebDriver BiDi 支持内容的列表。

核心特性

• 通信协议

  • DevTools Protocol (CDP): 控制 Chrome 时的默认协议，提供最底层、全面的浏览器控制能力。

  • WebDriver BiDi: 新的跨浏览器自动化协议，控制 Firefox 时默认使用，支持双向通信。

• 运行模式

  • 无头模式 (默认): 无 UI，高效、适合服务器自动化。

  • 有头模式: 可见浏览器窗口，方便调试。

• 主要功能

  • 网页截图、生成 PDF

  • 自动化表单填写、点击、UI 测试

  • 爬虫（支持 JavaScript 渲染页面）

  • 性能分析、网络请求拦截

  • 测试浏览器扩展

安装与基础示例

npm i puppeteer # 自动下载兼容的Chrome
# 或
npm i puppeteer-core # 仅安装库，不下载浏览器

基础代码示例 (打开网页并截图)

const puppeteer = require('puppeteer');(async () => {// 启动浏览器（默认无头）const browser = await puppeteer.launch();const page = await browser.newPage();// 访问页面await page.goto('https://example.com');// 截图await page.screenshot({ path: 'example.png' });// 关闭浏览器await browser.close();})();

核心优势

• 官方支持: Google Chrome 团队维护，与最新浏览器功能同步。

• 高效: 直接控制浏览器内核，速度远快于传统 Selenium。

• 功能强大: 原生支持网络拦截、模拟用户行为、处理动态内容。

Playwright 简介

Playwright 是一个用于 Web 自动化和端到端测试的开源框架。

简单来说，它就是一个可以帮你通过编程来控制浏览器的工具，我们可以把它想象成一个"虚拟用户"，它能像人一样在网页上进行各种操作，比如：点击按钮、填写表单、导航到不同的页面、截图和保存网页内容。

Playwright 是微软开源的现代浏览器自动化框架，用少量代码就能在 Chromium（Chrome/Edge）、Firefox、WebKit（Safari 引擎）里自动完成"人类的浏览器操作"：打开网页、点击、输入、拖拽、上传文件、截图/PDF、录制日志与回放，最常见的用途是 端到端（E2E）测试，也可做轻量爬取与流程自动化。它提供 JS/TS、Python、Java、.NET 多语言 SDK，其中 JS/TS + Playwright Test 是最主流组合。

但这两个工具还是需要写代码，对纯小白来说依然有门槛。

3. 上层工具 :Browser-use和 Agent-Brower

Browser-Use 与 Agent-Browser 均为AI浏览器自动化开源工具，二者在设计理念、技术实现和适用场景上存在明显差异。

两者核心定位与层级区别显著：Browser-Use 是内置LLM推理能力的完整AI智能体框架；Agent-Browser 则是主打高效浏览器操控的底层命令行工具，需外接AI才能驱动运行。

核心定位与设计哲学

• Browser-Use

  • 目标驱动：强调“描述做什么，而不是怎么做”，由 LLM 自主决策操作步骤 。

  • 架构：基于 Playwright 构建，采用 Agent + Browser + LLM 三层结构，支持本地与云端（Browser Use Cloud）双模式 。

  • 适用人群：开发者、测试工程师、需要构建复杂 AI 自动化流程的用户 。

• Agent-Browser

  • 上下文效率优先：专为减少 AI 上下文窗口占用而设计，采用“快照 + 引用”（如 @e1）机制，上下文使用减少 93% 。

  • 架构：Rust CLI + Node.js 守护进程 + Playwright 浏览器实例，启动快（<50ms），适合高频命令调用 。

  • 适用人群：AI 编码助手（如 Claude、Cursor）用户，追求低延迟、高效率的自动化任务

二、如何安装和使用

1. 如何安装

在基于Openclaw相应的软件上如何使用，现在基本Agent平台都支持skill。

https://skillhub.cn/skills/browser-use

https://skillhub.cn/skills/agent-browser

以Qclaw为例

2. 如何使用

目前我还没有详细体验过 browser-use，后续我再给大家做具体分析。

我不太习惯用自然语言下达指令，主要是觉得AI响应思考速度偏慢，而且我自己也容易描述得不够精准。不太懂CSS的朋友，可以直接试试用自然语言来操作。

三、结论

直接让Openclaw接入Browser-use或Agent-Brower，就能实现你的需求了。