AI Agent 控制浏览器完全指南：OpenClaw × Chrome 的 5 种连接方式

AI Agent 控制浏览器完全指南：OpenClaw × Chrome 的 5 种连接方式

让你的 AI Agent 像人一样操作浏览器——打开网页、点击按钮、填写表单、截图、抓数据，全部通过自然语言指令完成。本文整理了 2026 年 OpenClaw 控制浏览器的所有方式，从最简单到最强大，帮你选对方案。

---

前言：为什么 AI 需要控制浏览器？

你有没有遇到过这些场景：

• 让 AI 帮你登录后台，自动抓取报表数据
• 让 AI 帮你在多个网站上填写重复的表单
• 让 AI 帮你监控某个页面的变化
• 让 AI 帮你自动化测试一个 Web 应用
• 让 AI 帮你操作那些没有 API 的老系统

这些需求的核心都是一个问题：AI 怎么操作浏览器？

OpenClaw（GitHub 35 万+ Star 的开源 AI Agent 框架）给出了一套完整的解决方案。它基于 Chrome DevTools Protocol（CDP） 协议，让 AI Agent 可以通过 WebSocket 与浏览器实时通信，执行导航、点击、输入、截图等几乎所有浏览器操作。

---

一、底层原理：CDP 协议

在讲具体方案之前，先搞清楚底层原理。

什么是 CDP？

Chrome DevTools Protocol（CDP） 是 Chrome 浏览器暴露的一组调试接口。你平时按 F12 打开的开发者工具，底层就是通过 CDP 和浏览器通信的。

┌───────────────┐                      ┌───────────────┐
│   AI Agent    │  ←  WebSocket 双向通信 →  │   Chrome 浏览器 │
│  (OpenClaw)   │     CDP 协议              │   (端口 9222)  │
└───────────────┘                      └───────────────┘

CDP 能做什么？
├── Page：打开/关闭/导航页面
├── DOM：读取/修改页面元素
├── Network：监听/拦截网络请求
├── Input：模拟点击/输入/滚动
├── Runtime：执行 JavaScript
├── Emulation：模拟设备/网络条件
└── ... 总共 300+ 个命令

传统的网页爬虫（Selenium/WebDriver）是 HTTP 请求-响应模型，每次操作都要等一个来回。而 CDP 是 WebSocket 双向通信，浏览器可以主动推送事件给 Agent，响应速度更快，能力也更强。

---

二、5 种控制方式全景对比

先看全貌，再挑适合自己的。

#	方式	原理	适合场景	复杂度	安全性
1	OpenClaw Managed Browser	OpenClaw 启动独立浏览器	自动化任务、爬虫	⭐ 最简单	⭐⭐⭐⭐⭐ 最安全
2	Chrome Extension Relay	Chrome 扩展桥接	需要登录态的操作	⭐⭐	⭐⭐⭐
3	Remote Debugging Port	手动启动 Chrome + 调试端口	完全控制已有浏览器	⭐⭐⭐	⭐⭐
4	Chrome DevTools MCP	Google 官方 MCP Server	AI 原生推理+浏览器	⭐⭐⭐	⭐⭐⭐⭐
5	Browser MCP / Playwright MCP	第三方 MCP 方案	Cursor/Claude 控制浏览器	⭐⭐	⭐⭐⭐⭐

下面逐一讲解每种方式的配置步骤和适用场景。

---

三、方式 1：OpenClaw Managed Browser（推荐入门）

原理：OpenClaw 自己启动一个独立的 Chromium 实例，和你的个人浏览器完全隔离。

优点：最安全、最简单，不会影响你的个人数据。

配置步骤

# 1. 确保 OpenClaw 已安装
openclaw --version

# 2. 编辑配置文件
vim ~/.openclaw/openclaw.json

写入以下配置：

{
  "browser": {
    "enabled": true,
    "headless": false,
    "defaultProfile": "openclaw",
    "profiles": {
      "openclaw": {
        "cdpPort": 18800
      }
    }
  }
}

# 3. 启动浏览器
openclaw browser start

# 4. 打开一个网页
openclaw browser open "https://github.com"

# 5. 截取页面快照（Agent 通过快照理解页面内容）
openclaw browser snapshot --interactive

快照会返回一个带编号的页面元素列表，Agent 通过编号来操作元素：

[1] Link "Sign in"
[2] Link "Sign up"
[3] Input "Search or jump to..."
[4] Link "Explore"

然后你可以直接用自然语言让 Agent 操作：

