MCP Browser Server

基于 Playwright 的无头浏览器 MCP 服务器，用于抓取和渲染现代 Web 文档。

为什么需要 MCP 浏览器服务器？

许多现代技术文档（基于 Vue、React 或其他 SPA 框架构建）在客户端动态渲染内容。标准的网页抓取工具或简单的 HTTP 客户端通常只能看到空白页面或加载动画。

MCP 浏览器服务器 通过使用完整的无头浏览器在捕获内容之前完全渲染页面来解决此问题，让 AI 能够像人类开发者一样"看到"文档。

功能特性

✅ 完整无头渲染：使用 Playwright 和 Chromium 处理 JavaScript 密集型网站
✅ 自动存档：抓取的页面将作为 `.html` 文件保存在结构化的日志目录中
✅ 实例隔离：支持 `TOOL_PREFIX`，允许运行多个实例而不会发生冲突
✅ 智能工具：`browser_get_content`、`get_saved_files`、`read_saved_file`
✅ 持久化：维护文档的本地缓存，用于离线分析或重复查询
✅ 轻量级：通过 `playwright-core` 使用您现有的 Chrome/Edge 安装

安装

全局安装 (推荐)

npm install -g @liangshanli/mcp-server-browser

本地安装

npm install @liangshanli/mcp-server-browser

从源码安装

git clone https://github.com/liliangshan/mcp-server-browser.git
cd mcp-server-browser
npm install

配置指南

变量	是否必须	默认值	描述
`CHROME_PATH`	必须	`C:\Program Files\Google\Chrome\Application\chrome.exe`	Chrome 或 Edge 可执行文件的路径
`TOOL_PREFIX`	可选	-	工具名称的可选前缀（例如 `doc_`）
`PROJECT_NAME`	可选	-	用于定制工具描述的项目名称
`DOC_URL`	可选	-	此实例的默认文档网址
`MCP_LOG_DIR`	可选	`./.setting`	存储日志和 HTML 文件的目录

使用方法

1. 直接运行 (全局安装)

mcp-server-browser

2. 使用 npx (推荐)

npx @liangshanli/mcp-server-browser

3. 直接启动 (源码安装)

npm start

编辑器集成

Cursor 编辑器配置

在项目根目录创建 `.cursor/mcp.json` 文件：

{
  "mcpServers": {
    "browser-docs": {
      "command": "npx",
      "args": ["-y", "@liangshanli/mcp-server-browser"],
      "env": {
        "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        "TOOL_PREFIX": "browser",
        "PROJECT_NAME": "DocsAnalyzer"
      }
    }
  }
}

VS Code 编辑器配置

创建或编辑 `.vscode/mcp.json` 文件：

{
  "servers": {
    "browser-docs": {
      "command": "npx",
      "args": ["-y", "@liangshanli/mcp-server-browser"],
      "env": {
        "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
        "TOOL_PREFIX": "browser",
        "PROJECT_NAME": "DocsAnalyzer"
      }
    }
  }
}

可用工具

1. browser_get_content

在无头浏览器中打开 URL，等待内容加载并保存。

参数:

url (string, 必须): 要访问的 URL
wait_until (string): 等待加载的状态 (`load`, `domcontentloaded`, `networkidle`)。默认值: `networkidle`

2. get_saved_files

返回日志目录中当前保存的所有 HTML 文件列表。

参数: 无

3. read_saved_file

读取特定保存的 HTML 文件内容。

参数:

filename (string, 必须): 文件名（例如 `https___tdesign.tencent.com_vue.html`）

4. save_doc_catalog (v1.0.7+)

用于结构化文档分析，保存文档目录。

5. get_doc_catalog (v1.0.7+)

获取文档目录信息。

日志

所有操作和捕获的 HTML 文件都存储在：

./.setting/ (如果设置了前缀，则为 ./.setting.<TOOL_PREFIX>/)

捕获的文件遵循基于 URL 的规范化命名约定，易于识别和管理。

zhineng.dev 工具介绍