Chrome Extension

Capture any page, as structured IR.

One click captures the full DOM — elements, styles, bounds, and metadata — as WebSketch IR. Zero dependencies. Clipboard-ready output.

Install from source Read the Handbook

Build & load

git clone https://github.com/mcp-tool-shop-org/websketch-extension.git cd websketch-extension npm ci && npm run build # Then: chrome://extensions → Load unpacked → select dist/

Capture

// Click the WebSketch icon on any page // → "Capture Current Page" // Output is auto-copied to clipboard as WebSketch IR JSON // Validate it: websketch validate capture.json // Render it: websketch render capture.json

IR output

{ "root": { "type": "HTML", "id": "...", "classes": ["..."], "bounds": { "x": 0, "y": 0, "width": 1920, "height": 1080 }, "children": [...] }, "metadata": { "url": "https://example.com", "title": "Page Title", "viewport": { "width": 1920, "height": 1080 } } }

Everything you need from a page capture

Structured, portable, and ready to pipe into any tool.

Full DOM tree with styles

Captures the complete element tree — types, IDs, classes, computed styles, and bounds — not just a screenshot. Every node is addressable in the output IR.

Clipboard-ready, zero friction

Click once and the WebSketch IR JSON lands in your clipboard. No file dialogs, no export steps. Pipe it straight into websketch-ir, an LLM, or your own tooling.

Configurable capture limits

Set maxDepth, maxNodes, and maxStringLength per your needs. Warning banners in the popup tell you when a capture was truncated — no silent data loss.

Capture settings

Configure via the gear icon in the extension popup.

Setting

Default

What it controls

maxDepth

Maximum DOM tree depth to traverse

maxNodes

10000

Maximum number of nodes to capture

maxStringLength

500

Maximum length of text content per node

Install from source

Clone and build

git clone https://github.com/mcp-tool-shop-org/websketch-extension.git
cd websketch-extension
npm ci
npm run build

Load in Chrome

# 1. Open chrome://extensions/
# 2. Enable "Developer mode" (top right)
# 3. Click "Load unpacked"
# 4. Select the dist/ directory

# For development with auto-rebuild:
npm run dev
# Reload the extension in Chrome after each build.

Validate your capture

# Requires websketch-ir CLI
npm install -g @mcptoolshop/websketch-ir

websketch validate capture.json
websketch render capture.json

# Or paste the JSON into the online demo:
# https://mcptoolshop.com

Run the test suite

npm run validate        # typecheck + lint + test + build
npm run test:run       # tests once
npm run test:coverage  # with coverage report

Designed to stay out of your way

Minimal surface, maximum composability.

Zero runtime dependencies

The extension ships no third-party libraries. Content script and popup are plain TypeScript compiled to vanilla JS — nothing to audit, nothing to update.

Part of the WebSketch ecosystem

Output feeds directly into websketch-ir for validation, rendering, and AST manipulation. Use the CLI, the demo, or build your own pipeline on top.

Open and composable

WebSketch IR is a documented, language-neutral format. Any tool that can read JSON can consume a capture — LLMs, layout engines, accessibility auditors, design tools.