企业官网建设流程全解析

• MCP 服务
• AI Agent
• 浏览器控制
• GUI 自动化
• 工具调用
• 人工智能
• AI 应用

本文以仓库根目录 README.md 为主线，系统讲解 Chrome MCP Server 的定位、核心特性、安装配置、工具能力与底层架构。Chrome MCP Server 是一个基于 Chrome 扩展的 Model Context Protocol（MCP）服务器，它把用户日常使用的 Chrome 浏览器能力暴露给 Claude 等 AI 助手，实现复杂的浏览器自动化、内容分析与语义搜索。读完本文，你将掌握从下载扩展、安装本地桥接服务到接入任意 MCP 客户端的完整链路，并理解其工具注册与原生消息通信的实现原理。

一、项目定位：让 AI 接管你的日常浏览器

Chrome MCP Server 的核心思想与 Playwright 等传统浏览器自动化方案截然不同：它直接使用用户日常在用的 Chrome 浏览器，而不是启动一个独立的、干净的浏览器实例。

这意味着：

• 复用登录态与配置：你已登录的网站会话、安装的扩展、浏览器设置被完整保留，AI 操作时无需重新登录；
• 零资源冗余：不需要额外下载浏览器二进制、安装 Playwright 依赖，只需激活扩展即可开始工作；
• 完全本地运行：MCP Server 纯本地运行，保证用户隐私；
• 模型无关：任意 LLM、Chatbot 客户端或 Agent，只要支持 MCP 协议即可接入。

项目当前仍处于早期快速迭代阶段（仓库 README 中明确说明 "still in its early stages and is under intensive development"），但已提供 20+ 个工具，覆盖浏览器管理、截图、网络监控、内容分析、交互操作与数据管理六大类能力。

二、核心特性一览

根据 README.md 的核心特性清单，项目的能力支柱如下：

其中"SIMD 加速"并非营销话术，而是有明确的源码支撑：仓库 packages/wasm-simd/src/lib.rs 使用 Rust 编写 SIMD 数学函数并编译为 WebAssembly，docs/ARCHITECTURE.md 中给出了基于wide::f32x4的 SIMD 余弦相似度实现示例（4 通道并行计算点积与范数）。围绕它还有配套的 Web Worker（app/chrome-extension/workers/similarity.worker.js）与语义相似度引擎（app/chrome-extension/utils/semantic-similarity-engine.ts）。

三、与 Playwright 类 MCP 服务器的对比

README 给出了一个直观的对比表，帮助理解两种技术路线的差异：

需要说明的是，对比表中的"响应速度更快"是项目 README 的自我表述，实际表现取决于具体场景；但从架构上可以确认：Chrome 扩展方案通过 Native Messaging 直连本地 Node 服务，避免了"启动浏览器 + 驱动协议"的开销。

四、快速开始：完整安装三步走

4.1 前置条件

• Node.js >= 20.0.0（npm 或 pnpm 均可）；这一要求与 app/native-server/package.json 中"engines": { "node": ">=20.0.0" }的声明一致；
• Chrome/Chromium 浏览器。

4.2 第一步：下载 Chrome 扩展

从项目的 Release 页面下载最新版 Chrome 扩展压缩包，解压后得到一个扩展文件夹（例如chrome-mcp-server-lastest.zip解压出的目录）。

4.3 第二步：全局安装 mcp-chrome-bridge

mcp-chrome-bridge是发布到 npm 的本地桥接包，负责 Native Messaging 主机注册与 MCP 服务启动。安装方式分 npm 与 pnpm 两种：

npm 方式

npm install -g mcp-chrome-bridge

pnpm 方式

# 方法1：全局启用脚本（推荐） pnpm config set enable-pre-post-scripts true pnpm install -g mcp-chrome-bridge # 方法2：如果 postinstall 没有运行，手动注册 pnpm install -g mcp-chrome-bridge mcp-chrome-bridge register

为什么 pnpm 需要额外设置？pnpm v7+ 出于安全默认禁用 postinstall 脚本。enable-pre-post-scripts设置控制是否运行 pre/post 安装脚本。若自动注册失败，用mcp-chrome-bridge register手动注册即可。

从源码看，注册流程的核心逻辑位于 app/native-server/src/scripts/register.ts：它先写入 Node.js 路径文件（writeNodePathFile），再调用registerWithElevatedPermissions()完成 Native Messaging 主机的注册，成功后可让 Chrome 扩展通过 Native Messaging 与本地服务通信。package.json中的postinstall脚本（node dist/scripts/postinstall.js）与bin字段（mcp-chrome-bridge、chrome-mcp-bridge、mcp-chrome-stdio三个可执行入口）共同构成了自动化安装链路。

4.4 第三步：加载 Chrome 扩展

