使用说明
MCP副驾驶Chrome扩展程序
一个Chrome扩展程序，模仿VS Code GitHub Copilot聊天代理，与Playwright MCP集成 双子座AI该扩展提供了一个智能聊天机器人界面，可以使用Playwright自动执行浏览器任务，该界面由谷歌的Gemini AI提供支持，用于自然语言理解。
特性
- 🤖 Gemini AI代理：使用谷歌Gemini AI的智能自然语言处理
- 💬 聊天界面：出现在任何网页上的GitHub Copilot风格聊天UI
- 🎭 剧作家MCP集成：与Playwright MCP服务器完全集成，实现浏览器自动化
- 🔗 CDP支持：通过Chrome DevTools协议（CDP）连接到现有的Chrome配置文件
- 🧠 智能刀具选择：Gemini AI自动选择合适的剧作家工具
- 📸 电脑屏幕截图工具：截取网页截图
- 🔍 页面分析：分析页面结构和可访问性
- 🎯 元素交互：单击元素、填写表单并与页面交互
- 🚀 导航：导航到URL并控制浏览器行为
- 🔗 多步骤任务：链式多工具需要复杂的自动化
- ⌨️ 键盘快捷键：切换聊天
Cmd+Shift+K（Mac）或Ctrl+Shift+K（Windows/Linux） - 🎯 现有Chrome配置文件：将您当前的Chrome浏览器与扩展程序和登录会话一起使用
建筑
该扩展使用Gemini AI的桥接服务器架构：
- Chrome 扩展：提供UI和用户交互
- MCP网桥服务器：Node.js服务器，将扩展与Gemini AI和Playwright MCP连接起来
- Gemini AI代理：解释用户意图并协调工具调用
- 剧作家MCP服务器：处理实际的浏览器自动化
User Message (Natural Language)
↓
Chrome Extension (Chat UI)
↓ HTTP (localhost:8765)
MCP Bridge Server
↓
Gemini AI Agent
├→ Analyzes intent
├→ Selects tools
└→ Formats response
↓
Playwright MCP Server (via stdio)
↓ Playwright
Browser Automation
↓
Results → Gemini AI → Formatted Response → User
先决条件
- 已安装Node.js 18+
- npm或纱线
- Chrome浏览器
- Playwright MCP服务器（通过npx自动安装）
- Gemini API密钥 （从 谷歌人工智能工作室)
安装
1.克隆和安装依赖项
cd mcp_client
npm install
2.启动MCP网桥服务器
npm run server
服务器将于启动 http://localhost:8765 并自动连接到Playwright MCP服务器。
3.加载Chrome扩展程序
- 打开Chrome浏览器并导航到
chrome://extensions/ - 启用“开发人员模式”（在右上角切换）
- 点击“加载解包”
- 选择
mcp_client目录 - 现在应该加载扩展并准备使用
4.配置Gemini API密钥
- 从获取Gemini API密钥 谷歌人工智能工作室
- 单击Chrome工具栏中的扩展程序图标
- 在“Gemini AI Agent”部分粘贴您的API密钥
- 点击“保存API密钥”
- 状态应显示“已配置API密钥”
5.验证安装
- 点击“连接到MCP服务器”-它应该显示“已连接”状态
- 导航到任何网页
- 按
Cmd+Shift+K（Mac）或Ctrl+Shift+K（Windows/Linux）打开聊天界面 - 开始与AI代理聊天！
用法
打开聊天界面
- 键盘快捷键：新闻
Cmd+Shift+K（Mac）或Ctrl+Shift+K（Windows/Linux）在任何网页上 - 扩展弹出窗口：单击扩展图标，然后“切换聊天UI”
- 自动注射：聊天UI会自动出现在网页上
示例命令（自然语言）
Gemini AI代理能够理解自然语言，因此您可以通过多种方式提问：
-
截图:
- “截取此页面的屏幕截图”
- “捕获当前页面”
- “此屏幕截图”
-
分析页面:
- “分析此页面”
- “此页面上有哪些元素？”
- “告诉我此页面的结构”
-
导航:
- “导航到https://example.com"
- 首选https://github.com"
- “打开google.com”
-
复杂的任务:
- 导航到GitHub，截图并分析页面
- “填写登录表格test@example.com密码123“
- “单击提交按钮，等待页面加载”
可用的编剧工具
该扩展提供了对所有Playwright MCP工具的访问：
playwright_navigate-导航到URLplaywright_screenshot-截图playwright_click-点击元素playwright_fill-填写输入字段playwright_accessibility_snapshot-获取页面结构playwright_evaluate-执行JavaScriptplaywright_wait_for-等待元素或条件
发展
项目结构
mcp_client/
├── src/
│ ├── background.js # Chrome extension background service worker
│ ├── content.js # Content script that injects chat UI
│ ├── chat-ui.js # Chat UI component
│ ├── popup.html # Extension popup HTML
│ ├── popup.js # Extension popup script
│ ├── styles.css # Chat UI styles
│ └── mcp-bridge-server.js # MCP bridge server
├── manifest.json # Chrome extension manifest
├── package.json # Node.js dependencies
└── README.md # This file
运行网桥服务器
npm run server
服务器运行在 http://localhost:8765 并处理Chrome扩展程序和Playwright MCP服务器之间的通信。
开发扩展
- 对中的扩展文件进行更改
src/ - 在Chrome中重新加载扩展程序(
chrome://extensions/→ 单击重新加载） - 在任何网页上进行测试
调试
- 扩展日志：打开
chrome://extensions/→ 单击“检查视图：服务工作者”查看后台脚本日志 - 内容脚本日志：在任何网页上打开DevTools以查看内容脚本日志
- 网桥服务器日志：检查你跑的终点站
npm run server
它是如何工作的（比如GitHub Copilot）
此扩展模仿了GitHub Copilot如何将MCP与AI结合使用：
- 用户输入：用户在聊天界面中键入自然语言命令
- Gemini人工智能处理：Gemini AI解释用户的意图和上下文
- 工具选择：Gemini AI会自动选择合适的Playwright MCP工具
- 工具执行：通过MCP网桥服务器调用工具
- 剧作家自动化：Playwright MCP服务器执行浏览器自动化
- AI响应：Gemini AI将结果格式化为自然、有益的响应
- 多步骤任务：Gemini可以链接多个工具以实现复杂的自动化
使用Gemini AI的MCP协议流
User Message (Natural Language)
↓
Chat UI
↓
Background Script (Message Handler)
↓
HTTP Request to Bridge Server
↓
MCP Bridge Server
↓
Gemini AI Agent
├→ Understands intent
├→ Selects Playwright tools
└→ Calls tools via MCP Client
↓
Playwright MCP Server (stdio)
↓
Playwright Browser Automation
↓
Tool Results
↓
Gemini AI (Formats response)
↓
Response (back through the chain)
↓
Chat UI (Displays to user)
配置
更改网桥服务器端口
编辑 src/background.js:
const MCP_BRIDGE_URL = 'http://localhost:8765'; // Change port here
并更新 src/mcp-bridge-server.js:
const PORT = 8765; // Change port here
定制剧作家MCP服务器
编辑 src/mcp-bridge-server.js 要更改MCP服务器命令，请执行以下操作：
mcpTransport = new StdioClientTransport({
command: 'npx',
args: ['-y', '@playwright/mcp@latest'], // Customize here
});
故障排除
端口8765已在使用中
如果你看到 EADDRINUSE: address already in use :::8765:
# Option 1: Kill the existing server
npm run kill-server
# Option 2: Manual kill
lsof -ti:8765 | xargs kill -9
# Option 3: Restart the server
npm run restart
扩展显示“断开连接”状态
- 确保网桥服务器正在运行：
npm run server - 检查服务器是否可在以下位置访问
http://localhost:8765/health - 检查浏览器控制台是否有错误
- 验证服务器日志中的MCP连接
聊天界面未出现
- 在中重新加载扩展
chrome://extensions/ - 检查内容脚本是否已启用
- 打开浏览器DevTools并检查JavaScript错误
- 尝试刷新网页
- 按
Cmd+Shift+K（Mac）或Ctrl+Shift+K（Windows/Linux）
Gemini API关键问题
- 在扩展弹出窗口中验证您的API密钥是否正确
- 检查API密钥是否可以访问Gemini API
- 检查网桥服务器日志中的API错误
- 验证您的互联网连接
- 检查API费率限制（免费等级：60次请求/分钟）
MCP工具不工作
- 验证网桥服务器是否已连接到Playwright MCP（检查服务器日志中的“✅ 已连接”）
- 检查网桥服务器日志是否有错误
- 确保Playwright MCP服务器可以通过以下方式安装
npx - 检查Node.js和npm是否安装正确
- 尝试重新启动服务器：
npm run restart
CORS错误
网桥服务器包含CORS标头，但如果您遇到CORS问题：
- 检查网桥服务器是否正在运行
- 验证扩展和服务器中的端口是否匹配
- 检查浏览器控制台是否有特定的CORS错误消息
CDP支持（使用现有的Chrome配置文件）
该扩展程序现在支持通过Chrome DevTools协议（CDP）连接到现有的Chrome实例。这使您能够：
- ✅ 使用您现有的Chrome个人资料
- ✅ 访问所有Chrome扩展程序
- ✅ 使用已登录的会话
- ✅ 共享Cookie和存储
- ✅ 在当前Chrome窗口中操作
快速设置
-
使用远程调试启动Chrome：
# macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 # Linux google-chrome --remote-debugging-port=9222 # Windows "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 -
启动网桥服务器：
npm run server -
该扩展程序将自动检测并连接到您的Chrome浏览器
有关详细的设置说明，请参阅 CHROME_CDP_SETUP.md
有关实施细节，请参阅 CDP_实施例.md 和 CDP_范围_摘要.md
局限性
- 没有CDP： 浏览器自动化在单独的Playwright实例中运行（不是当前的Chrome选项卡）
- 对于CDP： 使用您现有的Chrome配置文件（推荐）-请参阅上面的CDP支持
- 与原生Playwright协议相比，使用CDP时，某些Playwright功能的保真度可能较低
- 要求网桥服务器在本地运行
未来改进
- [x] 对现有Chrome配置文件的CDP支持(✅ 已完成）
- []通过远程调试自动启动Chrome
- []支持多个Chrome实例
- []增强的连接监控
- []支持多个MCP服务器
- []会话间的持续聊天历史记录
- []自定义工具定义
- []更好的错误处理和重试逻辑
- []支持流式响应
- []与其他MCP服务器（不仅仅是Playwright）集成
许可证
麻省理工学院
贡献
欢迎投稿！请随时提交拉取请求。
