web-scraper

Web scraper with SPA/JavaScript rendering, page interaction, and JS execution. Two-tier engine (HTTP → Playwright browser). Smart discovery, batch fetch, interactive content extraction, OpenAPI parsing. Use when read_url_content fails, SPA rendering needed, or page interaction required.

5 stars

Best use case

web-scraper is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Web scraper with SPA/JavaScript rendering, page interaction, and JS execution. Two-tier engine (HTTP → Playwright browser). Smart discovery, batch fetch, interactive content extraction, OpenAPI parsing. Use when read_url_content fails, SPA rendering needed, or page interaction required.

Teams using web-scraper should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/web-scraper/SKILL.md --create-dirs "https://raw.githubusercontent.com/northseadl/norix-skills/main/web-scraper/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/web-scraper/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How web-scraper Compares

Feature / Agentweb-scraperStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Web scraper with SPA/JavaScript rendering, page interaction, and JS execution. Two-tier engine (HTTP → Playwright browser). Smart discovery, batch fetch, interactive content extraction, OpenAPI parsing. Use when read_url_content fails, SPA rendering needed, or page interaction required.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Web Scraper

> `./scrape <command> [options]` — Run `./scrape help` for full option reference.

## Content Precision Levels

The `fetch` command outputs filtered content by default. Three precision levels:

| Level | Flag | Behavior | When to use |
|-------|------|----------|-------------|
| **Default** | *(none)* | PruningContentFilter removes boilerplate | Most scenarios — good enough |
| **Precision** | `--selector ".css"` | Extract only the matched container | Production-quality docs, zero noise |
| **Raw** | `--raw` | Full page, no filtering | Debugging, page structure analysis |

Precision workflow: fetch a sample page → inspect remaining noise → identify content container via CSS selector → re-fetch all pages with `--selector`.

## Engine Architecture

```
L0: Pure HTTP (httpx + selectolax + markdownify)
    fetch → strip boilerplate → markdownify → clean content

L1: Browser (crawl4ai + Playwright, networkidle wait)
    fetch → [JS interaction] → PruningContentFilter → fit_markdown → clean content
    Handles: SPAs, anti-bot, JS-rendered content, folded/lazy content

Auto mode: L0 probe → detect SPA/empty → fallback to L1

Smart Discovery (3-tier):
    1. sitemap.xml → 2. Nav DOM extraction → 3. Browser deep crawl
```

## Workflow Patterns

### Single page fetch

```bash
# Auto-detects if browser needed
./scrape fetch https://docs.example.com/api/create

# Force browser for known SPA sites
./scrape fetch https://open.feishu.cn/document/... --engine cdp

# Precision extraction with CSS selector
./scrape fetch https://developer.work.weixin.qq.com/document/path/90196 --engine cdp --selector ".ep-doc-area"
```

### Interactive content extraction (SPA/folded content)

```bash
# Auto-expand all collapsed/folded sections (universal preset)
./scrape fetch https://open.feishu.cn/document/... --expand-all --wait 5000

# Scroll through entire page to trigger lazy loading
./scrape fetch https://example.com/infinite-scroll --scroll-full

# Custom JavaScript before extraction
./scrape fetch URL --js "document.querySelectorAll('.expand-btn').forEach(e => e.click())"

# JS from file (for complex interactions)
./scrape fetch URL --js-file /path/to/interact.js --wait 5000

# Wait for specific element before extraction
./scrape fetch URL --wait-for ".api-response-table"

# Combine: expand + custom JS + wait
./scrape fetch URL --expand-all --js "extraAction()" --wait-for ".loaded" -o /tmp/docs/
```

### Execute JavaScript on a page

```bash
# Execute JS and return metadata (no markdown conversion)
./scrape exec URL --js "return document.title"

# Extract data from page's JavaScript state
./scrape exec URL --js "return JSON.stringify(window.__NEXT_DATA__)"

# Execute JS then fetch page as markdown
./scrape exec URL --js "expandAll()" --then-fetch -o /tmp/result.md
```

### Batch-download documentation

```bash
./scrape fetch https://docs.example.com --auto -o /tmp/docs/
./scrape fetch --from-file urls.txt -o /tmp/docs/
./scrape fetch --from-file urls.txt --merge -o /tmp/docs/all.md
```

Files are automatically named by page title (e.g., `读取成员.md`, `Getting_Started.md`).

### Build organized local documentation