> 点击 Sign in 按钮，输入用户名 xxx，密码 xxx，然后登录

适用场景

• 爬取公开数据
• 自动化测试
• 批量填表
• 任何不需要你个人登录态的任务

---

四、方式 2：Chrome Extension Relay（需要登录态时用）

原理：安装一个 Chrome 扩展，把你正在使用的浏览器 Tab 桥接给 OpenClaw。

优点：可以利用你已登录的网站（微博、淘宝、后台管理系统等），不用重新登录。

风险：Agent 可以看到你浏览器里的所有内容，包括密码和 Cookie。

配置步骤

# 1. 安装扩展文件
openclaw browser extension install

# 2. 查看扩展路径
openclaw browser extension path
# 输出类似：~/.openclaw/browser/chrome-extension

3. 在 Chrome 中加载扩展：
   ├── 打开 chrome://extensions/
   ├── 右上角开启"开发者模式"
   ├── 点击"加载已解压的扩展程序"
   └── 选择上面输出的路径

# 4. 启用 Relay
openclaw config set browser.relay true
openclaw config set browser.relayPort 18792

5. 使用：
   ├── 打开你要控制的网页 Tab
   ├── 点击扩展图标，Badge 显示 "ON" 表示已连接
   └── 现在 Agent 可以操作这个 Tab 了

安全建议

⚠️ 重要：Extension Relay 的安全注意事项

├── 永远不要在公网暴露 Relay 端口（18792）
├── 不要在银行/支付页面使用
├── 用完后及时断开连接（点击扩展图标关闭）
├── 建议创建一个独立的 Chrome Profile 专门用于 Relay
└── 不要让不信任的 Agent Skill 访问你的 Relay

---

五、方式 3：Remote Debugging Port（直连 CDP）

原理：手动启动 Chrome 时加上 --remote-debugging-port 参数，让 Chrome 在指定端口暴露 CDP 接口，OpenClaw 直接连上去。

优点：完全控制，不需要安装扩展，性能最好。

适用：你需要精确控制 Chrome 启动参数，或者在 CI/CD 环境中使用。

配置步骤

Step 1：启动 Chrome（带调试端口）

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --remote-allow-origins=* \
  --user-data-dir=/tmp/chrome-debug-profile

# Linux
google-chrome-stable \
  --remote-debugging-port=9222 \
  --remote-debugging-address=127.0.0.1 \
  --remote-allow-origins=* \
  --user-data-dir=/tmp/chrome-debug-profile

