Menu

Post image 1
Post image 2
1 / 2
0

I built a Chrome extension that downloads every image on a page — here's what I learned about Shadow DOM, CSS backgrounds, and Manifest V3

DEV Community·kyriewen·26 days ago
#d75NGmfA
Reading 0:00
15s threshold

For three years I've kept a folder called _inspiration on my desktop, full of images I "saved as" while researching designs, products, or just browsing. About 60% of the time, "save image as" failed silently — the file would be a 1×1 transparent placeholder, or a low-res thumbnail, or just nothing because the image was a CSS background. I tried the popular image downloader extensions. They missed about half of what I wanted to save. They also bundled analytics. So I built my own, called Image Harvest . This post is the technical write-up I wished existed when I started. Three things tripped me up the most: Extracting images from Shadow DOM and CSS backgrounds Perceptual hashing in the browser without freezing the UI Surviving the Manifest V3 service worker lifecycle Code excerpts below are simplified for clarity. The shipping version handles a lot more edge cases. 1. The five places images actually hide on modern webpages document.querySelectorAll('img') catches maybe 50% of images on a typical 2026 webpage.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More