10 KiB
10 KiB
Chrome MCP Server 架构设计 🏗️
本文档提供 Chrome MCP Server 架构、设计决策和实现细节的详细技术概述。
📋 目录
🎯 概述
Chrome MCP Server 是一个复杂的浏览器自动化平台，通过模型上下文协议 (MCP) 将 AI 助手与 Chrome 浏览器功能连接起来。架构设计目标：
- 高性能：SIMD 优化的 AI 操作和高效的原生消息传递
- 可扩展性：模块化工具系统，便于添加新功能
- 可靠性：强大的错误处理和优雅降级
- 安全性：沙盒执行和基于权限的访问控制
🏗️ 系统架构
graph TB
subgraph "AI 助手层"
A[Claude Desktop]
B[自定义 MCP 客户端]
C[其他 AI 工具]
end
subgraph "MCP 协议层"
D[HTTP/SSE 传输]
E[MCP 服务器实例]
F[工具注册表]
end
subgraph "原生服务器层"
G[Fastify HTTP 服务器]
H[原生消息主机]
I[会话管理]
end
subgraph "Chrome 扩展层"
J[后台脚本]
K[内容脚本]
L[弹窗界面]
M[离屏文档]
end
subgraph "浏览器 APIs 层"
N[Chrome APIs]
O[Web APIs]
P[原生消息]
end
subgraph "AI 处理层"
Q[语义引擎]
R[向量数据库]
S[SIMD 数学引擎]
T[Web Workers]
end
A --> D
B --> D
C --> D
D --> E
E --> F
F --> G
G --> H
H --> P
P --> J
J --> K
J --> L
J --> M
J --> N
J --> O
J --> Q
Q --> R
Q --> S
Q --> T
🔧 组件详情
1. 原生服务器 (app/native-server/)
目的：MCP 协议实现和原生消息桥接
核心组件：
- Fastify HTTP 服务器：处理基于 HTTP/SSE 的 MCP 协议
- 原生消息主机：与 Chrome 扩展通信
- 会话管理：管理多个 MCP 客户端会话
- 工具注册表：将工具调用路由到 Chrome 扩展
技术栈：
- TypeScript + Fastify
- MCP SDK (@modelcontextprotocol/sdk)
- 原生消息协议
2. Chrome 扩展 (app/chrome-extension/)
目的：浏览器自动化和 AI 驱动的内容分析
核心组件：
- 后台脚本：主要协调器和工具执行器
- 内容脚本：页面交互和内容提取
- 弹窗界面：用户配置和状态显示
- 离屏文档：在隔离环境中进行 AI 模型处理
技术栈：
- WXT 框架 + Vue 3
- Chrome 扩展 APIs
- WebAssembly + SIMD
- Transformers.js
3. 共享包 (packages/)
3.1 共享类型 (packages/shared/)
- 工具模式和类型定义
- 通用接口和工具
- MCP 协议类型
3.2 WASM SIMD (packages/wasm-simd/)
- 基于 Rust 的 SIMD 优化数学函数
- 使用 Emscripten 编译 WebAssembly
- 向量运算性能提升 4-8 倍
🔄 数据流
工具执行流程
┌─────────────┐ ┌──────────────┐ ┌─────────────────┐ ┌──────────────┐
│ AI 助手 │ │ 原生服务器 │ │ Chrome 扩展 │ │ 浏览器 APIs │
└─────┬───────┘ └──────┬───────┘ └─────────┬───────┘ └──────┬───────┘
│ │ │ │
│ 1. 工具调用 │ │ │
├──────────────────►│ │ │
│ │ 2. 原生消息 │ │
│ ├─────────────────────►│ │
│ │ │ 3. 执行工具 │
│ │ ├──────────────────►│
│ │ │ 4. API 响应 │
│ │ │◄──────────────────┤
│ │ 5. 工具结果 │ │
│ │◄─────────────────────┤ │
│ 6. MCP 响应 │ │ │
│◄──────────────────┤ │ │
AI 处理流程
┌─────────────┐ ┌──────────────┐ ┌─────────────────┐ ┌──────────────┐
│ 内容提取 │ │ 文本分块器 │ │ 语义引擎 │ │ 向量数据库 │
└─────┬───────┘ └──────┬───────┘ └─────────┬───────┘ └──────┬───────┘
│ │ │ │
│ 1. 原始内容 │ │ │
├──────────────────►│ │ │
│ │ 2. 文本块 │ │
│ ├─────────────────────►│ │
│ │ │ 3. 嵌入向量 │
│ │ ├──────────────────►│
│ │ │ │
│ │ 4. 搜索查询 │ │
│ ├─────────────────────►│ │
│ │ │ 5. 查询向量 │
│ │ ├──────────────────►│
│ │ │ 6. 相似文档 │
│ │ │◄──────────────────┤
│ │ 7. 搜索结果 │ │
│ │◄─────────────────────┤ │
🧠 AI 集成
语义相似度引擎
架构：
- 模型支持：BGE-small-en-v1.5、E5-small-v2、Universal Sentence Encoder
- 执行环境：Web Workers 用于非阻塞处理
- 优化：向量运算的 SIMD 加速
- 缓存：嵌入和分词的 LRU 缓存
性能优化：
// SIMD 加速的余弦相似度
const similarity = await simdMath.cosineSimilarity(vecA, vecB);
// 批处理提高效率
const similarities = await simdMath.batchSimilarity(vectors, query, dimension);
// 内存高效的矩阵运算
const matrix = await simdMath.similarityMatrix(vectorsA, vectorsB, dimension);
向量数据库 (hnswlib-wasm)
特性：
- 算法：分层导航小世界 (HNSW)
- 实现：WebAssembly 实现接近原生性能
- 持久化：IndexedDB 存储，自动清理
- 可扩展性：高效处理 10,000+ 文档
配置：
const config: VectorDatabaseConfig = {
dimension: 384, // 模型嵌入维度
maxElements: 10000, // 最大文档数
efConstruction: 200, // 构建时精度
M: 16, // 连接参数
efSearch: 100, // 搜索时精度
enableAutoCleanup: true, // 自动清理旧数据
maxRetentionDays: 30, // 数据保留期
};
⚡ 性能优化
1. SIMD 加速
Rust 实现：
use wide::f32x4;
fn cosine_similarity_simd(&self, vec_a: &[f32], vec_b: &[f32]) -> f32 {
let len = vec_a.len();
let simd_lanes = 4;
let simd_len = len - (len % simd_lanes);
let mut dot_sum_simd = f32x4::ZERO;
let mut norm_a_sum_simd = f32x4::ZERO;
let mut norm_b_sum_simd = f32x4::ZERO;
for i in (0..simd_len).step_by(simd_lanes) {
let a_chunk = f32x4::new(vec_a[i..i+4].try_into().unwrap());
let b_chunk = f32x4::new(vec_b[i..i+4].try_into().unwrap());
dot_sum_simd = a_chunk.mul_add(b_chunk, dot_sum_simd);
norm_a_sum_simd = a_chunk.mul_add(a_chunk, norm_a_sum_simd);
norm_b_sum_simd = b_chunk.mul_add(b_chunk, norm_b_sum_simd);
}
// 计算最终相似度
let dot_product = dot_sum_simd.reduce_add();
let norm_a = norm_a_sum_simd.reduce_add().sqrt();
let norm_b = norm_b_sum_simd.reduce_add().sqrt();
dot_product / (norm_a * norm_b)
}
2. 内存管理
策略：
- 对象池：重用 Float32Array 缓冲区
- 延迟加载：按需加载 AI 模型
- 缓存管理：嵌入的 LRU 淘汰
- 垃圾回收：显式清理大对象
3. 并发处理
Web Workers：
- AI 处理：模型推理的独立 worker
- 内容索引：后台标签页内容索引
- 网络捕获：并行请求处理
🔧 扩展点
添加新工具
- 定义模式 在
packages/shared/src/tools.ts - 实现工具 继承
BaseBrowserToolExecutor - 注册工具 在工具索引中
- 添加测试 用于功能测试
自定义 AI 模型
- 模型集成 在
SemanticSimilarityEngine - Worker 支持 用于处理
- 配置 在模型预设中
- 性能测试 使用基准测试
协议扩展
- MCP 扩展 用于自定义功能
- 传输层 用于不同通信方法
- 身份验证 用于安全连接
- 监控 用于性能指标
此架构使 Chrome MCP Server 能够在保持安全性和可扩展性的同时，提供高性能的浏览器自动化和先进的 AI 功能。