Author: Pricop Bogdan — bogdan.pricop@gmail.com

Version Chrome License

Pro Image Collector is an advanced Chrome extension for extracting, filtering, editing, and bulk-downloading images and public video media from any webpage. Built for designers, developers, and OSINT researchers, it goes beyond simple downloading — offering analysis tools (Google Lens, TinEye), a full image editor, ZIP export, automatic conversion, and file organization.

Main Screenshot (Note: main form only)

• Deep Scan: Detects standard <img> tags, CSS background images (background-image), srcset attributes, <video poster>, direct video sources, video links, common video data attributes, and video URLs embedded in page metadata.
• Lazy Loading & Dynamic Content: A MutationObserver automatically detects new media added dynamically to the page.
• Smart Linking: Detects whether an image is a link to a product/article page and provides a dedicated navigation button.

• Google Lens Integration: Reverse visual search directly from the popup to find similar products or translations.
• TinEye Integration: Verify the original source of an image or check copyright.
• Smart Filters: Advanced filtering by dimensions (width/height), file type (JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO, MP4, WebM, MOV, M4V, OGV, HLS, DASH), and text (search in URL or alt attribute).

• Crop: Percentage-based edge cropping.
• Resize: Scale to any percentage.
• Flip & Rotate: Horizontal mirror and 90° rotation (applied to the actual canvas, not just CSS).
• Noise: Add random grain/noise.
• Color Shift: Adjust hue and saturation.
• Obfuscate: Subtle blur + sharpen to alter pixel data.
• Re-JPEG: JPEG recompression at configurable quality.
• Magic Cascade: One click applies all transformations in sequence.
• Undo/Redo: Stack of up to 20 states (Ctrl+Z).
• Export Format: Choose between PNG, JPG, or WebP for download.

• Individual Download: Download each image separately (classic mode).
• ZIP Download: Check "ZIP" to download all selected images in a single .zip file.
• WebP to PNG/JPG Converter: Automatic conversion on download for maximum compatibility.
• Public Video Download: Download direct public video URLs such as .mp4, .webm, .mov, .m4v, and .ogv.
• Stream Detection: Detect HLS/DASH manifests (.m3u8, .mpd) and download/copy the manifest URL; segmented or DRM-protected streams are not assembled.
• Organization: Save to dedicated subfolders and auto-rename files (e.g., Vacation_001.jpg).
• Progress Bar: Real-time progress bar with counter during download.

• Drag Select: Drag the mouse over the grid for quick selection (Ctrl+drag = toggle).
• Keyboard Shortcuts: Ctrl+A select all, Ctrl+D download, Ctrl+Z undo, Esc close editor.
• Copy URL: Copy an image URL to clipboard with a single click.
• Grid Slider: Adjust the number of columns (3–8) in the grid.
• Persistent Settings: Filters and preferences are saved automatically between sessions.

• Optimized design for Chrome's maximum allowed popup width (800px).
• Quick action bar on each thumbnail with tooltips.
• Real-time status bar (Found | Shown | Selected).
• Informative empty state when no images are found.
• Full keyboard accessibility with focus-visible styles.

1. Go to the extension page on the Chrome Web Store.
2. Click "Add to Chrome".
3. Done!

1. Download the code: Clone this repository or download the ZIP archive and extract it.
2. Build a clean extension folder: Run npm install, then npm run build:extension.
3. Open Chrome/Edge: Navigate to chrome://extensions/ or edge://extensions/.
4. Enable Developer Mode: Toggle the switch in the top-right corner.
5. Load the extension:
   • Click "Load unpacked".
   • Select dist/edge-extension.
6. Done! The extension should appear in your toolbar.

Do not load the repository root after running npm install; node_modules contains development-only folders that Chromium-based browsers reserve for internal use.

• Min Size: Set minimum dimensions to exclude small icons (e.g., 50x50).
• Types: Check which formats you want to see (JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO, MP4, WebM, MOV, M4V, OGV, HLS, DASH).
• WebP2: Check to automatically convert .webp images to .png or .jpg on download.
• Rescan: Press if you've scrolled on a dynamic page (e.g., Instagram) to find new media.

• Filter: Type a keyword (e.g., "shoe") to show only images containing that text in their name or description.
• Folder: Enter a folder name (e.g., Projects/Design) where images will be saved in Downloads.
• Rename: File prefix (e.g., img will generate img_001.jpg, img_002.jpg).

• Grid Slider: Slide to adjust the number of columns (3–8).
• ZIP: Check to download all selected images as a single ZIP file. Selected videos are downloaded individually because large video ZIP creation depends on cross-origin fetch access.
• Export Format: Choose the export format for edited images (PNG/JPG/WebP).