1. 打开 Chrome，访问chrome://extensions/；
2. 启用右上角的"开发者模式"；
3. 点击"加载已解压的扩展程序"，选择第一步解压得到的扩展文件夹；
4. 点击扩展图标打开插件，点击"连接"即可看到 MCP 配置信息。

五、在 MCP 协议客户端中使用

5.1 方式一：Streamable HTTP 连接（推荐）

将以下配置添加到任意支持 MCP 的客户端（README 以 CherryStudio 为例）：

{ "mcpServers": { "chrome-mcp-server": { "type": "streamableHttp", "url": "http://127.0.0.1:12306/mcp" } } }

该地址对应 Native Server 上暴露的 MCP 端点。从源码看，这一 HTTP 服务基于 Fastify 构建（依赖fastify ^5.3.2），MCP Server 实例定义于 app/native-server/src/mcp/mcp-server.ts（服务名ChromeMcpServer，能力声明tools）。

5.2 方式二：STDIO 连接（备选）

如果客户端仅支持 stdio 连接方式，则需要进行以下配置：

第一步，查询已安装 npm 包的安装位置：

# npm 查看方式 npm list -g mcp-chrome-bridge # pnpm 查看方式 pnpm list -g mcp-chrome-bridge

假设命令输出路径为/Users/xxx/Library/pnpm/global/5，则 stdio 入口的最终路径为：

/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js

第二步，将下述配置中的路径替换为你得到的最终路径：

{ "mcpServers": { "chrome-mcp-stdio": { "command": "npx", "args": [ "node", "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js" ] } } }

从源码实现看，stdio 模式是一个"代理"设计：app/native-server/src/mcp/mcp-server-stdio.ts 通过StdioServerTransport对外提供 MCP 服务，内部读取同目录下 app/native-server/src/mcp/stdio-config.json（默认内容{"url": "http://127.0.0.1:12306/mcp"}），并用StreamableHTTPClientTransport建立到 HTTP 端点的内部客户端连接，将 stdio 侧的callTool请求代理转发给 HTTP 侧的 MCP 服务器。该文件还给出了两个实现细节：

• 工具调用默认超时2 * 60 * 1000（2 分钟），源码注释说明此前曾误用2*6*1000（12 秒）；
• 除ListTools、CallTool外，还实现了 MCP 协议要求的ListResources与ListPrompts处理器。

六、可用工具全景

完整的工具 API 文档见 docs/TOOLS.md。以下是 README 中按类别归纳的工具清单：

📊 浏览器管理（6 个工具）

• get_windows_and_tabs- 列出所有浏览器窗口和标签页
• chrome_navigate- 导航到 URL 并控制视口
• chrome_switch_tab- 切换当前显示的标签页
• chrome_close_tabs- 关闭特定标签页或窗口
• chrome_go_back_or_forward- 浏览器导航控制
• chrome_inject_script- 向网页注入内容脚本
• chrome_send_command_to_inject_script- 向已注入的内容脚本发送指令

📸 截图和视觉（1 个工具）

• chrome_screenshot- 高级截图捕获，支持元素定位、全页面和自定义尺寸

🌐 网络监控（4 个工具）

• chrome_network_capture_start/stop- webRequest API 网络捕获
• chrome_network_debugger_start/stop- Debugger API 包含响应体
• chrome_network_request- 发送自定义 HTTP 请求

🔍 内容分析（4 个工具）

• search_tabs_content- AI 驱动的浏览器标签页语义搜索
• chrome_get_web_content- 从页面提取 HTML/文本内容
• chrome_get_interactive_elements- 查找可点击元素
• chrome_console- 捕获和获取浏览器标签页的控制台输出

🎯 交互操作（3 个工具）

• chrome_click_element- 使用 CSS 选择器点击元素
• chrome_fill_or_select- 填充表单和选择选项
• chrome_keyboard- 模拟键盘输入和快捷键

📚 数据管理（5 个工具）

• chrome_history- 搜索浏览器历史记录，支持时间过滤
• chrome_bookmark_search- 按关键词查找书签
• chrome_bookmark_add- 添加新书签，支持文件夹
• chrome_bookmark_delete- 删除书签

工具的底层注册机制

从源码看，工具注册采用"静态 Schema + 动态 Flow"双通道机制。核心实现在 app/native-server/src/mcp/register-tools.ts：

• 静态工具：TOOL_SCHEMAS（定义于共享包 packages/shared/src/tools.ts）在ListToolsRequestSchema处理器中被直接返回；
• 动态 Flow 工具：服务启动时会向扩展发送rr_list_published_flows请求，把已发布的录制流程动态注册为flow.<slug>形式的工具（支持tabTarget、refresh、captureNetwork、returnLogs、timeoutMs等运行选项）。调用flow.*工具时，会先按 slug 解析出 flowId，再通过record_replay_flow_run请求执行流程；
• 调用转发：普通工具调用通过 Native Messaging 将{ name, args }封装为CALL_TOOL消息发送给 Chrome 扩展，等待响应（超时 120 秒，避免性能分析等长任务超时），成功则返回response.data，失败返回isError: true的 MCP 错误结构。

