Element Snapshot - Firefox Add-on

A Firefox-first extension that freezes the current page, lets you select an element, and creates a clean HTML recreation. It inlines only visual styles that differ from Firefox defaults, removes executable and page-only noise, and exports either a single standalone HTML file or a portable ZIP bundle.

Key Features

AMOLED Dashboard Interface: High-contrast rounded utility cards with a responsive popup and preview layout.
Responsive Element Picker: Freezes animations, media, and scrolling during selection for pixel-perfect targeting.
Multi-Element Selection: Shift-click to add, Ctrl/Cmd-click to toggle, and Enter to finalize capture in clean document order without unrelated ancestors.
Whole-Page & Subtree Capture: One-click whole-page capture using the same cleanup, font, SVG, and export pipeline.
Computed Style Diffing: Captures normal and :hover visual states as compact computed-style differences.
Clean Output: Strips scripts, event handlers, external stylesheets, tracking attributes, and hidden elements while preserving needed SVG definitions, @font-face rules, and pseudo-elements (::before/::after).
Export Options:
- Standalone HTML: Single self-contained file with embedded assets.
- ZIP Bundle: Archive with index.html and an assets/ folder containing extracted images, inline SVGs, and fonts with rewritten paths.
Token Estimator: Built-in quad-token estimator to approximate LLM context size for the generated markup.

Installation & Usage

Install directly from Mozilla Add-ons:

Firefox Add-on Store: Element Snapshot

Or load temporarily for development:

Open about:debugging#/runtime/this-firefox in Firefox.
Click Load Temporary Add-on… and select manifest.json.
Click the Element Snapshot toolbar button on any webpage to inspect and snapshot elements.

License

Released under the MIT License.