OpenClaw 浏览器控制(Chrome MCP)完整教程

OpenClaw 浏览器控制(Chrome MCP)完整教程

一、什么是 Chrome MCP?

MCP(Model Context Protocol)是 Anthropic 推出的开放协议,用于解决 AI 模型与外部工具、数据源之间的连接问题。

Chrome 从 144 版本开始增强了对 MCP 的支持,使浏览器能够成为 AI Agent 的操作终端。

通过 OpenClaw + Chrome MCP,可以让 Claude、GPT、Qwen 等模型直接操作浏览器。

官方更新说明:

https://developer.chrome.com/docs/devtools/release-notes


二、OpenClaw 可以控制浏览器做什么?

1. 网页内容提取

AI 可以直接读取当前网页内容。

例如:

  • 总结网页文章

  • 提取表格数据

  • 分析网页内容

  • 阅读 PDF

示例:

复制代码
打开知乎首页,总结今天最热门的5个话题。

2. 浏览器自动化操作

通过自然语言完成复杂操作。

例如:

  • 登录网站

  • 搜索内容

  • 点击按钮

  • 填写表单

  • 提交数据

示例:

复制代码
打开京东,搜索RTX5090,并按价格排序。

3. 历史记录与书签管理

帮助用户快速查找历史网页。

示例:

复制代码
帮我找上个月访问过的 Spring Boot 官方文档。

4. DevTools 调试

对于开发人员非常实用。

AI 可以:

  • 读取 Console 报错

  • 分析 Network 请求

  • 查看 DOM

  • 给出修复建议

示例:

复制代码
分析当前网页控制台报错并给出修复方案。

三、Chrome 配置

第一步:升级 Chrome

必须升级到最新版 Chrome。

建议:

复制代码
Chrome 144+

第二步:开启 Remote Debugging

浏览器打开:

复制代码
chrome://inspect/#remote-debugging

确保:

复制代码
Enable remote debugging

已开启。


macOS 额外配置

Chrome 默认禁止 AppleScript 执行 JavaScript。

完全退出 Chrome 后执行:

复制代码
defaults write com.google.Chrome script-keys-enabled -bool true

恢复默认:

复制代码
defaults write com.google.Chrome script-keys-enabled -bool false

四、配置 OpenClaw

升级 OpenClaw

更新到最新版:

复制代码
openclaw update

修改配置文件

修改 browser 配置:

复制代码
  "browser": {
    "enabled": true,
    "defaultProfile": "user",
    "profiles": {
      "user": {
        "cdpPort": 9222,
        "driver": "existing-session",
        "color": "#ff5240"
      }
    }
  }

修改 tools 配置:

复制代码
  "tools": {
    "profile": "full"
  },

注意:

默认很多用户是:

复制代码
  tools: {
    profile: 'coding'
  },

必须改成:

复制代码
tools:
  profile: full

否则 Browser Tool 无法使用。


重启 Gateway

复制代码
openclaw gateway restart

检查浏览器连接

复制代码
openclaw browser status

首次连接时 Chrome 会弹出:

复制代码
允许远程调试?

点击允许即可。


五、常用浏览器命令

浏览器状态

复制代码
openclaw browser status

启动浏览器控制

复制代码
openclaw browser start

停止浏览器控制

复制代码
openclaw browser stop

查看所有标签页

复制代码
openclaw browser tabs

新建标签页

复制代码
openclaw browser tab new

切换标签页

复制代码
openclaw browser tab select 2

关闭标签页

复制代码
openclaw browser tab close 2

打开网页

复制代码
openclaw browser open https://example.com

聚焦指定页面

复制代码
openclaw browser focus abcd1234

关闭页面

复制代码
openclaw browser close abcd1234

六、实战案例

案例1:微博自动发文

需求:

  1. 打开微博热搜

  2. 获取热搜第一内容

  3. 自动总结

  4. 回到微博首页

  5. 发布微博

提示词:

复制代码
用 chrome mcp 的方式:

进入微博热搜,
读取第一名热搜内容,
生成一个接地气的总结,
回到微博首页,
发布该内容,
并点击发送。

案例2:保存为 Skill

完成后可以让 OpenClaw 记住流程:

复制代码
请将以上动作保存成 Skill。

以后一句话即可执行。


案例3:自动截图

需求:

搜索 OpenClaw 并保存长截图。

