Browser Node MCP

一个基于 Model Context Protocol (MCP) 的网页截图工具，使用 Puppeteer 对指定 URL 的网页进行截图。

功能特性

• 🖼️ 网页截图：使用 Puppeteer 对任意网页进行高质量截图
• ⚙️ 灵活配置：支持自定义视口大小、等待条件、截图格式等
• 🚀 MCP 协议：遵循 Model Context Protocol 标准，可与 Claude Desktop 等客户端集成
• 🔧 自动检测：自动检测并使用系统已安装的 Chrome，无需额外配置

安装

从 npm 安装

npm install -g browser-node-mcp

或使用 pnpm：

pnpm add -g browser-node-mcp

本地开发安装

git clone <repository-url>
cd browser-node-server
pnpm install
pnpm run build

发布到 npm

1. 确保已登录 npm：

npm login

2. 更新版本号（如需要）：

npm version patch  # 或 minor, major

3. 发布：

npm publish

发布前会自动执行 prepublishOnly 脚本，清理并构建项目。

使用方法

在 Claude Desktop 中配置

1. 打开 Claude Desktop 的配置文件：

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json
   • Linux: ~/.config/Claude/claude_desktop_config.json

2. 在 mcpServers 中添加配置：

{
  "mcpServers": {
    "browser-node-mcp": {
      "command": "node",
      "args": [
        "/path/to/node_modules/browser-node-mcp/dist/mcp-server.js"
      ]
    }
  }
}

如果全局安装，可以使用全局命令：

{
  "mcpServers": {
    "browser-node-mcp": {
      "command": "browser-node-mcp"
    }
  }
}

或使用 npx：

{
  "mcpServers": {
    "browser-node-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "browser-node-mcp"
      ]
    }
  }
}

或直接指定文件路径：

{
  "mcpServers": {
    "browser-node-mcp": {
      "command": "node",
      "args": [
        "/usr/local/lib/node_modules/browser-node-mcp/dist/mcp-server.js"
      ]
    }
  }
}

3. 重启 Claude Desktop 使配置生效。

直接运行

安装后可以使用全局命令：

browser-node-mcp

或直接运行文件：

node dist/mcp-server.js

或使用构建脚本：

pnpm run start

工具说明

take_screenshot

对指定 URL 的网页进行截图。

参数

| 参数 | 类型 | 必需 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | ✅ | - | 要截图的网页 URL | | width | number | ❌ | 1920 | 视口宽度（像素） | | height | number | ❌ | 1080 | 视口高度（像素） | | deviceScaleFactor | number | ❌ | 1 | 设备像素比 | | userAgent | string | ❌ | - | 自定义用户代理字符串 | | waitUntil | string | ❌ | networkidle2 | 页面加载完成条件：load, domcontentloaded, networkidle0, networkidle2 | | timeout | number | ❌ | 30000 | 页面加载超时时间（毫秒） | | wait | number | ❌ | - | 页面加载后额外等待时间（毫秒） | | waitForSelector | string | ❌ | - | 等待特定 CSS 选择器元素出现 | | type | string | ❌ | png | 截图格式：png 或 jpeg | | quality | number | ❌ | 90 | JPEG 图片质量（0-100），仅在 type 为 jpeg 时有效 | | fullPage | boolean | ❌ | false | 是否截取整个页面（包括滚动区域） |

返回值

返回包含以下字段的 JSON 对象：

{
  "success": true,
  "message": "截图成功",
  "contentType": "image/png",
  "size": 123456,
  "imageBase64": "iVBORw0KGgoAAAANSUhEUgAA..."
}

• success: 操作是否成功
• message: 操作结果消息
• contentType: 图片 MIME 类型
• size: 图片大小（字节）
• imageBase64: Base64 编码的图片数据

使用示例

基础截图

{
  "url": "https://www.example.com"
}

自定义尺寸截图

{
  "url": "https://www.example.com",
  "width": 1280,
  "height": 720
}

截取整页

{
  "url": "https://www.example.com",
  "fullPage": true
}

JPEG 格式截图

{
  "url": "https://www.example.com",
  "type": "jpeg",
  "quality": 85
}

等待特定元素

{
  "url": "https://www.example.com",
  "waitForSelector": ".main-content",
  "timeout": 60000
}

等待额外时间

{
  "url": "https://www.example.com",
  "wait": 2000,
  "waitUntil": "load"
}

系统要求

• Node.js >= 18
• Chrome/Chromium 浏览器（系统已安装或 Puppeteer 自带）

Chrome 检测

工具会自动检测系统已安装的 Chrome：

• macOS: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
• Linux: /usr/bin/google-chrome, /usr/bin/chromium
• Windows: C:\Program Files\Google\Chrome\Application\chrome.exe

如果未检测到系统 Chrome，将使用 Puppeteer 自带的 Chrome（需要下载）。

开发

构建项目

pnpm run build

清理构建文件

pnpm run clean

开发模式

pnpm run dev

许可证

ISC

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

1.0.0

• 初始版本
• 支持网页截图功能
• 实现 MCP 协议集成
• 支持多种截图配置选项