所有工具统一遵循 MCP 标准响应格式：

{ "content": [ { "type": "text", "text": "JSON string containing the actual response data" } ], "isError": false }

七、典型使用场景与示例

README 中提供了大量真实使用案例，展示了"自然语言 → AI 自主调用工具"的完整闭环：

其中两个场景配套了可直接复用的 Prompt 模板，存放在仓库 prompt 目录下：

• prompt/excalidraw-prompt.md：让 AI 总结内容后用 Excalidraw 自动绘图；
• prompt/content-analize.md：先分析图片内容再复刻；
• prompt/modify-web.md：指导 AI 注入脚本修改页面样式（如去广告）。

这些 Prompt 与场景演示，实际调用的正是第六节所列的chrome_navigate、chrome_screenshot、chrome_network_capture_*、chrome_click_element、chrome_bookmark_*等工具链。

八、底层架构与数据流

若想深入了解实现，仓库提供了专门的架构文档 docs/ARCHITECTURE.md。其整体架构分为六个层次：

1. AI Assistant Layer：Claude Desktop、自定义 MCP 客户端、其他 AI 工具；
2. MCP Protocol Layer：HTTP/SSE 传输、MCP Server 实例、工具注册表；
3. Native Server Layer：Fastify HTTP 服务器、Native Messaging Host、会话管理；
4. Chrome Extension Layer：后台脚本（主编排器与工具执行器）、内容脚本、Popup 界面、Offscreen 文档；
5. Browser APIs Layer：Chrome APIs、Web APIs、Native Messaging；
6. AI Processing Layer：语义引擎、向量数据库、SIMD 数学引擎、Web Workers。

一次完整工具调用的数据流为：

AI Assistant → (1. Tool Call) → Native Server → (2. Native Message) → Chrome Extension → (3. Execute Tool) → Browser APIs → (4. API Response) → Chrome Extension → (5. Tool Result) → Native Server → (6. MCP Response) → AI Assistant

AI 处理链路（语义搜索）则为：内容提取 → 文本分块 → 语义引擎（Embedding）→ 向量数据库（检索）→ 相似文档返回。

AI 与性能优化要点

• 语义相似度引擎：支持 BGE-small-en-v1.5、E5-small-v2、Universal Sentence Encoder 等模型，在 Web Worker 中非阻塞执行，配合 LRU 缓存与 SIMD 加速；
• 向量数据库：基于 hnswlib-wasm（Hierarchical Navigable Small World 算法，WebAssembly 实现），持久化于 IndexedDB 并支持自动清理。示例配置参数为dimension: 384、maxElements: 10000、efConstruction: 200、M: 16、efSearch: 100、maxRetentionDays: 30；
• 内存管理：Float32Array 缓冲池复用、AI 模型按需懒加载、Embedding LRU 淘汰、大对象显式回收。

对应实现文件包括 app/chrome-extension/utils/semantic-similarity-engine.ts、app/chrome-extension/utils/vector-database.ts、app/chrome-extension/utils/simd-math-engine.ts 以及 packages/wasm-simd 下的 Rust 源码。

九、扩展开发指南

README 指引开发者参考 docs/CONTRIBUTING.md 参与贡献。从 docs/ARCHITECTURE.md 的扩展点章节可以确认三种扩展方式：

1. 新增工具：在packages/shared/src/tools.ts定义 Schema → 实现继承BaseBrowserToolExecutor的执行器 → 在工具 index 中注册 → 补充测试；
2. 自定义 AI 模型：集成到SemanticSimilarityEngine→ 增加 Worker 支持 → 配置模型预设 → 基准测试验证性能；
3. 协议扩展：自定义 MCP 能力、新的传输层、连接认证与性能监控。

十、更多文档与后续路线

• docs/ARCHITECTURE.md：详细技术架构说明
• docs/TOOLS.md：完整工具 API 文档
• docs/TROUBLESHOOTING.md：常见问题解决方案
• docs/VisualEditor.md：面向 Claude Code / Codex 的可视化编辑器说明（README 2025/12/30 新增特性）

项目路线图（Future Roadmap）上规划了身份认证、录制与回放、工作流自动化、Firefox 扩展支持等方向，其中"录制与回放（Recording and Playback）"与"工作流自动化"在当前仓库中已能看到大量相关实现（如record-replay、record-replay-v3目录与动态 Flow 工具机制），可以推断这些能力正在快速落地。

说明：本文所有架构、参数、命令与配置均以当前仓库 README.md 及其引用的源码、docs/ARCHITECTURE.md、docs/TOOLS.md 为准；项目处于早期迭代阶段，接口与配置可能随版本演进调整。

• MCP 服务
• AI Agent
• 浏览器控制
• GUI 自动化
• 工具调用
• 人工智能
• AI 应用