提示词:

复制代码
用 chrome mcp 的方式:

打开 B站,
搜索 OpenClaw,
将第一页和第二页搜索结果分别保存成长截图,
保存到桌面。

案例4:自动生成 PDF

需求:

让 Gemini 生成英语学习资料。

提示词:

复制代码
用 chrome mcp 的方式:

打开 Gemini,

生成小学三年级英语对话练习。

要求:

生成3个章节;
每个章节不少于20轮对话;

最后汇总生成 PDF,

保存到桌面。

案例5:模拟爬虫抓取数据

需求:

抓取 B站搜索结果。

提示词:

复制代码
用 chrome mcp 的方式:

打开 B站,

搜索 OpenClaw,

抓取前2页内容。

提取:

- 视频标题
- 发布时间
- 播放量

生成 Excel 文件,

保存到桌面。

案例6:自动生成 PPT

需求:

调研 OpenClaw 应用场景。

提示词:

复制代码
用 chrome mcp 的方式:

Google 搜索:

OpenClaw 的落地应用

整理相关资料,

生成5页 PowerPoint,

保存到桌面。

或者:

复制代码
打开 workassets.ai

自动生成 PPT

保存到桌面。

七、控制指定 Chrome 实例

很多用户不希望 OpenClaw 接管自己的日常浏览器。

推荐使用独立实例。

启动独立 Chrome

macOS:

复制代码
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--remote-debugging-port=10222 \
--user-data-dir=/Users/yourname/Desktop/openclaw_profile \
--profile-directory="user"

创建 DevToolsActivePort

在:

复制代码
/Users/yourname/Desktop/openclaw_profile

创建:

复制代码
DevToolsActivePort

内容:

复制代码
10222
/devtools/browser/xxxxxxxx

修改 OpenClaw 配置

复制代码
browser:
  enabled: true

  defaultProfile: user

  profiles:
    user:
      cdpPort: 10222
      userDataDir: /Users/yourname/Desktop/openclaw_profile
      driver: existing-session
      color: "#ff5240"

重启:

复制代码
openclaw gateway restart

即可直接连接。

无需弹窗授权。


八、如何取消"允许远程调试"弹窗

核心方案:

使用独立实例启动 Chrome。

启动参数:

复制代码
--remote-debugging-port=10222

这样 OpenClaw 会直接连接该实例。

不会出现授权弹窗。


九、常见错误

错误1

复制代码
GatewayClientRequestError:
unknown method: browser.request

解决方案1

自动修复:

复制代码
openclaw doctor --fix

解决方案2

检查插件是否启用:

复制代码
openclaw config get plugins.allow

如果为空:

复制代码
openclaw config set plugins.allow '["browser"]'

如果已有插件:

复制代码
openclaw config set plugins.allow '["browser","coding"]'

或者:

复制代码
openclaw config set plugins.allow '["browser","coding","shell"]'

根据自己的配置添加即可。


十、总结

Chrome MCP + OpenClaw 相当于给 AI 配备了一双"眼睛"和一双"手"。

它不仅能看到网页内容,还能:

  • 点击

  • 输入

  • 搜索

  • 下载

  • 截图

  • 调试

  • 生成文档

  • 生成 Excel

  • 生成 PPT

对于开发者而言,相当于拥有了一个能够真正操作浏览器的 AI 助手,可以大幅提高日常工作效率。

这个教程基本可以作为《OpenClaw Chrome MCP 从入门到实战》发布,如果你是 Windows 10/11 用户,我还可以再补一章 "Windows 下 Chrome MCP + OpenClaw 配置(含 CMD、PowerShell 和 WSL 环境)" ,以及 OpenClaw + Claude Code + Chrome MCP 联动开发教程

相关推荐
ct9782 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客2 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖2 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty3 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
AI焦点3 小时前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能
Dxy12393102163 小时前
Python线程锁:为什么多线程会“打架“,以及怎么解决
开发语言·前端·python
海兰3 小时前
【web应用】Excel 项目数据自动化分析系统(AI 驱动分析)详细设计与部署指南(附源代码)
前端·人工智能·自动化·excel
2501_940041743 小时前
技术分享:高质量全栈开发提示词设计实践 —— 覆盖简单到复杂
前端·prompt
IT_陈寒4 小时前
Python的os.path.join居然能这么坑?
前端·人工智能·后端