dvirlabs 8334ba5cc4 Create chrome extention

2026-04-20 00:08:24 +03:00

10 KiB

Raw Permalink Blame History

Yupoo Product Image Downloader - Chrome Extension

A powerful Manifest V3 Chrome extension that automatically downloads all product images from Yupoo-style gallery pages, organizing them by product into individual folders.

Features

✨ Automatic Product Detection - Scans gallery pages to find all product cards 🖼️ Complete Image Collection - Downloads all images from each product's detail page 📁 Organized Downloads - Creates one folder per product with numbered images 🔄 Retry Logic - Automatically retries failed downloads ⚙️ Concurrency Control - Limit simultaneous downloads to avoid overwhelming the server 🔀 Deduplication - Prevents downloading the same image twice in a session 📋 Progress Tracking - Real-time updates on scanning and downloading status 🛠️ Easy Customization - Simple selector configuration for different website structures ✅ Rate Limiting - Automatic delays between requests to be respectful to servers

Installation

1. Prepare the Extension

Clone or download this directory to your computer. You should have these files:

yupoo-downloader/
  ├── manifest.json
  ├── popup.html
  ├── popup.js
  ├── styles.css
  ├── background.js
  ├── content.js
  └── README.md

2. Load Extension in Chrome

Open Chrome and navigate to chrome://extensions/
Enable Developer mode (toggle in the top-right corner)
Click "Load unpacked"
Select the yupoo-downloader folder
The extension should now appear in your extensions list
Pin it to the toolbar for easy access (click the puzzle icon)

3. Grant Permissions

When you first use the extension, Chrome will ask for permissions:

Download files - Needed to save images
Access current tab - Needed to scan the page
Access all websites - Needed to fetch product detail pages

Click "Allow" to proceed.

Usage

Basic Workflow

Navigate to a Yupoo gallery page with products you want to download
Click the extension icon in your toolbar
Click "🔍 Scan Products" - The extension will find all products on the current page
Adjust settings if needed:
- Set "Max Concurrent Downloads" (1-10, default 2)
Click "⬇️ Download All" - Downloads will begin automatically
Monitor progress in the activity log and statistics
Downloads save to your browser's default download folder

Download Structure

Images are organized like this:

Downloads/
  ├── 3me10101430/
  │   ├── 01.jpg
  │   ├── 02.jpg
  │   └── 03.jpg
  ├── 3mf10083295/
  │   ├── 01.jpg
  │   ├── 02.jpg
  │   ├── 03.jpg
  │   └── 04.jpg
  └── product_001/
      ├── 01.jpg
      └── 02.jpg

Customization

The extension is designed to work with Yupoo and similar gallery sites, but websites vary in their HTML structure. You can customize the selectors to match your target website.

Editing CSS Selectors

For Gallery Page (Finding Products)

Edit the SELECTORS object in content.js (around line 15):

const SELECTORS = {
  // The container div for each product tile/card
  productCard: [
    'div.item',                    // Try these in order
    'div.product-item',
    'div.product-card',
    // Add more selectors that match your site
  ],
  
  // The link that goes to the product detail page
  productLink: [
    'a[href*="/item/"]',
    'a[href*="/product"]',
    // Add more link selectors
  ],
  
  // The visible product title/name
  productTitle: [
    '.product-name',
    '.product-title',
    'h3',
    // Add more title selectors
  ],
};

How to find the right selectors:

Open the website in Chrome
Right-click on a product card → "Inspect"
Look at the HTML structure
Copy the class names or tag names you see
Add them to the corresponding array in content.js

For Detail Page (Finding Images)

Edit the DETAIL_PAGE_SELECTORS object in background.js (around line 30):

const DETAIL_PAGE_SELECTORS = {
  // Container that holds all product images
  imageContainer: [
    'div.photo-list',
    'div.details-images',
    'div.gallery',
    // Add more container selectors
  ],
  
  // Individual image elements
  imageElements: [
    'img.photo',
    'img[class*="detail"]',
    'img',  // Fallback to all images
  ],
  
  // Links to large images
  imageLinks: [
    'a[href*=".jpg"]',
    'a[href*=".png"]',
  ],
};

Testing Your Selectors

For gallery page:
- Open DevTools (F12) on a gallery page
- Open the Console tab
- Paste: document.querySelectorAll('your-selector-here').length
- Should return > 0 if selector is correct
For detail page:
- Open DevTools on a product detail page
- Try: document.querySelectorAll('img').length
- Should show number of images on that page

Configuration Options

