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 联动开发教程。

相关推荐
excel14 小时前
基于 GPT 的自动发布文章接口方案:从一句话或一张图片生成并发布内容
前端·javascript·后端
其实防守也摸鱼15 小时前
个人学习 Pwn 思路:从基础到漏洞利用的进阶路径
大数据·前端·人工智能·chrome·算法·安全·网络安全
朱涛的自习室16 小时前
212 个需求、22 万行代码:Agent 接管开源项目的 19 天
android·前端·人工智能
aZhe的全栈知识分享16 小时前
AI 还原 Figma 效果总达不到预期?先别急着让它写代码
前端·后端·面试
review4454316 小时前
Codex Hooks 入门实战:生命周期事件、matcher 与5分钟跑通一个钩子
前端·agent·vibecoding
函数小陈16 小时前
阿里云部署DSH与RAM完成运维
前端·后端
用户4993350250716 小时前
JS 作用域劫持的死穴:动态 this 穿透,以及 AST 怎么救
前端
IT_陈寒17 小时前
React的setState真是个演员,你以为它同步其实在装睡
前端·人工智能·后端
孟健19 小时前
Claude Code 同需求写两版对比:装不装 frontend-design 差多远?
前端·ai编程·claude
梦de天空一米168820 小时前
【一个重复id让游戏卡在62%,聊聊配置表检查】
前端