DEV Community

Cover image for How I Built a Free Image Downloader & Collector Extension for Designers & Graphic Apparel Creators
Alex | Tshirts I Want
Alex | Tshirts I Want

Posted on

How I Built a Free Image Downloader & Collector Extension for Designers & Graphic Apparel Creators

As a developer and creator involved in graphic apparel design at Tshirts I Want, I constantly find myself browsing visual inspiration across platforms like Pinterest, Behance, and Unsplash.

Whether researching graphic t-shirt artwork, vintage typography, or visual design mockups, the repetitive process of right-clicking and manually saving images one by one felt incredibly slow.

Existing solutions were either bloatware, hidden behind subscriptions, or required running heavy desktop apps. So, I decided to build a lightweight, open-source solution: Image Downloader & Collector.


🚀 What Does It Do?

Image Downloader & Collector is a browser extension built with Manifest V3 designed to make visual asset collection effortless for designers, creators, and shoppers.

Key features include:

  • Mouse Hover Quick Action Bar: Hover over any image on any webpage to instantly reveal Quick Download and Save to Collection action buttons.
  • 🔖 Custom Folder Bookmarking: Pin images directly into custom collection folders (e.g., T-Shirt Ideas, Wallpapers, Graphic Artwork) without downloading right away.
  • 📦 1-Click ZIP Batch Downloader: Access your dashboard to select and download an entire collection folder as a single ZIP archive.
  • 🔍 High-Res Source Detection: Automatically parses srcset, data-src, and un-scaled CDN parameters to fetch the highest-resolution original image available.
  • 🔒 Privacy-First: 100% local processing with chrome.storage.local. Zero user tracking.

🛠️ Tech Stack & Architecture

Built with pure Vanilla JavaScript, HTML5, and CSS3 following modern Manifest V3 guidelines:


json
{
  "manifest_version": 3,
  "name": "Image Downloader & Collector - Batch Save",
  "permissions": ["storage", "downloads"],
  "host_permissions": ["<all_urls>"]
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)