# Windows (PowerShell)
& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 `
  --remote-debugging-address=127.0.0.1 `
  --remote-allow-origins=* `
  --user-data-dir=C:\temp\chrome-debug-profile

参数说明

• --remote-debugging-port=9222：CDP 监听的端口，可以改成其他端口
• --remote-debugging-address=127.0.0.1：只允许本机连接（安全！）
• --remote-allow-origins=*：允许跨域连接
• --user-data-dir：使用独立的用户数据目录（推荐，避免影响你的主浏览器配置）

Step 2：验证 CDP 是否可用

curl http://127.0.0.1:9222/json/version

正常返回类似：

{
  "Browser": "Chrome/146.0.6868.0",
  "Protocol-Version": "1.3",
  "User-Agent": "...",
  "V8-Version": "...",
  "WebKit-Version": "...",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/xxx"
}

Step 3：配置 OpenClaw 连接

// ~/.openclaw/openclaw.json
{
  "browser": {
    "cdpUrl": "http://127.0.0.1:9222",
    "attachOnly": true,
    "profiles": {
      "chrome": {
        "cdpUrl": "http://127.0.0.1:9222",
        "attachOnly": true
      }
    }
  }
}

关键参数

• attachOnly: true：告诉 OpenClaw 不要自己启动浏览器，连接已有的
• 必须覆盖 profiles.chrome，因为 OpenClaw 有一个内置的 chrome profile 指向 Extension Relay

Step 4：重启 Gateway 并验证

openclaw gateway restart
openclaw browser status

Chrome 146+ 的新方式（更简单）

Chrome 146 及以上版本支持通过 UI 开启调试端口，不需要命令行参数：

1. 打开 chrome://inspect/#devices
2. 勾选 "Allow remote debugging from this device"
3. Chrome 自动在 127.0.0.1:9222 启动 MCP Server
4. OpenClaw 配置同上

---

六、方式 4：Chrome DevTools MCP（AI 原生方案）

原理：Google 官方维护的 MCP Server，通过 MCP 协议把 CDP 能力暴露给 AI 工具。

优点：AI 可以"理解"页面，进行推理和适应，不只是机械执行。2026.3.13 版本后成为 OpenClaw 的一等公民。

区别：前三种方式是 OpenClaw 直接通过 CDP 控制浏览器；这种方式是通过 MCP 协议间接控制，多了一层 AI 推理。

配置步骤

# 1. 确保 Node.js 20.19+ 和 Chrome 146+
node --version
google-chrome-stable --version

# 2. 安装 Chrome DevTools MCP
npx chrome-devtools-mcp@latest

# 3. Chrome 中开启远程调试
# 打开 chrome://inspect/#devices
# 勾选 "Allow remote debugging from this device"

在 OpenClaw 中配置 MCP：

// ~/.openclaw/openclaw.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

# 4. 重启 Gateway
openclaw gateway restart

MCP 能力一览

Chrome DevTools MCP 提供的工具：

工具	说明
navigate	导航到指定 URL
click	点击页面元素
type	在输入框中输入文本
screenshot	截取页面截图
getPageContent	获取页面文本内容
evaluate	执行 JavaScript
getNetworkRequests	获取网络请求列表
getConsoleMessages	获取控制台日志
startPerformanceTrace	开始性能追踪
getAccessibilityTree	获取无障碍树（AI 理解页面的核心）

---

七、方式 5：Browser MCP / Playwright MCP（适合 Cursor / Claude Desktop）

如果你用的不是 OpenClaw，而是 Cursor、Claude Desktop、VS Code 等 AI 工具，可以用 MCP 方案控制浏览器。

方案 A：Browser MCP（Chrome 扩展方式）

原理：安装一个 Chrome 扩展 + 本地 MCP Server，让 AI 工具直接操作你的浏览器。

# 1. 从 Chrome Web Store 安装 Browser MCP 扩展
# 搜索 "Browser MCP" 或访问 browsermcp.io/install

# 2. 在 AI 工具中配置 MCP Server

Cursor 配置：Settings → Tools → New MCP Server：

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }
}

Claude Desktop 配置：编辑 claude_desktop_config.json：

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }
}

3. 使用：
   ├── 在 Chrome 中固定 Browser MCP 扩展图标
   ├── 点击图标，状态变为 "Connected"
   └── 在 Cursor/Claude 中直接说"打开 xxx 网页，帮我 xxx"

特点：

• 使用你真实的浏览器（有登录态、Cookie）
• 本地运行，数据不上传
• 绕过基本的 Bot 检测（用的是真实浏览器指纹）

方案 B：Playwright MCP（无需扩展，跨浏览器）

原理：微软的 Playwright 团队出品，直接启动一个浏览器实例，通过无障碍树让 AI 理解页面。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Cursor 一行命令安装：

# Cursor 中打开终端执行
npx @playwright/mcp@latest

VS Code 一行命令安装：

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

特点：

• 不需要 Chrome 扩展
• 支持 Chrome、Firefox、WebKit、Edge
• 默认 Headed 模式（可以看到浏览器操作过程）
• 基于无障碍树（Accessibility Tree），不依赖视觉模型
• 支持持久化 Profile（保留登录态）

配置选项：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=chrome",
        "--headless"
      ]
    }
  }
}

参数	说明
--browser=chrome	使用的浏览器（chrome/firefox/webkit/msedge）
--headless	无头模式（后台运行，不显示窗口）
--isolated	每次启动全新会话（不保留 Cookie）
--user-data-dir=路径	指定用户数据目录（保留登录态）

---

八、5 种方式怎么选？

你的场景是什么？

├── "我就想试试 AI 控制浏览器"
│   └── 方式 1：Managed Browser（最简单，最安全）
│
├── "我需要 AI 操作我已经登录的网站"
│   ├── 方式 2：Extension Relay（OpenClaw 用户）
│   └── 方式 5A：Browser MCP（Cursor/Claude 用户）
│
├── "我在 CI/CD 或服务器上跑自动化"
│   ├── 方式 3：Remote Debugging Port
│   └── 方式 5B：Playwright MCP --headless
│
├── "我想让 AI 有更强的页面理解能力"
│   └── 方式 4：Chrome DevTools MCP
│
├── "我用 Cursor 开发，想让 AI 帮我做端到端测试"
│   └── 方式 5B：Playwright MCP
│
└── "我想在生产环境做浏览器自动化"
    ├── 方式 3：Remote CDP + Browserless/Browserbase
    └── 或方式 1：Managed Browser + Docker

决策流程图

                      需要控制浏览器
                           │
                    你用什么 AI 工具？
                     ╱              ╲
               OpenClaw            Cursor / Claude
                 │                  / VS Code
           需要登录态吗？              │
            ╱        ╲          Playwright MCP
     不需要          需要        or Browser MCP
       │               │
  Managed Browser  Extension Relay
  (方式 1)        (方式 2)
       │
   想要 AI 理解页面？
    ╱          ╲
   是           否
    │            │
 DevTools MCP   直接用
 (方式 4)      Managed

---

九、常见问题排查

Q1：连接不上 CDP 端口

# 检查端口是否被占用
lsof -i :9222

# 检查 Chrome 是否带了调试参数启动
ps aux | grep remote-debugging

# 测试 CDP 是否可达
curl http://127.0.0.1:9222/json/version

Q2：OpenClaw 报 "browser control service timeout"

# 重启 Gateway
openclaw gateway restart

# 检查浏览器状态
openclaw browser status

# 查看详细日志
openclaw logs --follow

# 全面诊断
openclaw doctor

Q3：Extension Relay 连不上

检查清单：
├── Chrome 至少有一个 Tab 打开了
├── 扩展图标的 Badge 显示 "ON"
├── Gateway Token 正确（openclaw gateway token 查看）
├── 端口 18791 没有被防火墙拦截
└── 重启扩展 + Gateway 通常能解决

Q4：WSL2 + Windows 怎么连？

# 在 Windows 上启动 Chrome（带调试端口）
# 需要配置端口转发让 WSL2 能访问 Windows 的端口

# Windows PowerShell（管理员）
netsh interface portproxy add v4tov4 `
  listenport=9222 listenaddress=0.0.0.0 `
  connectport=9222 connectaddress=127.0.0.1

# 开放防火墙
netsh advfirewall firewall add rule name="Chrome CDP" `
  dir=in action=allow protocol=TCP localport=9222

