记录几个 MCP，持续更新中

streaker303
342 阅读2分钟

记录一些前端开发中，实际用到的 mcp 工具

Browser MCP

🔗 插件地址：
chromewebstore.google.com/detail/brow…

核心功能：

  • 通过 MCP 协议直接控制浏览器
  • 快速打开指定网站
  • 供大模型自动化调用，实现“说话即操作页面”

适用场景：

  • 快速定位 Ant Design、Element Plus、Vue / React 官方文档
  • 自动化测试前的页面快速准备
  • 作为 AI 开发助手的“浏览器执行器”

优势：相比于 chrome-devtools-mcp，优势是它是在已有的浏览器窗口中进行，不会创建新的浏览器实例，也就是说能够保持登录状态。那种创建新实例的在访问文档时，经常被重定向到登录页。

不足：比如在访问产品文档时，是通过模拟用户点击或者下划，通过截图去获取内容的，这就导致如果有折叠的文字会被漏掉，而且整个读取内容比较慢，不稳定。chrome-devtools-mcp 应该是通过解析 html 文档来获取内容，更快更准确。

chrome-devtools-mcp

🔗 插件地址：
github.com/ChromeDevTo…

最新插件，开发模式下，拖到 chrome 插件拓展中。

npm install -g mcp-chrome-bridge

Context7

🔗 官方文档：
context7.com/

核心功能：

  • 为大模型提供实时更新的代码文档与示例
  • 解决 LLM 训练数据滞后的问题
  • 避免“API 已废弃但模型仍在使用”的风险

适用场景：

  • 查询最新 Vue / React / Node / 三方库用法
  • 自动生成基于“当前版本”的代码示例
  • 作为 AI 编程助手的“实时知识源”

接入步骤：

  1. 创建 Key：登录 Context7 官网，生成 API Key。

  2. 配置 MCP

其他

了解下面配置前，推荐看一下 MCP 连接方式，至少知道 Stdio(标准输入输出，本地进程之间通信) 和 Http（远程服务） 2种形式。比如下面的 context7 属于 http 连接，剩余的属于 stdio 方式。

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    },
    "context7": {
      "url": "https://mcp.context7.com/mcp",
      "headers": {
        "CONTEXT7_API_KEY": "xxxxxxx"
      }
    },
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/Users/用户名/.nvm/versions/node/v22.17.0/lib/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

MCP 本质上就是返回一组 tools 的服务。

FAQ

MCP 有的需要浏览器插件、有的不需要为什么？

  1. 因为大部分MCP是直接在 Node.js 进程中控制浏览器；
  2. 还有一些 Chrome Extension + 桥接方案（chrome-mcp-stdio）,优势就是可以复用正在使用的浏览器、登录状态等。
┌──────────┐   stdio   ┌──────────────────────┐   HTTP MCP   ┌────────────────────────────┐   Native Messaging   ┌────────────────┐   Chrome API   ┌─────────────┐
│          │ ────────► │                      │ ───────────► │                            │ ───────────────────► │                │ ─────────────► │             │
│  Agent   │           │ mcp-server-stdio.js │              │ Native Host + HTTP Server  │                      │ Chrome Ext     │                │ Chrome Tab  │
│  / IDE   │ ◄──────── │  (stdio adapter)     │ ◄─────────── │     (127.0.0.1:12306)      │ ◄─────────────────── │  (插件后台)     │ ◄───────────── │  / 页面      │
└──────────┘           └──────────────────────┘              └────────────────────────────┘                      └────────────────┘                └─────────────┘


sequenceDiagram
    participant U as User
    participant A as Agent IDE
    participant S as mcp-server-stdio.js
    participant H as 127.0.0.1:12306 MCP Server
    participant N as Native Host
    participant E as Chrome Extension
    participant B as Browser Tab/Page

    U->>A: 使用 MCP 打开链接 / 获取页面内容
    A->>S: tools/call（stdio）
    S->>H: POST /mcp（HTTP）
    H->>N: 调用工具
    N->>E: Native Messaging 请求
    E->>B: 调用 Chrome API / 注入脚本
    B-->>E: 返回执行结果
    E-->>N: Native Messaging 响应
    N-->>H: 工具结果
    H-->>S: MCP 响应（HTTP）
    S-->>A: tools/call 响应（stdio）

按“谁启动谁”补全一下，会更容易理解：

  1. Agent IDE 启动 mcp-server-stdio.js
  2. Chrome Ext 通过 connectNative(...) 连接并拉起 Native Host
  3. Native Host 收到插件的 START 指令后，启动 127.0.0.1:12306
  4. mcp-server-stdio.js 再把 MCP 请求转发到 12306
  5. 12306 收到工具调用后，再通过 Native Messaging 把命令发回插件
  6. 插件调用 chrome.tabs、chrome.debugger 或页面脚本去操作真实标签页
avatar
文章
阅读
粉丝