Skip to main content
Glama

MCP Fetch Page

Browser-based web page fetching with automatic cookie support and CSS selector extraction.

Features

  • πŸ€– Browser Automation: Full JavaScript rendering with Puppeteer

  • πŸͺ Automatic Cookie Management: Loads all saved cookies automatically

  • 🎯 CSS Selector Support: Extract specific content with selectors

  • 🌐 Domain Presets: Built-in selectors for common websites

  • πŸ“± SPA Support: Fully supports dynamic content and AJAX

Quick Start

1. Configure MCP Server

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

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

Restart Claude Desktop.

2. Install Chrome Extension (Optional - for authenticated pages)

Download and install the Chrome extension to save cookies from authenticated sessions:

πŸ“₯ Download Extension from Releases

Installation steps:

  1. Download mcp-fetch-page-extension-vX.X.X.zip from the latest release

  2. Unzip the file

  3. Open Chrome and go to chrome://extensions/

  4. Enable "Developer mode" (top right)

  5. Click "Load unpacked" and select the unzipped folder

Usage

Basic Usage

  1. Login to a website in Chrome

  2. Click the "Fetch Page MCP Tools" extension icon

  3. Click "Save Cookies" button

  4. Use in Claude/Cursor: fetchpage(url="https://example.com")

Advanced Usage

// 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)

Domain Presets

The system automatically uses optimized selectors for:

  • mp.weixin.qq.com β†’ .rich_media_wrp (WeChat articles)

  • wx.zsxq.com β†’ .content (Knowledge Planet)

  • cnblogs.com β†’ .post (Blog Garden)

  • Add more in mcp-server/domain-selectors.json

Debug Tools

# 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

Parameters

  • url (required): The URL to fetch

  • waitFor (optional): CSS selector to extract specific content

  • headless (optional): Run browser in headless mode (default: true)

  • timeout (optional): Timeout in milliseconds (default: 30000)

File Structure

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-selectors.json # Domain selector config

Troubleshooting

  • Extension not working: Make sure you're on a normal website (not chrome:// pages)

  • No cookies found: Try logging in again and saving cookies

  • MCP not connecting: Check Node.js installation and restart your editor

  • Path error: Make sure to use full path /Users/YOUR_USERNAME/... instead of ~/...

  • CSS selector not working: Verify the selector exists on the page

That's it! πŸͺ

-
security - not tested
F
license - not found
-
quality - not tested

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/kaiye/mcp-fetch-page'

If you have feedback or need assistance with the MCP directory API, please join our Discord server