Hover over an image to reveal the action bar:

• View: Open full image in a new tab.
• Link: Go to the product page (if a link exists).
• Lens: Search with Google Lens.
• TinEye: Search with TinEye.
• Copy URL: Copy the image URL to clipboard.
• Editor: Open the image editor.

Video cards use a smaller action set:

• View: Open the video or stream manifest in a new tab.
• Link: Go to the linked page if one exists.
• Copy URL: Copy the detected video URL.
• Download: Download direct video files, or the manifest for HLS/DASH streams.

/
├── manifest.json # Extension configuration (Manifest V3)
├── scripts/ # Build helper scripts
├── tests/ # Jest test suite
├── popup.html # User interface (UI)
├── popup.css # Styles (extracted separately)
├── popup.js # Main logic (filtering, download, editor, ZIP)
├── content.js # Injected script for DOM extraction + MutationObserver
├── utils.js # Pure utility functions (testable)
├── jszip.min.js # JSZip library for ZIP downloads
├── LICENSE # MIT license
├── PRIVACY.md # Privacy policy
├── store-description.txt # Chrome Web Store description
├── icon16.png # Icon 16x16
├── icon48.png # Icon 48x48
└── icon128.png # Icon 128x128

This extension does NOT collect, transmit, or store any personal data. All processing happens locally in your browser. See PRIVACY.md for details.

• Major rewrite with security fixes and new features
• Fix image deduplication (Set → Map)
• Fix XSS vulnerability (programmatic DOM construction)
• Fix real canvas rotation (not just CSS)
• Fix selectAll now respects all active filters
• Added ZIP download (JSZip)
• Added drag-to-select on grid
• Added MutationObserver for dynamic pages
• Added persistent settings (chrome.storage)
• Added keyboard shortcuts (Ctrl+A/D/Z, Esc)
• Added undo/redo in editor (20 states)
• Added copy URL, export format, grid slider
• Added download progress bar
• Added empty state, tooltips, accessibility (ARIA, focus styles)
• Extracted CSS into separate file
• Added explicit Content Security Policy
• Support for srcset, video poster, GIF
• Added public media request capture for platform blob players

• Image editor with Crop, Resize, Flip, Noise, Color, Obfuscate, Re-JPEG
• Magic Cascade
• Google Lens & TinEye integration
• WebP to PNG/JPG conversion

MIT License — see the LICENSE file for details.

Autor: Pricop Bogdan — bogdan.pricop@gmail.com

Version Chrome License

Pro Image Collector este o extensie Chrome avansata pentru extragerea, filtrarea, editarea si descarcarea imaginilor si media video publice in masa. Gandita pentru designeri, dezvoltatori si cercetare OSINT, aceasta extensie merge dincolo de simpla descarcare, oferind instrumente de analiza (Google Lens, TinEye), editor de imagini complet, descarcare ZIP, conversie automata si organizare a fisierelor.

Screenshot Principal (Nota: doar main form)

• Deep Scan: Detecteaza imagini standard <img>, imagini de fundal CSS (background-image), srcset, <video poster>, surse video directe, linkuri video, atribute video uzuale si URL-uri video din metadata paginii.
• Lazy Loading & Dynamic Content: MutationObserver detecteaza automat media noua adaugata dinamic pe pagina.
• Smart Linking: Detecteaza daca o imagine este un link catre un produs/articol si ofera un buton dedicat pentru navigare.

• Google Lens Integration: Cautare vizuala inversa direct din popup pentru a gasi produse similare sau traduceri.
• TinEye Integration: Verifica sursa originala a imaginii sau drepturile de autor.
• Smart Filters: Filtrare avansata dupa dimensiuni (latime/inaltime), tip fisier (JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO, MP4, WebM, MOV, M4V, OGV, HLS, DASH) si text (cautare in URL sau atributul alt).

• Crop: Decupare procentuala a marginilor.
• Resize: Scalare la orice procent.
• Flip & Rotate: Oglindire orizontala si rotire 90° (se aplica real pe canvas, nu doar vizual).
• Noise: Adauga grain/zgomot aleatoriu.
• Color Shift: Modifica nuanta si saturatia.
• Obfuscate: Blur subtil + sharpen pentru alterarea pixelilor.
• Re-JPEG: Recompresie JPEG la calitate configurabila.
• Magic Cascade: Un singur click aplica toate transformarile in secventa.
• Undo/Redo: Stack de pana la 20 stari (Ctrl+Z).
• Export Format: Alege intre PNG, JPG sau WebP la descarcare.

