📦
MCX
Bridge between MCP protocol and Chrome extensions. Connect AI models to browser capabilities.
0 installs
Trust: 34 — Low
Browser
Ask AI about MCX
Powered by Claude · Grounded in docs
I know everything about MCX. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Loading tools...
Reviews
Documentation
MCP Chrome Feedback
提供MCP服务与Chrome扩展交互的反馈收集功能
功能特性
- 🤖 交互式反馈收集: 通过Chrome扩展界面收集用户反馈
- 📝 文本和图片支持: 支持文本反馈和图片附件
- 🔄 实时通信: WebSocket实时通信机制
- 📊 反馈历史: 自动保存和管理反馈历史
- 🎯 元素捕获: 支持页面元素捕获和截图
- ⚡ 即插即用: 标准MCP协议，可直接配置到Cursor
设计灵感
Minidoracat - mcp-feedback-enhanced web-infra-dev - midscene-chrome-extension
安装
1. 安装MCP工具
方法1: 使用npx (推荐)
无需安装，直接在MCP配置中使用：
{
"mcpServers": {
"chrome-feedback": {
"command": "npx",
"args": ["mcp-chrome-feedback@latest"]
}
}
}
方法2: 全局安装
npm install -g mcp-chrome-feedback@latest
方法3: 从源码构建
git clone https://github.com/2019-02-18/MCX.git
cd MCX/mcp-chrome-feedback
npm install
npm run build
🔧 开发构建
# 构建项目
npm run build
# 开发模式
npm run dev
# 清理构建文件
npm run clean
2. 安装Chrome扩展
- 打开Chrome浏览器
- 进入
chrome://extensions/ - 开启"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择项目中的
chrome-extension文件夹
配置到Cursor
方法1: 使用npx (推荐)
编辑Cursor的MCP配置文件，添加以下配置：
{
"mcpServers": {
"chrome-feedback": {
"command": "npx",
"args": ["mcp-chrome-feedback@latest"]
}
}
}
方法2: 使用全局安装
如果已全局安装，可以直接使用：
{
"mcpServers": {
"chrome-feedback": {
"command": "mcp-chrome-feedback"
}
}
}
方法3: 自定义端口配置
如果需要指定特定端口：
{
"mcpServers": {
"chrome-feedback": {
"command": "npx",
"args": ["mcp-chrome-feedback@latest"],
"env": {
"MCP_CHROME_PORT": "8900"
}
}
}
}
方法4: 使用本地路径 (开发模式)
如果从源码运行：
{
"mcpServers": {
"chrome-feedback": {
"command": "node",
"args": ["/path/to/MCX/mcp-chrome-feedback/build/index.js"]
}
}
}
使用方法
1. 启动Chrome扩展
- 确保Chrome扩展已安装并启用
- 打开扩展的侧边栏
- 点击"连接"按钮连接到MCP服务
2. 在Cursor中使用
配置完成后，在Cursor中可以使用以下工具：
interactive_feedback
请求用户通过Chrome扩展提供反馈
请使用interactive_feedback工具收集用户对当前代码的反馈
参数：
summary: AI工作摘要 (默认: "我已完成了您请求的任务。")timeout: 超时时间(秒) (默认: 600)project_directory: 项目目录 (默认: ".")
get_feedback_history
获取反馈历史记录
请显示最近的反馈历史
参数：
limit: 返回记录数量 (默认: 10)
get_extension_status
检查Chrome扩展连接状态
请检查Chrome扩展的连接状态
clear_feedback_history
清空反馈历史
请清空所有反馈历史记录
Chrome扩展功能
反馈收集
- 文本反馈输入
- 图片拖拽上传
- 图片粘贴支持
- 页面元素捕获
- 全页面截图
元素检查
- 点击页面元素进行捕获
- 自动截图和元素信息提取
- 支持复杂页面结构
实时通信
- WebSocket连接状态显示
- 自动重连机制
- 连接状态指示器
工作流程
- AI请求反馈: 在Cursor中调用
interactive_feedback工具 - 扩展显示界面: Chrome扩展自动显示反馈收集界面
- 用户提供反馈: 用户输入文本、上传图片或捕获页面元素
- 反馈传回AI: 反馈数据通过MCP协议传回Cursor
- AI处理反馈: AI根据反馈调整后续行为
配置选项
环境变量
MCP_CHROME_PORT: Chrome扩展通信端口 (默认: 8797，如端口被占用会自动递增到可用端口)
Chrome扩展设置
在扩展的设置中可以配置：
- 服务器地址
- 自动连接
- 反馈历史限制
故障排除
连接问题
-
检查扩展状态:
请使用get_extension_status工具检查连接状态 -
端口问题:
- 服务会自动寻找可用端口 (8797-8806)
- 如需指定端口，使用环境变量
MCP_CHROME_PORT - 清理npx缓存:
rm -rf ~/.npm/_npx(Unix) 或删除%USERPROFILE%\.npm\_npx(Windows)
-
依赖问题:
- 确保使用最新版本:
mcp-chrome-feedback@latest - 清理npm缓存:
npm cache clean --force
- 确保使用最新版本:
-
重启服务: 重启Cursor或重新加载扩展
反馈收集问题
- 超时设置: 增加timeout参数值
- 网络连接: 检查本地网络连接
- 扩展权限: 确认扩展有必要的权限
开发
构建项目
npm run build
开发模式
npm run dev
测试
npm test
许可证
MIT License
贡献
欢迎提交Issue和Pull Request！
更新日志
v1.0.4
- 🚀 重大改进: 升级MCP SDK到v1.13.0
- 🔧 端口管理: 添加自动端口分配功能 (8797-8806)
- 🛠️ 依赖修复: 解决npx安装和运行问题
- 📦 打包优化: 改进npm包结构和依赖管理
- 🐛 错误处理: 增强错误日志和调试信息
v1.0.3
- 🔄 端口冲突修复: 初步解决端口占用问题
- 📝 文档更新: 改进安装和配置说明
v1.0.0
- 🎉 初始版本: 基础反馈收集功能
- 🔌 Chrome扩展集成: 完整的浏览器扩展支持
- 🤖 MCP协议支持: 标准MCP工具实现
- 💬 实时通信: WebSocket双向通信