# 在 WSL2 中测试
curl http://<Windows的局域网IP>:9222/json/version

# OpenClaw 配置中使用 Windows 的 IP

---

十、安全最佳实践

无论用哪种方式，都要注意安全：

安全原则：

1. 端口绑定
   ├── CDP 端口只绑定 127.0.0.1（本机）
   ├── 永远不要用 0.0.0.0 暴露到公网
   └── 如果要远程访问，用 SSH 隧道

2. 独立 Profile
   ├── 自动化用独立的 Chrome Profile
   ├── 不要用你的主 Profile（有所有密码和 Cookie）
   └── --user-data-dir 指定一个专用目录

3. 权限最小化
   ├── Agent 只给它需要的能力
   ├── 敏感操作（支付、删除）加人工确认
   └── 不要让不信任的 Skill 访问浏览器

4. 用完关闭
   ├── Extension Relay 用完及时断开
   ├── 调试端口用完关闭 Chrome
   └── 不要长期暴露 CDP 端口

5. 远程部署
   ├── 使用 SSH 隧道：ssh -L 9222:localhost:9222 user@server
   ├── 或使用 Tailscale 等私有网络
   └── 生产环境推荐 Browserless/Browserbase 等托管服务

---

总结

2026 年，AI 控制浏览器已经不是什么黑科技了。从 OpenClaw 的三种模式（Managed / Extension Relay / Remote CDP），到 MCP 生态的 Chrome DevTools MCP、Browser MCP、Playwright MCP，你有足够多的选择。

核心建议：

1. 新手：从 OpenClaw Managed Browser 开始，5 分钟搞定，安全隔离
2. 需要登录态：Extension Relay（OpenClaw）或 Browser MCP（Cursor/Claude）
3. 想要 AI 推理能力：Chrome DevTools MCP 或 Playwright MCP
4. 生产环境：Remote CDP + 托管服务（Browserless）
5. 无论哪种方式：端口绑定 localhost，用独立 Profile，用完关闭

底层都是同一个东西——Chrome DevTools Protocol。你只是在选择不同的"桥"来连接 AI 和浏览器。选一个适合你场景的，开始自动化吧。

---

如果这篇文章对你有帮助，欢迎点赞收藏。有问题欢迎评论区交流。

我是一个 10+ 年经验的全栈开发者，正在探索 AI Agent × 浏览器自动化的各种玩法。后续会更新更多实战内容，关注不迷路。