PicPicker - Universal Image Extractor

A powerful browser extension that extracts all images from any webpage with one click. Works universally on any website - no domain restrictions. Extract images from img tags, CSS backgrounds, SVG elements, video posters, and even lazy-loaded content.

🌐 Universal - Works on ANY website (Pinterest, Instagram, news sites, etc.)
🔍 Comprehensive - Extracts from img tags, backgrounds, SVG, video posters, srcset, data-* attributes
👁️ Viewport Detection - Shows which images were visible when extracted
🎯 Advanced Selection - Shift+Click ranges, Ctrl+Click toggle, select all/none
⚡ Burst Downloads - Download multiple selected images simultaneously
🔍 Text Search - Search alt text when enabled
⚙️ Customizable - Filter by size, format, source type, visibility
🎨 Modern UI - Responsive grid, lightbox preview, hover tooltips

🛡️ "On Click" Permissions - Only runs when you explicitly activate it
🚫 No Background Monitoring - Cannot read websites unless you click the extension
📱 Local Processing - All image data stays in your browser
🔐 No Data Collection - No analytics, tracking, or external servers
⚡ Instant Access - No account required, works offline

Clean popup interface with extraction settings - minimum size, backgrounds, SVG, alt text options

Responsive image grid with filtering, sorting, and bulk selection features

Full-size image preview with metadata, download, and copy URL options

1. Download from Chrome Web Store (coming soon)
2. Or build from source (see Development section)

1. Visit any website with images (works everywhere!)
2. Click the extension icon or use Ctrl+Shift+I
3. Choose extraction settings - size filters, backgrounds, alt text
4. Click "Extract Images" - opens new tab with all found images
5. Filter, select, and download - use the powerful grid interface

• 🖼️ IMG tags - Standard <img src=""> elements
• 🎨 CSS Backgrounds - background-image properties
• 🎭 SVG Graphics - Converted to downloadable formats
• 🎬 Video Posters - Thumbnail images from <video poster="">
• 📱 Responsive Images - srcset attributes with multiple resolutions
• 🔄 Lazy Loading - data-src, data-original, and 16+ data-* patterns
• 👁️ Viewport Detection - Tracks which images were visible during extraction

# Clone and install dependencies
  git clone https://github.com/flesler/picpicker
  cd picpicker
  npm install
  
  # Run full test suite and build
  npm run prepack

1. Open chrome://extensions/
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select the dist/ folder (NOT project root)

src/
  ├── background.ts # Service worker - tab management, session storage
  ├── content.ts # DOM scanner - extracts images from any webpage
  ├── popup.ts # Settings interface - filters, extraction options
  ├── results.ts # Results page - grid display, filtering, downloads
  ├── types.ts # TypeScript interfaces for images and settings
  ├── utils.ts # Shared utilities - logging, storage, helpers
  └── public/
  ├── manifest.json # Extension manifest (universal domain support)
  ├── popup.html # Settings popup UI
  ├── results.html # Image grid results page
  └── icons/ # Extension icons (16px, 48px, 128px)
  

• "activeTab" permissions - Only access when user explicitly clicks
• Dynamic injection - Content script loaded only when needed
• No persistent monitoring - Cannot read websites in background
• Session-based data - Image data cleared when results tab closes

• No restrictions - Works on any website when activated
• Cross-browser - Chrome + Firefox support via webextension-polyfill
• Manifest V3 - Modern service worker architecture

• DOM Scanner - querySelectorAll('*') for comprehensive coverage
• Multi-source - IMG tags, CSS backgrounds, SVG, video posters
• Advanced parsing - srcset attributes, data-* lazy loading patterns
• Performance optimized - Short JSON keys, efficient filtering

Content Script → Background → Results Tab
      ↓ ↓ ↓
      DOM Scanning → Session Storage → Grid Display
      

• In-memory sessions - No persistent storage of image data
• Message passing - Avoids URL length limits for large datasets
• One-time access - Session deleted after results tab loads

• Size Filters - Minimum width/height (50px, 100px, 200px)
• Source Types - IMG tags, backgrounds, SVG, video posters
• Alt Text - Optional extraction for search/tooltips (off by default)
• Performance - Max images per page, extraction timeout

• Filtering - Format, size, source type, viewport visibility
• Text Search - Alt text search (when enabled)
• Selection Modes - Click, Shift+Click ranges, Ctrl+Click toggle
• Downloads - Individual images or burst download multiple selections
• Lightbox - Full-size preview with metadata

• Ctrl+Shift+I - Quick image extraction from any page

• Strict type checking with webextension-polyfill types
• Zero any types - Comprehensive interface coverage
• ES2022+ features - Modern JavaScript with full browser support

• tsup + esbuild - Fast, modern bundling with tree-shaking
• Cross-browser builds - Chrome/Firefox from single codebase
• Dynamic manifest - Version sync from package.json
• Source maps - Full debugging support in development

• ESLint + TypeScript - Strict linting with custom rules
• Consistent patterns - DRY utilities, centralized logging
• Performance focused - Optimized JSON payloads, efficient DOM scanning

• Type safety - Comprehensive interfaces prevent runtime errors
• Lint validation - npm run lint:full catches issues early
• Build verification - npm run prepack ensures release readiness

MIT License - Feel free to fork and modify for your image extraction needs!