Single HTML Page Saver — Full Page Archiver (SingleFile CDN + DIY)

piknockyou
2026-03-25T14:11:01Z

Save pages as self-contained HTML. Two engines: DIY (with image compression) and SingleFile CDN. Credits: https://github.com/gildas-lormeau

☕ If you find this tool helpful & would like to support its maintenance, please consider leaving a tip on:

https://ko-fi.com/piknockyou

Thank you! :-)

🖼 For a quick impression of this script, refer to the screenshots at the bottom.

Single HTML Page Saver — Full Page Archiver (SingleFile CDN + DIY)

Save any webpage as a single, self-contained HTML file with all images, styles, and fonts embedded. Choose between two engines: a built-in DIY archiver with image compression and optimization, or the powerful SingleFile engine loaded from CDN.

Why You Need This

Saving webpages is harder than it should be:

Browser "Save As" creates folders — messy collections of files that break when moved

Copy-paste loses formatting — images, layouts, and styles disappear

Pages disappear — content gets deleted, paywalled, or redesigned

Bookmarks break — URLs go dead, servers go down

Screenshots can't be searched — no selectable text, no links

This script produces a single .html file that looks like the original page and works forever — offline, portable, searchable.

Two Engines

Engine | Description
DIY | Built-in archiver with image compression, unused CSS/font removal, parallel fetching. Zero external dependencies, works offline.
SingleFile CDN | Official SingleFile engine loaded from CDN. Maximum fidelity, advanced CSS processing. Requires network access.

DIY Engine Features

Image compression — large images downscaled (max 1920px) and re-encoded as WebP/JPEG

Smart format selection — PNGs without transparency converted to JPEG; WebP preferred when supported

Only-if-smaller — compressed version used only when actually smaller than original

Hidden image skipping — invisible images replaced with 1×1 transparent pixel

Unused CSS removal — CSS rules that don't match any DOM element are stripped

Unused font-face removal — @font-face for unused fonts are removed

Parallel fetching — up to 6 concurrent resource fetches

What Gets Saved

Images — sources, srcset variants, CSS background-image

Stylesheets — external CSS inlined, @import resolved, url() embedded

Fonts — web fonts converted to data URIs

Favicons — site icons preserved

SVG graphics — including <image> and xlink:href references

Canvas elements — snapshotted as PNG images

Lazy-loaded content — triggers loaders via scroll simulation

Usage

Action | How
Save page | Left-click the 💾 button (bottom-right corner)
Change engine | Right-click the button → select DIY / SingleFile CDN / Auto

Engine Modes

Mode | Behavior
DIY (default) | Use built-in archiver
SingleFile CDN | Use SingleFile engine from CDN
Auto | Try DIY first, fall back to CDN if it fails

Your selection persists across sessions and pages.

Status Notifications

Processing page (DIY)... — DIY engine working

Embedding resources... 42/78 — resource processing progress

Processing page (SingleFile CDN)... — CDN engine working

✅ Saved in 3.2s · 1842KB (diy) — success with engine and file size

Installation

1. Install a userscript manager:

Tampermonkey (recommended)

Violentmonkey

2. Install this script

3. Visit any page — the save button appears automatically

Technical Details

Isolated UI (Shadow DOM)

The save button lives inside a closed Shadow DOM:

Not captured in saved files

No CSS/JS interference from the page

Auto-restored if removed by aggressive page scripts

Cross-Origin Fetching

Resources on different domains (CDN images, Google Fonts) are fetched via GM_xmlhttpRequest, bypassing CORS restrictions.

CSP Handling

Sites with strict Content Security Policy may block the CDN engine. The DIY engine works everywhere since it requires no script injection. In Auto mode, CDN failures automatically fall back to DIY.

Known Limitations

Cross-origin iframes — content from different-domain iframes cannot be captured

Shadow DOM content — page content inside Shadow DOM may not be fully captured

Dynamic content — only content loaded at capture time is saved

Animated GIFs — preserved as-is to keep animation

FAQ

Q: Which engine should I use? A: DIY works great for most sites. Try SingleFile CDN if you need maximum fidelity on complex pages.

Q: Why is my saved file large? A: All images/fonts/styles are embedded. DIY compresses images and removes unused CSS to minimize size.

Q: Does this work offline? A: DIY works fully offline. SingleFile CDN requires internet to load the library.

Q: Is my data sent anywhere? A: No. Everything runs locally. Network requests are only for fetching page resources and (for CDN mode) loading the SingleFile library.