HTML Scraper MCP

Puppeteer istifadə edərək saytları analiz edən və məlumat çıxaran MCP server.

Xüsusiyyətlər

• Browser idarəetməsi: Yeni browser aça və ya mövcud browser-a qoşula bilər (debug port ilə)
• Network monitoring: Bütün HTTP request/response-ları izləyir
• Data extraction: CSS selector və ya JavaScript ilə məlumat çıxarır
• Error tracking: Console error-ları və uğursuz request-ləri toplayır
• API analizi: XHR/Fetch request-lərini ayrıca analiz edir

Quraşdırma

NPM-dən quraşdırma (Tövsiyə edilir)

npm install -g html-scraper-mcp

Və ya local olaraq klonlama

git clone https://github.com/Umid-ismayilov/html-scraper-mcp.git
cd html-scraper-mcp
npm install

İstifadə

Claude Code-da konfiqurasiya

Claude Code MCP server-ləri üçün 3 üsul dəstəkləyir: stdio (local), HTTP (remote), və SSE (deprecated).

Metod 1: Claude CLI ilə quraşdırma (Tövsiyə edilir)

NPM paketi ilə:

# Global quraşdırma
npm install -g html-scraper-mcp

# MCP server əlavə et
claude mcp add --transport stdio html-scraper npx html-scraper-mcp

Local path ilə:

# Repo klonla
git clone https://github.com/Umid-ismayilov/html-scraper-mcp.git
cd html-scraper-mcp
npm install

# MCP server əlavə et
claude mcp add --transport stdio html-scraper node /full/path/to/html-scraper-mcp/index.js

Environment variables ilə:

# Debug port göndərmək istəyirsinizsə
claude mcp add --transport stdio html-scraper --env DEFAULT_DEBUG_PORT=9222 -- npx html-scraper-mcp

Metod 2: .mcp.json faylı ilə (Project-specific)

Proyektinizin root directory-sində .mcp.json faylı yaradın:

{
  "mcpServers": {
    "html-scraper": {
      "command": "npx",
      "args": ["html-scraper-mcp"],
      "env": {
        "DEFAULT_DEBUG_PORT": "9222"
      }
    }
  }
}

Bu konfiqurasiya yalnız həmin proyektdə işləyəcək.

Metod 3: Manual konfiqurasiya (Legacy)

Claude Code settings faylınıza (~/.config/claude-code/config.json və ya %USERPROFILE%\.config\claude-code\config.json Windows-da) əlavə edin:

{
  "mcpServers": {
    "html-scraper": {
      "command": "npx",
      "args": ["html-scraper-mcp"]
    }
  }
}

MCP server-ləri idarə etmək

# Bütün server-ləri göstər
claude mcp list

# Server detallarını gör
claude mcp get html-scraper

# Server-i sil
claude mcp remove html-scraper

MCP Tool-larını istifadə etmək

MCP server quraşdırdıqdan sonra Claude Code avtomatik olaraq tool-ları tanıyacaq. Claude Code-da /mcp yazaraq server-ləri idarə edə bilərsiniz.

Nümunə 1: Sadə scraping

https://example.com səhifəsini aç və başlığı gətir

Nümunə 2: API request-lərini izləmək

https://api.example.com səhifəsini aç və bütün API çağırışlarını göstər

Nümunə 3: Məlumat çıxarmaq

https://example.com/products səhifəsini aç və .product-title class-ına sahib bütün elementlərin mətnini çıxar

Nümunə 4: Debug port ilə mövcud browser-a qoşulma

Port 9222-də https://example.com səhifəsini aç və məlumat çıxar

Debug Port konfiqurasiyası

Əgər artıq açıq olan browser-a qoşulmaq istəyirsinizsə (məsələn, login olmuş session-da işləmək üçün):

Chrome-u debug mode-da açın

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\temp\chrome-debug

Sonra Claude Code-da sadəcə port nömrəsini qeyd edin və tool avtomatik qoşulacaq.

Mövcud Tool-lar

1. inspect_url

URL-i açır və səhifəni analiz edir.

Parametrlər:

• url (required): Analiz ediləcək URL
• debugPort (optional): Mövcud browser-a qoşulmaq üçün debug port (məs: 9222)

Nümunə:

URL-i aç: https://example.com

Browser debug portuna qoşulmaq üçün:

URL-i aç: https://example.com (port 9222-də)

2. get_network_data

Network request və response məlumatlarını filter edib qaytarır.

Parametrlər:

• resourceType (optional): 'xhr', 'fetch', 'document', 'script', 'stylesheet', 'image'
• method (optional): 'GET', 'POST', 'PUT', 'DELETE'
• limit (optional): Maksimum nəticə sayı (default: 100)
• includeBody (optional): Response body-ləri daxil et (default: false)

Nümunə:

Bütün API request-lərini göstər
Yalnız POST request-lərini göstər

3. get_api_requests

Yalnız XHR və Fetch (API) request-lərini qaytarır.

Parametrlər:

• limit (optional): Maksimum nəticə sayı (default: 50)
• includeBody (optional): Response body-ləri daxil et (default: true)

Nümunə:

API çağırışlarını göstər

4. extract_data

Səhifədən məlumat çıxarır.

Parametrlər:

• selector (required): CSS selector (məs: ".price", "#title")
• extractType (required): 'text', 'html', 'attribute', 'multiple'
• attribute (optional): Atribut adı (extractType='attribute' olduqda)
• multiple (optional): Bütün uyğun elementləri götür (default: false)

Nümunələr:

Başlığı götür: h1.title
Bütün qiymətləri götür: .product .price
Link href-lərini götür: a.download atribut href

5. execute_script

Səhifədə JavaScript kodu icra edir.

Parametrlər:

• script (required): İcra ediləcək JavaScript kodu

Nümunə:

Bu kodu icra et:
document.querySelectorAll('.product').length

6. get_console_errors

Console error-ları və uğursuz request-ləri qaytarır.

Nümunə:

Error-ları göstər

7. close_browser

Browser-i bağlayır və məlumatları təmizləyir.

Nümunə:

Browser-i bağla

İstifadə Ssenariləri

Nümunə 1: Saytdan məhsul məlumatlarını çıxarmaq

1. https://example.com/products səhifəsini aç
2. Bütün məhsul adlarını götür (.product-name selector ilə)
3. Bütün qiymətləri götür (.price selector ilə)
4. Browser-i bağla

Nümunə 2: API request-lərini analiz etmək

1. https://app.example.com səhifəsini aç
2. API request-lərini göstər
3. Response body-lərini göstər

Nümunə 3: Dinamik məlumat çıxarmaq

1. https://example.com səhifəsini aç
2. Bu kodu icra et:
   const products = [...document.querySelectorAll('.product')].map(p => ({
     name: p.querySelector('.name').innerText,
     price: p.querySelector('.price').innerText
   }));
   return products;

Qeydlər

• Browser yalnız ilk inspect_url çağırışında açılır
• Hər inspect_url çağırışında network və error məlumatları təmizlənir
• close_browser bütün məlumatları təmizləyir və browser-i bağlayır
• Debug port istifadə edərkən, browser əl ilə açılmalıdır

Lisenziya

MIT