extract-page-data

Files (12)

• SKILL.md
• extract.mjs · scripts/
• README.md · scripts/inject/
• extract-links.js · scripts/inject/
• extract-markdown.js · scripts/inject/
• extract-theme.js · scripts/inject/
• browser.mjs · scripts/lib/
• links.mjs · scripts/lib/
• markdown.mjs · scripts/lib/
• pack.mjs · scripts/lib/
• screenshot.mjs · scripts/lib/
• theme.mjs · scripts/lib/

SKILL.md (first lines)

# Extract Page Data

Extract structured data from any web page for design analysis, page reconstruction, or content review. The script handles dependency installation automatically — just point it at a URL.

## When to use this

- User shares a web page URL and wants to capture screenshots
- User asks to extract design tokens, CSS theme, or color palette from a page
- User wants page content as Markdown text
- User wants to know what links, buttons, and interactive elements are on a page
- User asks to export or analyze any web page's structure
- User wants to take a screenshot of a specific element on a page (use `--selector`)

**Do NOT use for Axure prototypes** — use `extract-axure-data` instead.

## Quick start

Run the extraction script from `scripts/extract.mjs` relative to this skill directory.

```bash
# Full page screenshot
node scripts/extract.mjs https://example.com --screenshot

# Screenshot of a specific element
node scripts/extract.mjs https://example.com --screenshot --selector "#hero"

# Extract design tokens (colors, typography, spacing, etc.)
node scripts/extract.mjs https://example.com --theme

# Extract page content as Markdown
node scripts/extract.mjs https://example.com --markdown

# Collect all links and interactive elements
node scripts/extract.mjs https://example.com --links

# Extract everything
node scripts/extract.mjs https://example.com --all

# Export full data pack (screenshot + theme + markdown + links as zip)
node scripts/extract.mjs https://example.com --pack
```

First run auto-installs Playwright + Chromium to `~/.cache/page-extractor/`. This takes 1-2 minutes and happens once.

## Parameters

| Flag | What it does | Default |
|---|---|---|
| `<url>` | Web page URL (required) | — |
| `--screenshot` | Capture page screenshot | off |
| `--theme` | Extract design tokens | off |
| `--markdown` | Convert page to Markdown | off |
| `--links` | Collect interactive elements | off |
| `--pack` | Export full data pack (zip) | off |
| `--all` | Run all extractions | off |
| `--selector SEL` | CSS selector to scope extraction | whole page |
| `-o DIR` | Output directory | `./page-export` |
| `--viewport WxH` | Viewport size | `1280x720` |
| `--wait MS` | Extra wait after page load (ms) | `0` |
| `--scroll` | Scroll page to trigger lazy content | off |
| `--scroll-step PX` | Pixels per scroll step | `800` |
| `--scroll-delay MS` | Delay between scroll steps (ms) | `200` |
| `--no-headless` | Show browser window | headless |
| `--connect-cdp URL` | Attach to running Chrome (for auth) | — |
| `--format FMT` | Screenshot format: png or jpeg | `png` |
| `--verbose` | Detailed logging | off |

## Output structure

```
page-export/
├── screenshot.png       # Page or element screenshot    (--screenshot)
├── theme.json           # Design tokens                 (--theme)
├── content.md           # Page text as Markdown          (--markdown)
├── links.json           # Links and interactive elements (--links)
└── page-data.zip        # Full data pack                 (--pack)
    ├── screenshot.png
    ├── theme.json
    ├── content.md
    ├── links.json
    └── meta.json        # Page metadata (title, url, viewport)
```

## Selector support

All extraction modes support `--selector` to scope to a specific element:

```bash
# Screenshot only the header
node scripts/extract.mjs https://example.com --screenshot --selector "header"

# Extract design tokens from a card component
node scripts/extract.mjs https://example.com --theme --selector ".card"

# Get Markdown from the main content area
node scripts/extract.mjs https://example.com --markdown --selector "main"

# Collect links from the navigation
node scripts/extract.mjs https://example.com --links --selector "nav"
```

## Authenticated pages

Some pages require login. Two approaches:

**Connect to an existing Chrome session** (recommended — reuses cookies):

macOS:
```bash
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
```

Windows:
```powershell
start chrome --remote-debugging-port=9222
```

Then log in via that Chrome window and run:
```bash

From fern-ok/prototype-demo, Apache-2.0.

More from fern-ok/prototype-demo