ValPetal Tech Labs

Posted on Feb 10

Why Saving Images From the Web Is Hard—How AllPicSaverX Extension Handles It

#webdev #javascript #frontend #extensions

A technical look at a browser extension that finds and saves images from any webpage—without sending your data anywhere.

Try the extension

The Problem: Saving Images Is Harder Than It Looks

On the surface, saving a picture from a website is simple: right-click, “Save image as.” In practice, modern sites make that approach brittle and tedious.

No single source: the “real” image isn’t always sitting in one obvious img src.
Lazy loading: the visible src might be a placeholder; the real URL sits in data-src / data-original and only becomes active later.
Responsive images (srcset): the browser picks a size, and the best variant may not be the one you can right‑click.
CSS backgrounds: images set as background-image don’t show up as normal “image” elements.
Shadow DOM: some images live inside components that aren’t reachable with a simple DOM query.
Thumbnail-first platforms: on Google Images / Pinterest-style pages, what you see is often not the source asset.
CDNs and redirects: URLs can be parameterized or redirected, so the URL you copy isn’t always the file you get.

So “save image” becomes: find every possible image source, resolve the real URLs, avoid duplicates and tracking pixels, and then let the user choose what to keep and how to name it. Doing that by hand doesn’t scale. That’s the problem AllPicSaverX is built to address.

What the Extension Does (User’s View)

You open a sidebar from the extension icon. The sidebar is tied to the tab you’re on: it doesn’t replace the page, it sits beside it.

You hit Scan (or rely on auto-scan if you’ve turned it on). The extension discovers images from the current page and lists them in a grid or list, with whatever metadata it can infer (resolution, file type, file size when available).

From there you can:

Download a single image (with optional custom folder and filename template).
Select several and download as ZIP so one action gives you a single archive.
Open a gallery tab to view the same set in a full-page layout with a lightbox and keyboard navigation.
Convert an image to another format (e.g. WebP → JPG) before saving.

You can also narrow what you see:

Filter by minimum dimensions and by format (JPEG, PNG, GIF, WebP, SVG)
Hide small SVG icons so they don’t flood the list
Sort by page position, file size, or resolution

Settings live in an options page: default filters, auto-scan on open, subfolder pattern and file-naming template (e.g. {domain}-{timestamp}-{index}.{ext}), and conversion defaults. There’s also a context menu entry to save a single image from a right-click.

A Short Walkthrough

Install the extension and open any normal webpage (e.g. a photo site, a blog, a search results page).
Click the extension icon. The sidebar opens next to the page.
If auto-scan is on, the list populates automatically; otherwise click the refresh/scan control.
Wait a moment while the list fills and metadata (dimensions, type, size) is probed where possible.
Use the filter and sort controls to narrow the list. Select the images you want.
Download individually from each card, or select multiple and use “Download as ZIP.”
Optionally open the gallery for a full-screen browse, or open the options page to set default folders and naming.

The sidebar only runs when you open it; scanning runs when you trigger it (or when you open the sidebar with auto-scan on). It doesn’t scan in the background.

How It Works Under the Hood

The extension is split into three parts that work together: the content script, the background service worker, and the sidebar UI. That split is standard for modern browser extensions: the UI can’t touch the page DOM, and the page context can’t trigger downloads or long-lived logic, so a middle layer coordinates them.

Rough flow (what happens when you scan):

Sidebar (React UI) asks the background to “scan the current tab.”
Background injects (or reuses) the content script in the active tab and sends it a message: “scan this page.”
Content script runs inside the page and extracts candidates from multiple places:

img elements (including srcset and common lazy-load attributes)
picture/source responsive sources
shadow-root img elements
CSS backgrounds (background-image / background)
SVG elements
image-like links / input[type=image]
site-specific “plugins” that can parse HTML when a platform hides URLs in predictable patterns

Then it merges results and deduplicates them.

For URLs that match a registered plugin, it can also normalize/transform the URL. Some URLs are flagged as needing an “upgrade”; in that case, an async step tries to replace the URL with a better one and the sidebar updates when the result comes back.

The content script sends the list of image candidates back to the background, which forwards it to the sidebar.
The sidebar shows the list and can ask the background to probe each URL (HEAD/GET) to get MIME type and byte size so the UI can display it.
When you choose Download, Download as ZIP, or Convert, the background does the work:

Single download: delegates to the browser downloads API, using your naming/folder template
ZIP download: fetches selected images as blobs, packages them, downloads one zip
Convert: fetches the image, redraws it to an offscreen canvas, exports the chosen format, downloads it

So: content script = “what images are on this page?” Background = “probe them, download them, zip them, convert them.” Sidebar = “show the list, apply filters/sort, and send user actions to the background.”

Technical Details (Without the Fluff)

Think of the implementation as a few small modules that run in order.

Module 1: Image discovery (in the page)

The content script extracts image candidates from several places:

img tags (including srcset and common lazy-load attributes like data-src, data-srcset, data-original)
picture/source responsive sources
CSS backgrounds (background-image / background)
shadow DOM img elements
SVG elements
image-like links and input[type=image]
a small plugin layer that can also parse page HTML for known patterns on specific platforms

Module 2: Normalize + dedupe

Once URLs are collected, the extension:

Normalizes some URLs via site plugins (simple transforms like stripping/rewriting size parameters)
Deduplicates candidates so the same resource doesn’t appear repeatedly (including special handling for data: URLs)

Module 3: Metadata probing (in the background)

To display “what is this file?” in the UI, the sidebar can ask the background worker to probe a URL:

Try HEAD first (fast) to read Content-Type and Content-Length
Fall back to GET when needed to determine byte size

This is best-effort: servers can block, omit headers, or behave differently for HEAD.

Module 4: Downloading and exporting

When you click download actions, the background worker handles them:

Single download: uses the browser downloads API, applying your folder/name template
ZIP export: fetches selected images as blobs, writes them into a zip with per-file names, then downloads one .zip
Format conversion: fetch → decode → draw to OffscreenCanvas → export a new blob (PNG/JPG/WebP) → download

How It Stays Private

All logic runs inside the browser: in the content script (page context), in the background service worker, and in the extension’s own pages (sidebar, options, gallery). There is no backend server.

No proxying: image downloads go directly from your browser to the image host.
No accounts: nothing is uploaded to a third-party service.
Local settings: filters and naming templates are stored in browser storage.
No analytics layer: the extension doesn’t add tracking.

In practice: your list of images and your selections stay on your machine; the only network traffic is the browser fetching the images you choose.

DEV Community