• Download Individual: Descarca fiecare imagine separat (modul clasic).
• Download ZIP: Bifeaza "ZIP" pentru a descarca toate imaginile selectate intr-un singur fisier .zip.
• WebP to PNG/JPG Converter: Conversie automata la descarcare pentru compatibilitate maxima.
• Descarcare Video Public: Descarca URL-uri video publice directe, precum .mp4, .webm, .mov, .m4v si .ogv.
• Detectie Stream: Detecteaza manifesturi HLS/DASH (.m3u8, .mpd) si permite descarcarea/copierea manifestului; stream-urile segmentate sau protejate DRM nu sunt asamblate.
• Organizare: Salvare in sub-foldere dedicate si redenumire automata a fisierelor (ex: Vacanta_001.jpg).
• Progress Bar: Bara de progres reala cu contor la descarcare.

• Drag Select: Trage mouse-ul peste grid pentru selectie rapida (Ctrl+drag = toggle).
• Keyboard Shortcuts: Ctrl+A select all, Ctrl+D download, Ctrl+Z undo, Esc close editor.
• Copy URL: Copiaza URL-ul imaginii in clipboard dintr-un singur click.
• Grid Slider: Ajusteaza numarul de coloane (3-8) din grid.
• Setari Persistente: Filtrele si preferintele se salveaza automat intre sesiuni.

• Design optimizat pentru latimea maxima permisa de Chrome (800px).
• Bara de actiuni rapida (Action Bar) pe fiecare thumbnail cu tooltips.
• Bara de status in timp real (Found | Shown | Selected).
• Empty state cu mesaj informativ cand nu sunt imagini.
• Accesibilitate completa cu stiluri focus-visible si atribute ARIA.

1. Mergi la pagina extensiei pe Chrome Web Store.
2. Apasa "Add to Chrome".
3. Gata!

1. Descarca codul: Cloneaza acest repository sau descarca arhiva ZIP si dezarhiveaz-o.
2. Construieste folderul curat al extensiei: Ruleaza npm install, apoi npm run build:extension.
3. Deschide Chrome/Edge: Mergi la chrome://extensions/ sau edge://extensions/.
4. Activeaza Developer Mode: Bifeaza comutatorul din coltul dreapta-sus ("Developer mode").
5. Incarca extensia:
   • Apasa butonul "Load unpacked".
   • Selecteaza dist/edge-extension.
6. Gata! Extensia ar trebui sa apara in bara ta de instrumente.

Nu incarca root-ul repository-ului dupa npm install; node_modules contine directoare de development rezervate de browserele bazate pe Chromium.

• Min Size: Seteaza dimensiunile minime pentru a exclude iconitele mici (ex: 50x50).
• Tipuri: Bifeaza ce formate vrei sa vezi (JPG, PNG, WebP, SVG, GIF, AVIF, BMP, ICO, MP4, WebM, MOV, M4V, OGV, HLS, DASH).
• WebP2: Bifeaza pentru a converti automat imaginile .webp in .png sau .jpg la descarcare.
• Rescan: Apasa daca ai dat scroll pe o pagina dinamica (ex: Instagram) pentru a gasi media noua.

• Filter: Scrie un cuvant (ex: "pantof") pentru a afisa doar imaginile care contin acel text in nume sau descriere.
• Folder: Scrie numele folderului (ex: Proiecte/Design) unde vrei sa se salveze imaginile in Downloads.
• Rename: Prefix pentru fisiere (ex: img va genera img_001.jpg, img_002.jpg).

• Grid Slider: Gliseaza pentru a ajusta numarul de coloane (3-8).
• ZIP: Bifeaza pentru a descarca toate imaginile selectate ca un singur fisier ZIP. Video-urile selectate se descarca individual, deoarece ZIP-ul video depinde de acces fetch cross-origin si poate implica fisiere mari.
• Export Format: Alege formatul de export pentru imaginile editate (PNG/JPG/WebP).

Cand treci cu mouse-ul peste o imagine, apare bara de actiuni:

• View: Deschide imaginea in tab nou.
• Link: Merge la pagina produsului (daca exista link).
• Lens: Cauta cu Google Lens.
• TinEye: Cauta cu TinEye.
• Copy URL: Copiaza URL-ul imaginii.
• Editor: Deschide editorul de imagini.

Cardurile video au actiuni potrivite pentru video:

• View: Deschide video-ul sau manifestul de stream intr-un tab nou.
• Link: Merge la pagina asociata daca exista.
• Copy URL: Copiaza URL-ul video detectat.
• Download: Descarca fisiere video directe sau manifestul pentru stream-uri HLS/DASH.

Extensia NU colecteaza, transmite sau stocheaza date personale. Toate operatiunile au loc local in browser. Vezi PRIVACY.md pentru detalii.

MIT License — vezi fisierul LICENSE pentru detalii.