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

#node #opensource #javascript #webdev

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!

DEV Community