Edit the CONFIG object in background.js to adjust:

const CONFIG = {
  REQUEST_DELAY: 800,           // ms between requests (lower = faster but more load on server)
  RETRY_ATTEMPTS: 3,            // How many times to retry failed downloads
  RETRY_DELAY: 2000,            // ms to wait before retrying
  MAX_CONCURRENT_DOWNLOADS: 2,  // Can be overridden in UI (1-10)
  TIMEOUT: 30000,               // ms before request times out
};

Troubleshooting

"No products found"

Check the URL - make sure you're on a gallery page with product links
Verify selectors are correct:
- Right-click product card → Inspect
- Check if the selector matches the HTML
- Update SELECTORS in content.js
Check browser console (F12 → Console):
- Look for error messages
- Type: document.querySelectorAll('your-selector').length
- Should be > 0

Downloads not starting

Verify Chrome permissions:
- Go to chrome://extensions/
- Find "Yupoo Downloader"
- Click "Details"
- Check "Permissions" tab
Check Chrome's download settings:
- Go to chrome://settings/downloads
- Verify download location is accessible
- Disable "Ask where to save each file" option

Slow downloads

Increase MAX_CONCURRENT_DOWNLOADS in the popup (2-5 is usually good)
Decrease REQUEST_DELAY in background.js if the server allows
Check your internet connection

Getting 404 errors for images

The image URLs might be dynamic or time-limited
Check detail page selector:
- Open a product page in your browser
- F12 → Inspect the images
- Update DETAIL_PAGE_SELECTORS in background.js
The site might require headers:
- Add custom headers to fetchWithRetry() in background.js if needed

Extension stops working after Chrome update

Go to chrome://extensions/
Click "Update" or toggle off/on
If still broken, reload the extension:
- Remove it
- Reload this folder again

How It Works

1. Content Script (`content.js`)

Runs on the gallery page you're viewing
Finds all product cards/links using CSS selectors
Extracts product codes and detail page URLs
Sends data to the background worker

2. Popup UI (`popup.html`, `popup.js`, `styles.css`)

Shows "Scan Products" and "Download All" buttons
Displays real-time progress
Shows activity log
Allows concurrency adjustment

3. Background Service Worker (`background.js`)

Fetches each product's detail page
Parses the HTML to find all images
Downloads images using Chrome's downloads API
Manages concurrency queue
Handles retry logic and deduplication
Tracks progress and errors

Technical Details

Manifest V3

Uses service workers instead of background pages
Latest Chrome extension security model
Future-proof implementation

Downloads API

Uses chrome.downloads.download() with filename parameter
Automatically creates product folders
Works with browser's native download system

Content Security Policy

Safe from malicious scripts
Follows Chrome extension best practices
No external dependencies

Rate Limiting

800ms delay between requests (configurable)
Respects server resources
Can be adjusted for faster downloads

Performance Tips

Reduce concurrency on slow connections - Set to 1-2
Increase concurrency on fast connections - Set to 4-5 (but check server limits)
Decrease REQUEST_DELAY for faster downloads (but be respectful):
- 800ms (default) = 1.25 requests/sec
- 500ms = 2 requests/sec
- 300ms = 3.3 requests/sec
Close other Chrome tabs to free up bandwidth
Disable VPN/proxy if it's slowing things down

File Organization

popup.html              → User interface
popup.js                → UI logic and user interaction
styles.css              → Visual styling

content.js              → Page scanning (runs on website)
background.js           → Download orchestration (service worker)
manifest.json           → Extension configuration

README.md               → This file

Browser Support

Chrome 88+ (Manifest V3 support)
Edge 88+ (also based on Chromium)
Brave, Opera, and other Chromium-based browsers

Known Limitations

Does not work with infinite scroll pages (only scans initial visible products)
Some sites with JavaScript-rendered images may not work
Image watermarks are preserved as-is
Login-required sites need active session

Future Improvements

Handle infinite scroll pages
Support for lazy-loaded images
Filter by product category
Scheduling downloads
Export metadata (product names, links)
Resume incomplete downloads
Image quality selection

Legal Notice

This extension is for personal, non-commercial use only. Respect website ToS and copyright laws when downloading images. The author is not responsible for misuse.

License

MIT License - feel free to modify and distribute

Support

If you encounter issues:

Check the activity log in the popup for error messages
Open DevTools (F12) and check the Console tab
Verify CSS selectors for your target website
Try on a different gallery page to isolate the issue
Check that you have permission to download from the website

Happy downloading! 📸

10 KiB Raw Permalink Blame History