Why I Built Unlockt: A Local-First Instagram Saved Archiver, Canvas Collage Studio & 9:16 Video Vault

Like many developers, designers, and digital marketers, my Instagram "Saved" collection had turned into a digital graveyard with over 5,000 bookmarked posts, reels, and carousels.
The native Instagram web app offers virtually zero productivity tools:

• ❌ No full-text search across captions or hashtags
• ❌ No way to extract individual slides from carousel photo dumps
• ❌ No offline preservation (if a creator archives a post, it disappears forever)
• ❌ Existing web downloaders ask for account passwords, inject trackers, or bombard you with ads. So I spent the last few months developing Unlockt — a 100% free, MIT open-source, local-first Chromium extension and Node.js Express dashboard. --- ## 🏗️ Architecture & Engineering Highlights Here is how Unlockt is designed under the hood: ┌─────────────────────────────────┐ │ Chromium Extension (MV3) │ ──► Reads Instagram GraphQL via active session └────────────────┬────────────────┘ │ Local REST Sync ▼ ┌─────────────────────────────────┐ │ Express Backend (Port 3000) │ ──► SSRF-Hardened Proxy & HTTP 206 Video Streamer └────────────────┬────────────────┘ │ ┌────────┴────────┐ ▼ ▼ ┌──────────────┐ ┌───────────────────────────┐ │ data/saved. │ │ /thumbnails /videos │ │ json (DB) │ │ (Local High-DPI Storage) │ └──────────────┘ └───────────────────────────┘

1. Zero-Password Session Scraping

Rather than asking users for their credentials or running headless browser instances that trigger Meta account checkpoints, Unlockt operates as a Manifest V3 Chromium extension. It uses the cookies and CSRF tokens already present in your authenticated browser tab with randomized jitter delays (800ms - 2200ms) to respect rate limits.

2. 1-Click HTML5 Canvas Collage Studio

One of my favorite features is the Carousel Studio. When you open a 10-slide photo dump, Unlockt extracts every slide and can render them onto an off-screen HTML5 <canvas> element to produce high-resolution moodboards (2x1, 2x2, 3x2, 3x3, and 5x2) with crisp 4px white margin dividers.

3. HTTP 206 Partial Content Video Streaming

Saved Reels are streamed via native HTTP 206 byte-range headers on the Express backend. This enables instant seeking, scrubbing, and frame-by-frame inspection without buffering the full 1080x1920 MP4 file in memory.

4. Zero-Telemetry & Offline SVGs

All metadata, photos, and videos reside strictly in your local filesystem. Even creator profile avatars are generated on-the-fly as clean SVG initials in memory to avoid external CDN network requests.

---

💻 Quick Setup

bash
# 1. Clone the repository
git clone https://github.com/mahmoud-madi/unlockt-instagram-saved-chrome-extension.git

# 2. Install dependencies & launch backend
cd unlockt-instagram-saved-chrome-extension
npm install
npm start

# 3. Load extension in Chrome / Brave / Edge
# Navigate to chrome://extensions -> Enable Developer Mode -> "Load unpacked" -> Select /extension directory


---

🌟 Links & Documentation
GitHub Repository: mahmoud-madi/unlockt-instagram-saved-chrome-extension [Unlockt](https://mahmoud-madi.github.io/unlockt-instagram-saved-chrome-extension/)

Live Landing Page & Q&A Hub: [Unlockt Page](https://mahmoud-madi.github.io/unlockt-instagram-saved-chrome-extension/)

I'd love to hear your feedback, feature suggestions, or pull requests!

Comments

[Alex Shev]

Local-first is a strong fit for saved-content tools because the archive is personal and the value is in organization, not another cloud copy. The tricky part is exportability: users should be able to leave with their saved structure, not just screenshots of it.

[Mahmoud Madi]

Thanks Alex! Totally agree. That’s why Unlockt doesn't just do visual shows — it provides full data exportability.

Users can export their complete structured metadata as clean JSON (data/saved.json), export CSV spreadsheets for analytics, or batch-download the raw 1080p MP4 video files and high-res carousel slides in organized ZIP archives. You truly own the raw data on your local drive!

[Amit Feldman]

Local-first for a saved-media vault is the right architecture — the whole point is that the data never leaves the machine. Congrats on v6.7.

Quick public check of the dashboard page (headers + public config only):

1. GitHub Pages serves HSTS but offers no way to set custom headers, so Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy and Permissions-Policy are all unset. For a privacy-positioned product that's worth closing: without XFO/CSP frame-ancestors the page can be clickjacked in an iframe, and without nosniff a mislabeled asset can be interpreted as executable. The no-migration fix: free Cloudflare in front of a custom domain, headers via Transform Rules (~5 lines, no origin change).

2. Title tag is 92 chars — search results cut around ~60, so "Unlockt (v6.7) — Open-Source Instagram Saved Vault..." loses the differentiators ("Bulk Media Exporter", "Smart Media Studio") entirely. Front-load the one phrase you want seen. Meta description at 191 chars also truncates (~155) — same advice.

TLS 1.3, single h1, canonical all check out, TTFB 234ms. Happy to re-run the scan free once headers land. Good luck with Unlockt!

[Mahmoud Madi]

Thank you so much Amit for the kind words and the thorough technical audit!

1. Title & Description Length: Just pushed an update fixing this! Front-loaded the primary keywords with Title trimmed to ~55 chars and Meta Description to ~138 chars for clean SERP rendering without truncation.
2. Security Headers: Added the nosniff and referrer meta tags in the HTML markup, and will look into adding Cloudflare Transform Rules in front of the custom domain for full HTTP-level CSP/XFO enforcement.

Appreciate the TTFB and TLS check — really valuable feedback!