MCP FetchPage

Obtención inteligente de páginas web con soporte automático de cookies y extracción mediante selectores CSS.

GitHub
2

Documentación

MCP Fetch Page

Obtención de páginas web basada en navegador con soporte automático de cookies y extracción mediante selectores CSS.

Características

  • 🤖 Automatización del navegador: Renderizado completo de JavaScript con Puppeteer
  • 🍪 Gestión automática de cookies: Carga todas las cookies guardadas automáticamente
  • 🎯 Soporte de selectores CSS: Extrae contenido específico con selectores
  • 🌐 Ajustes preestablecidos por dominio: Selectores integrados para sitios web comunes
  • 📱 Soporte SPA: Compatibilidad total con contenido dinámico y AJAX

Inicio rápido

1. Configurar el servidor MCP

Agrega a tu configuración de Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "mcp-fetch-page": {
      "command": "npx",
      "args": ["-y", "mcp-fetch-page@latest"]
    }
  }
}

Para personalizar el directorio de datos de ejecución (recomendado en VPS), establece MCP_FETCH_PAGE_DATA_DIR en MCP env:

{
  "mcpServers": {
    "mcp-fetch-page": {
      "command": "npx",
      "args": ["-y", "mcp-fetch-page@latest"],
      "env": {
        "MCP_FETCH_PAGE_DATA_DIR": "/data/mcp-fetch-page"
      }
    }
  }
}

Reinicia Claude Desktop.

2. Instalar la extensión de Chrome (opcional - para páginas autenticadas)

Descarga e instala la extensión de Chrome para guardar cookies de sesiones autenticadas:

📥 Descargar extensión desde Releases

Pasos de instalación:

  1. Descarga mcp-fetch-page-extension-vX.X.X.zip desde la última versión
  2. Descomprime el archivo
  3. Abre Chrome y ve a chrome://extensions/
  4. Activa el "Modo desarrollador" (arriba a la derecha)
  5. Haz clic en "Cargar descomprimida" y selecciona la carpeta descomprimida

Uso

Uso básico

  1. Inicia sesión en un sitio web en Chrome
  2. Haz clic en el ícono de la extensión "Fetch Page MCP Tools"
  3. Haz clic en el botón "Guardar cookies"
  4. Usa en Claude/Cursor: fetchpage(url="https://example.com")

Uso avanzado

// Basic fetching with automatic cookie loading
fetchpage(url="https://example.com")

// Extract specific content with CSS selector
fetchpage(url="https://example.com", waitFor="#main-content")

// WeChat articles (automatic selector)
fetchpage(url="https://mp.weixin.qq.com/s/xxxxx")

// Run in non-headless mode for debugging
fetchpage(url="https://example.com", headless=false)

Ajustes preestablecidos por dominio

El sistema usa automáticamente selectores optimizados para:

  • mp.weixin.qq.com → .rich_media_wrp (artículos de WeChat)
  • wx.zsxq.com → .content (Knowledge Planet)
  • cnblogs.com → .post (Blog Garden)
  • Agrega más en mcp-server/domain-rules.json (domain-selectors.json sigue siendo compatible)

Herramientas de depuración

# Standalone debug script (recommended for development)
cd mcp-server
node debug.js test-page "https://example.com"
node debug.js test-spa "https://example.com" "#content"

# MCP Inspector (for integration testing)
npx @modelcontextprotocol/inspector
# Then visit http://localhost:6274

Directorio de datos (opcional)

Por defecto, los datos de ejecución se almacenan en ~/Downloads/mcp-fetch-page/:

  • Cookies: ~/Downloads/mcp-fetch-page/cookies
  • Páginas: ~/Downloads/mcp-fetch-page/pages

Para uso con MCP, configura MCP_FETCH_PAGE_DATA_DIR en el campo env de la configuración de tu cliente MCP. El servidor siempre usará:

  • <MCP_FETCH_PAGE_DATA_DIR>/cookies
  • <MCP_FETCH_PAGE_DATA_DIR>/pages
  • <MCP_FETCH_PAGE_DATA_DIR>/domain-rules.json (anulaciones opcionales del usuario combinadas con reglas integradas)

node mcp-server/server.js es solo para desarrollo/depuración local.

Parámetros

  • url (obligatorio): La URL a obtener
  • waitFor (opcional): Selector CSS para extraer contenido específico
  • headless (opcional): Ejecutar el navegador en modo headless (predeterminado: true)
  • timeout (opcional): Tiempo de espera en milisegundos (predeterminado: 30000)

Estructura de archivos

mcp-fetch-page/
├── package.json              # npm package config
├── package-lock.json         # npm lockfile
├── node_modules/             # npm dependencies
├── README.md                 # This file
├── README-zh.md              # Chinese version
├── CLAUDE.md                 # Claude Code usage guide
├── chrome-extension/         # Chrome extension
│   ├── manifest.json
│   ├── popup.js
│   ├── popup.html
│   └── background.js
└── mcp-server/              # MCP server
    ├── server.js            # Main server
    ├── debug.js             # Debug tools
    ├── domain-rules.json     # Domain rules config (selector + blocked markers)
    └── domain-selectors.json # Legacy selector config (compatibility fallback)

Solución de problemas

  • La extensión no funciona: Asegúrate de estar en un sitio web normal (no en páginas chrome://)
  • No se encuentran cookies: Intenta iniciar sesión nuevamente y guardar las cookies
  • MCP no se conecta: Verifica la instalación de Node.js y reinicia tu editor
  • Error de ruta: Establece MCP_FETCH_PAGE_DATA_DIR en env de la configuración de MCP a una ruta absoluta escribible en tu máquina/VPS
  • El selector CSS no funciona: Verifica que el selector exista en la página

¡Eso es todo! 🍪