SiteVault

Capture assets of page loads — plus console log, HAR, storage & cookies — and save as a ZIP in original folder structure.

# SiteVault A Chrome DevTools panel that captures **everything a page loads** and saves it into a single ZIP that mirrors the site's original folder structure — page resources plus, optionally, the console log, a network HAR, page storage, and every network-tab response. ## What it does - Adds a **SiteVault** panel to Chrome DevTools. - Collects the page's Sources resources, de-duplicates them, and rebuilds their folder paths. Nothing is ever re-fetched — bodies come straight from what DevTools already holds, so they match exactly what the page received. - **Re-hydrates empty bodies.** Resources often appear in the Sources tree before DevTools has loaded their body, so `getContent` returns nothing. Before saving, SiteVault retries `getContent` over a few short passes for every still-empty resource — this is what reliably pulls in third-party / CDN minified JS that you can see in the tree but that used to save empty. - **Keeps binary network bodies too.** The Network-tab capture no longer drops base64/binary responses, and any URL ending in a code/text extension (`.js`, `.mjs`, `.css`, `.json`, `.map`, `.wasm`, …) is kept even when the CDN serves it with a generic or wrong MIME type. - **Pick what to export.** Saving now opens a **collapsible folder tree** with a checkbox on every folder and file (with per-folder counts and sizes). Tick or untick whole domains / folders / individual files, then **Save as ZIP** — only what you selected is packed. Folder checkboxes cascade and show a tri-state when partially selected. - Compresses everything client-side (native `CompressionStream`) and downloads `<hostname>.zip`. No external libraries, no network calls of its own. > Tip: to grab everything from another domain (e.g. a CDN), turn **"Exclude > resources from other domains"** off, then deselect anything you don't want in > the picker. The picker makes per-domain trimming easy without the toggle. ## Filters & extras (toggles) | Toggle | Default | |---|---| | Skip empty (no-content) files | off | | Beautify HTML / CSS / JS / JSON | off | | Exclude images | on | | Exclude audio & video | on | | Exclude .txt files | on | | Exclude fonts | on | | Exclude resources from other domains | on | | Include network-tab responses (merged, no re-fetch) | on | | Include console log | on | | Include network HAR | on | | Export localStorage, sessionStorage & cookies | on | Toggle state is remembered between sessions. ### The extras, in detail - **Network-tab responses (no re-fetch)** — text response bodies read from the DevTools network log via `getContent()` and merged into the same `<host>/…` tree. URLs already saved from Sources are skipped to avoid duplicates; a `_network/_manifest_*.txt` records what was kept and skipped. Binary bodies are left to the regular Sources save; nothing is re-requested. - **Console log** (`console_*.log`) — `console.*` calls captured from page load onward (a `document_start` MAIN-world script), plus `onerror` / `unhandledrejection`, interleaved with one line per network request rebuilt from the HAR. The file header explains what a panel-based capture can and cannot see versus Chrome's native "Save as…". - **Network HAR** (`network_*.har`) — `getHAR()` output wrapped to the valid HAR 1.2 `{ "log": { … } }` shape so standard HAR viewers read it. - **Storage** (`storage_*.json`) — `localStorage`, `sessionStorage` and cookies for the inspected page. **Same-origin only**: storage is read from the page's top frame; cookies are fetched by the background worker scoped to the page URL and re-checked against the host so no other domain's data can leak in. ## Install (unpacked) 1. Open `chrome://extensions/`. 2. Enable **Developer mode** (top-right). 3. Click **Load unpacked** and select this folder. 4. Open DevTools on any `http`/`https` page and switch to the **SiteVault** tab. 5. For the most complete capture, open the **Network** panel once and reload the page so every request and console message is recorded, then **Save as ZIP**. ## Permissions - `storage` — remember your toggle choices. - `cookies` + host access — read the inspected page's own cookies for the storage export. (Host access is used only for that; bodies are never re-fetched.) ## Files ``` manifest.json extension manifest (MV3) devtools.html/.js registers the DevTools panel panel.html/.css/.js the panel UI and save pipeline content.js document_start console capture (MAIN world) background.js service worker — reads page cookies for the panel lib/zip.js in-browser ZIP writer (CompressionStream + CRC32) lib/paths.js URL -> folder path resolution + de-duplication lib/tree.js folder/file picker (build tree + checkbox render) lib/beautify.js optional, dependency-free code formatter lib/network-capture.js no-refetch capture of network response bodies lib/extras.js console log / HAR / storage / network-response items icons/ toolbar / panel icons ```