1. **Discover** site structure: `./scrape discover <url> --json` → get URLs + titles
2. **Filter** relevant URLs (Agent selects subset based on user's needs)
3. **Write** filtered URLs to a file
4. **Fetch** to output directory: `./scrape fetch --from-file urls.txt -o /path/to/docs/`
5. **Organize** (Agent moves/renames files into logical folder structure)

### Analyze site structure

```bash
./scrape discover https://docs.example.com
./scrape discover https://docs.example.com --engine cdp --deep --max-pages 100
```

### Extract OpenAPI specs

```bash
./scrape openapi https://api.example.com/v3/api-docs -o /tmp/api.md
./scrape openapi https://api.example.com/swagger-ui/ -o /tmp/api.md
```

## Key Options

| Option | Commands | Description |
|--------|----------|-------------|
| `--engine MODE` | discover, fetch | `auto` (default), `http` (L0 only), `cdp` (L1 only) |
| `--selector CSS` | fetch, exec | CSS selector for content area (precision mode) |
| `--raw` | fetch, exec | Output full page (skip content filtering) |
| `--js CODE` | fetch, exec | JavaScript to execute before extraction |
| `--js-file PATH` | fetch, exec | JavaScript file to execute before extraction |
| `--wait-for CSS` | fetch | Wait for CSS selector to appear before extraction |
| `--expand-all` | fetch | Auto-expand collapsed/folded sections (universal preset) |
| `--scroll-full` | fetch | Scroll entire page to trigger lazy loading |
| `--then-fetch` | exec | After JS execution, also fetch page as markdown |
| `--session ID` | exec | Reuse browser session for multi-step interactions |
| `--js-only` | exec | Skip navigation, execute JS on existing session |
| `--auto` | fetch | Auto-discover pages then fetch all |
| `--from-file FILE` | fetch | Read URLs from file (one per line) |
| `-o PATH` | fetch, exec, openapi | Output directory or file path |
| `--merge` | fetch | Merge all pages into single markdown |
| `--json` | discover, fetch | Machine-readable JSON output |
| `--summary-only` | fetch | Only show URL, title, char count |
| `--max-pages N` | discover, fetch | Limit pages (discover: 200, fetch: 50) |
| `--deep` | discover | Follow links for browser-based BFS crawl |

## Requirements

- **uv**: `curl -LsSf https://astral.sh/uv/install.sh | sh`
- Dependencies and Playwright Chromium auto-installed on first run

Related Skills

pm-toolkit

5
from northseadl/norix-skills

自然语言 → Mermaid 图表(16 种)+ 网页原型,本地 Web 面板实时预览/导出。

mobile-testing

5
from northseadl/norix-skills

Android/iOS automated testing: device management, app install, performance profiling, log analysis, screenshot comparison, Maestro E2E orchestration.

llm-agent-dev

5
from northseadl/norix-skills

LLM Agent engineering: pattern selection (12-mode matrix), data simulation, convergence iteration. Covers intent routing, function calling, ReAct, MCP, prompt chaining, guardrails, evaluation.

image-studio

5
from northseadl/norix-skills

AI image generation and editing: e-commerce templates (hero/banner/detail/lifestyle), image refinement (background replace/remove, enhance, retouch, style transfer), icon extraction (bg-removal + detect + smart crop with transparent output).

feishu-integration

5
from northseadl/norix-skills

Feishu (Lark) unified CLI for tasks, documents, wiki, bitable, messaging, approval, and Drive. Supports search/create/edit/publish/export across all modules. Use when reading/writing Feishu docs, searching docs or wiki, managing tasks, sending messages, creating approvals, exporting to Markdown, or any 飞书/Lark interaction.

es-analytics

5
from northseadl/norix-skills

Elasticsearch / SLS 只读数据分析:索引探索、mapping、聚合统计、日志搜索、时间序列、多 Profile。

doc-sentinel

5
from northseadl/norix-skills

Document-code change notification system: traceable doc-code binding via git tree hash, git-diff-driven reconciliation plans with confidence/risk metadata, and idempotent execution. Use when maintaining documentation freshness, detecting stale docs, or binding docs to source code.

coding-net-integration

5
from northseadl/norix-skills

Coding.net DevOps automation: MR lifecycle, CI operations (trigger/logs/stop), artifact registry, cross-project queries, remote file audit.

cnb-cool-integration

5
from northseadl/norix-skills

针对 cnb.cool 的云原生构建(CNB Build):生成/修改 .cnb.yml 流水线、触发规则、 构建环境、runner 资源、缓存、环境变量、手动触发与调试。 在接入、迁移、优化或排查 CNB 构建配置时使用。

agent-task-orchestration

5
from northseadl/norix-skills

Task decomposition and multi-agent orchestration with retry, checkpoint recovery, and real-time monitoring. Mixed Codex/Claude Code engine. Parallel/sequential execution.

agent-swe-team

5
from northseadl/norix-skills

Multi-agent SWE team built on the Workshop model. Full-stack vertical workers, meeting room with @mention notification, private pipes, shared task board. Git worktree isolation, Leader-driven coordination. Mixed Codex/Claude Code engine. Use when a task needs engineering depth beyond a single agent. NOT for simple task parallelism (use agent-task-orchestration) or design discussions (use agent-brainstorm).

agent-front-design

5
from northseadl/norix-skills

Frontend design blueprints with craftsmanship scoring, self-critique loops, and engineering handoff. Aesthetic intelligence against AI homogeneity. Use for: UI/UX design specs, design system creation, visual direction exploration, component design review, design-to-engineering handoff.