mcpField
S
spa-reader-mcp

spa-reader-mcp

本地服务
github.com/XXO47OXX浏览器自动化132 周前更新
代码仓库

关于 spa-reader-mcp

spa-reader-mcp 可渲染由 JavaScript 驱动的单页应用，并将页面内容提取为 Markdown。它面向需要读取常规抓取可能无法获取的网页内容或截图的 MCP 客户端。

主要功能

  1. 01渲染 JavaScript 页面
  2. 02提取 Markdown 内容
  3. 03捕获 PNG 截图
  4. 04等待 CSS 选择器
  5. 05提供 Cookie 和 HTTP 标头
  6. 06阻止访问私有及环回 IP

适用场景

  1. 01读取 JavaScript 渲染页面的内容
  2. 02页面加载后捕获截图
  3. 03使用提供的 Cookie 或标头访问页面

MCP 相关

该 MCP 服务通过 Playwright 和无头 Chromium 向 MCP 客户端提供网页读取与截图工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "xxo47oxx-spa-reader": {
      "command": "npx",
      "args": [
        "-y",
        "spa-reader-mcp"
      ]
    }
  }
}
启动命令npx -y spa-reader-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npmspa-reader-mcp1.0.2

工具

2

收录的工具列表 · 更新于 2 周前

参数类型必填说明
urlstring是要读取的 SPA 页面的 URL
cookiesarray否页面加载前注入的 Cookie（例如会话令牌）
headersobject否自定义 HTTP 标头（例如 Authorization）
waitTimeoutnumber否导航超时时间，单位为毫秒（默认值：30000）
includeMetadataboolean否将标题/作者/摘要作为 YAML frontmatter 包含在内（默认值：true）
waitForSelectorstring否提取前等待的 CSS 选择器

详细介绍

spa-reader-mcp

CI npm version

用于渲染 JavaScript SPA 页面并通过无头 Chromium 提取 Markdown 的 MCP 服务。

传统爬虫无法处理 SPA，因为内容是在客户端渲染的。此工具会启动 Playwright，等待 JavaScript 执行完毕，然后使用 Readability + Turndown 提取简洁的 Markdown。

安装

npx playwright install chromium
Claude Desktop
{
  "mcpServers": {
    "spa-reader": {
      "command": "npx",
      "args": ["-y", "spa-reader-mcp"]
    }
  }
}
Claude Code
claude mcp add spa-reader -- npx -y spa-reader-mcp

工具

spa_read

渲染页面并将内容提取为 Markdown。

参数类型默认值描述
url字符串—要读取的 URL（必填）
waitForSelector字符串—等待的 CSS 选择器
waitTimeout数字30000超时时间，单位为毫秒
includeMetadata布尔值true添加 YAML 前置元数据
cookies数组—用于身份验证的 Cookie
headers对象—自定义 HTTP 标头
spa_screenshot

在 JavaScript 渲染完成后截取 PNG 屏幕截图。

参数类型默认值描述
url字符串—要截图的 URL（必填）
waitForSelector字符串—等待的 CSS 选择器
waitTimeout数字30000超时时间，单位为毫秒
width数字1280视口宽度
height数字720视口高度
fullPage布尔值false截取整个页面
cookies数组—用于身份验证的 Cookie
headers对象—自定义 HTTP 标头

安全

  • SSRF 防护：阻止私有/环回 IP
  • 仅允许 http: 和 https: 协议
  • 防止选择器注入
  • 内容上限为 100KB

开发

pnpm install && pnpm build
pnpm test

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。