AI导哈

MCP服务器管理插件

一款用于管理MCP服务器并与AI助手交互的Chrome扩展，提供服务器监控、快速访问和OAuth认证等功能。

  • by zonlabs
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ashen-dusk/mcp-extension

使用说明

MCP助手-Chrome扩展程序

一个Chrome扩展程序，用于管理您的MCP（模型上下文协议）服务器，并从任何地方与您的AI助手进行交互。

特性

  • 认证：使用Google OAuth安全登录
  • MCP服务器管理：查看、重新启动和删除已配置的MCP服务器
  • 实时状态：监视服务器的连接状态
  • 快速访问：无需打开完整的web应用程序即可访问服务器
  • 无缝集成：适用于您现有的MCP Assistant帐户

先决条件

  • Node.js 18+和npm/yarn/pnpm
  • Chrome浏览器（88+版本）
  • 活跃的MCP助理帐户位于 mcpassistant.vercel.app

安装与开发

1.安装依赖项

cd chrome-extension
npm install

2.配置谷歌OAuth

要启用身份验证，您需要配置Google OAuth：

  1. 首选 谷歌云控制台
  2. 创建新项目或选择现有项目
  3. 启用Google+API
  4. 创建OAuth 2.0凭据
  5. 将您的扩展ID添加到授权的JavaScript源
  6. 更新 manifest.json 使用您的OAuth客户端ID

3.构建扩展

对于热重载开发：

npm run dev

对于生产构建：

npm run build

已建成的扩建部分将位于 dist/ 文件夹。

4.在Chrome中加载扩展程序

  1. 打开Chrome浏览器并导航到 chrome://extensions/
  2. 启用“开发人员模式”（在右上角切换）
  3. 点击“加载解包”
  4. 选择 dist/ 项目中的文件夹

项目结构

chrome-extension/
├── public/
│   └── icons/           # Extension icons
├── src/
│   ├── background/      # Service worker
│   │   └── service-worker.ts
│   ├── components/      # React components
│   │   ├── ui/         # Reusable UI components
│   │   ├── LoginScreen.tsx
│   │   ├── ServerList.tsx
│   │   └── ServerCard.tsx
│   ├── hooks/          # Custom React hooks
│   │   ├── useAuth.ts
│   │   └── useMcpServers.ts
│   ├── lib/            # Utilities and API
│   │   ├── api.ts
│   │   ├── storage.ts
│   │   └── utils.ts
│   ├── styles/         # Global styles
│   │   └── globals.css
│   ├── types/          # TypeScript types
│   │   └── index.ts
│   ├── App.tsx         # Main app component
│   └── main.tsx        # Entry point
├── manifest.json       # Extension manifest
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

建筑

后台服务人员

服务工作者(src/background/service-worker.ts)手柄：

  • 通过Chrome Identity API使用Google OAuth进行身份验证
  • 在弹出窗口和后台之间传递消息
  • API对MCP Assistant后端的请求
  • 代币存储和管理

弹出式用户界面

弹出式UI是用React构建的，包括：

  • 登录：谷歌OAuth身份验证
  • 服务器列表：已配置的MCP服务器列表
  • 服务器卡：单个服务器管理（重新启动、删除）

状态管理

状态管理使用：

  • React挂钩(useState, useEffect)
  • 定制挂钩(useAuth, useMcpServers)
  • Chrome存储API持久性

API通信

所有API请求都通过：

  1. Popup向后台工作者发送消息
  2. 后台工作者发出经过身份验证的GraphQL请求
  3. 通过消息传递将响应发送回弹出窗口

可用脚本

  • npm run dev -使用热重新加载启动开发服务器
  • npm run build -为生产而建
  • npm run preview -预览生产构建
  • npm run lint -运行ESLint
  • npm run format -使用Prettier格式化代码
  • npm run type-check -检查TypeScript类型

扩展权限

该扩展需要以下权限：

  • storage -存储身份验证令牌和用户数据
  • identity -Google OAuth身份验证
  • 主机权限：
    • https://www.mcp-assistant.in/* -MCP助手后端
    • https://*.googleapis.com/* -谷歌OAuth

生产大楼

  1. 更新版本 manifest.json 和 package.json
  2. 运行生产构建：
    npm run build
  3. 这 dist/ 文件夹包含生产就绪扩展
  4. 在Chrome中测试内置扩展程序
  5. 创建ZIP文件 dist/ 用于分发的文件夹

发布到Chrome网上商店

先决条件

  1. 创建一个 Chrome网上商店开发者帐户
  2. 一次性支付5美元的开发者注册费
  3. 准备扩展资产：
    • 扩展图标（16x16、32x32、48x48、128x128）
    • 屏幕截图（1280x800或640x400）
    • 宣传图片（可选）

发布步骤

  1. 准备您的扩展

    npm run build
cd dist
zip -r mcp-assistant-extension.zip .

  2. 上传到Chrome网上商店

    • 首选 Chrome网上商店开发人员仪表板
    • 点击“新建项目”
    • 上传ZIP文件
    • 填写店铺列表信息：
      • 姓名：MCP助理
      • 说明：随时随地管理您的MCP服务器
      • 类别：生产力
      • 语言：英语
    • 上传截图和宣传图片
    • 设置隐私设置和定价（免费）

  3. 提交审核

    • 查看所有信息
    • 点击“提交审核”
    • 等待Chrome网上应用商店审核（通常为1-3个工作日）

  4. 批准后

    • 扩展程序将在Chrome网上商店发布并可用
    • 您可以在开发人员仪表板中跟踪安装和评论

重要说明

  • 使用OAuth的扩展需要域验证
  • 确保所有截图显示实际的扩展功能
  • 根据权限，可能需要隐私政策
  • 使用安全补丁更新扩展

故障排除

扩展未加载

  • 确保您已构建扩展(npm run build)
  • 检查Chrome DevTools控制台是否有错误
  • 验证是否已安装所有依赖项

身份验证失败

  • 检查是否正确配置了Google OAuth凭据
  • 验证manifest.json具有正确的OAuth作用域
  • 确保后端URL可访问

API请求失败

  • 检查Chrome DevTools中的网络选项卡
  • 验证正在发送身份验证令牌
  • 确认后端正在运行且可访问

安全考虑

  • 永远不要将OAuth凭据提交给版本控制
  • 使用Chrome存储API存储敏感数据（加密）
  • 对所有API请求使用HTTPS
  • 验证所有用户输入
  • 保持依赖关系更新

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 彻底测试
  5. 提交拉取请求

许可证

该项目是MCP Assistant应用程序的一部分。

支持

对于问题和疑问：

更新日志

版本1.0.0

  • 初始版本
  • Google OAuth身份验证
  • 查看和管理MCP服务器
  • 重新启动并删除服务器功能
  • 实时状态监控

相关 MCP