让本地 AI Agent 通过 MCP 协议操控浏览器：Browser Copilot 实战指南

一、问题背景

现在的 AI 编程助手（Claude Code、Codex、Trae）能写代码，但有个致命缺陷：无法验证代码在浏览器中的实际效果。

常见问题：

AI 修改了样式，说"改好了"，但打开浏览器发现根本没生效
控制台报错，你得手动复制给 AI，让它继续修
反复循环，效率很低

Browser Copilot 通过 MCP 协议解决了这个问题，让 AI 能直接操控浏览器，形成"编码 → 测试 → 修复"的完整闭环。

二、什么是 MCP 协议？

MCP（Model Context Protocol）是 Anthropic 提出的开放标准，让 AI 能安全地访问外部资源。

核心概念：

Client：AI 应用（Claude Code、Codex）
Server：提供工具的服务（Browser Copilot）
Tools：具体功能（打开网页、点击元素等）
Resources：数据（页面内容、截图）

Browser Copilot 使用 stdio 方式，通过本地 WebSocket 与 Chrome 扩展通信。

三、Browser Copilot 提供的工具

3.1 页面读取

read_current_page：读取页面标题、URL、文本
snapshot_page：获取交互元素快照
screenshot：截图
recognize_image：识别图片文字

3.2 页面操作

click：点击元素
fill：填写输入框
select_option：选择下拉框
set_checkbox：勾选复选框
press_key：按键操作
scroll：滚动页面

3.3 导航管理

open_url：打开页面
switch_tab：切换标签页
close_tab：关闭标签页

3.4 高级功能

run_javascript：执行 JS 代码
get_secret：安全填充密码（AI 读不到密码本身）
use_skill：调用预定义技能

四、实际应用场景

场景 1：自动化前端调试

工作流程：

AI 修改代码
自动刷新浏览器
读取控制台错误
检查页面渲染
发现问题，自动修复并验证

示例：

你：帮我修复按钮样式问题

AI：我先看看当前状态...发现 CSS 变量未定义。修改代码...刷新页面验证...样式已生效，问题解决！

场景 2：自动化测试

AI 自动执行：打开页面 → 填写表单 → 点击提交 → 验证结果 → 失败则分析修复

场景 3：网页数据抓取

AI 可以：打开网页 → 读取内容 → 提取信息 → 整理数据 → 保存文件

场景 4：自动化工作流

结合"技能"功能，AI 可以：自动登录 → 导航页面 → 执行操作 → 导出结果

五、技术架构

复制代码

AI Agent（MCP Client）
    | stdio JSON-RPC
    v
mcp-server.mjs（本地 Node.js 适配器）
    | WebSocket
    v
Browser Copilot（Chrome 扩展）
    | Chrome API
    v
真实浏览器

关键设计：

为什么用 WebSocket？ MCP Client 是独立进程，无法直接访问 Chrome API，需要桥梁连接。
密码安全？ get_secret 直接填充密码到输入框，AI 无法读取密码内容。
技能系统？ 预定义操作序列（如"登录 GitHub"），AI 直接调用，提高效率。

六、快速上手

第一步：安装扩展

GitHub 下载 release
解压到本地
Chrome 访问 chrome://extensions/
开启"开发者模式"
加载已解压的扩展

第二步：启用 MCP

点击扩展图标
进入"设置"
找到"MCP 集成"
开启"启用 MCP 服务器"
记录 WebSocket 地址（默认 ws://127.0.0.1:8765）

第三步：配置 AI Agent

编辑配置文件，填入 mcp-server.mjs 路径。零依赖，无需 npm install。

第四步：验证

让 AI "打开百度首页"，成功读取信息即表示连接成功。

七、安全性

本地运行：数据不上传，敏感信息不泄露
密码隔离：AI 无法读取密码内容
权限控制：可禁用特定工具
操作审计：所有操作记录在日志

八、性能优化

用 snapshot_page 代替 read_current_page，数据更小，响应更快
长页面先用 scroll 滚动到目标区域再读取
批量操作减少往返次数

九、总结

Browser Copilot 让 AI 从"写代码的机器"变成"能看能操作的智能助手"。

核心价值：

MCP 协议标准化
20+ 浏览器操作工具
完整的调试闭环
本地运行，安全可控

GitHub 搜 browser-copilot，开源免费。

欢迎 star、fork、提 issue！

如果对你有帮助，欢迎点赞、收藏、分享。有问题欢迎评论区讨论。