A Chrome extension that intercepts and downloads videos from websites, with special support for DASH streaming (separate audio+video) and automatic quality selection.
Frontend technologies
Code quality
Video processing tool
Build powered by
- HTTP Video Interception: Automatically detects video requests in the background
- DASH Streaming Support: Merges separate audio and video streams using FFmpeg
- Quality Selection: Automatically selects the highest quality available
- Video Preview: Shows thumbnail and duration for each video
- Filesize Display: Shows actual file size before downloading
- Search & Filter: Search by filename, duration, or filesize
- Sort by Size: Videos automatically sorted by filesize (largest first)
- Download Progress: Real-time progress for downloads with merge operations
- State Persistence: Videos persist across service worker restarts
- Auto-Cleanup: Automatically clears videos when navigating or reloading pages
The extension works with websites using:
- DASH Streaming: Automatic audio+video merge with quality selection
- Progressive MP4: Direct download with metadata extraction
- DRM-Protected Content: Cannot download protected content (Netflix, Disney+, etc.)
- Sites with aggressive CORS: Preview/duration extraction may fail (download still works)
- Platform Restrictions: Many platforms (YouTube, major social networks) have Terms of Service that prohibit video downloading
- Chrome 88+ or Edge 88+
- No special permissions required from websites
- ~30MB disk space (includes FFmpeg WebAssembly)
# Clone repository
git clone https://github.com/mattveraldi/downloadhelper.git
cd downloadhelper
# Install dependencies
npm install
# Build extension
npm run build
# Create distribution package
npm run package
# Code quality checks (optional)
npm run lint # Check for linting errors
npm run lint:fix # Auto-fix linting issues
npm run format # Format code with Prettier- Open
chrome://extensions/ - Enable "Developer mode" (toggle in top-right)
- Click "Load unpacked"
- Select the
dist/folder
- Navigate to a website with videos
- Click the extension icon in the toolbar
- Videos appear in the popup as they're detected
- Click "Scarica" (Download) to save a video
Videos with a red "DASH" badge have separate audio and video:
- Click download → Extension automatically:
- Loads FFmpeg (~30MB, first time only)
- Downloads video stream
- Downloads audio stream
- Merges them into a single MP4 file
- Triggers browser download
Progress is shown in real-time: "Loading FFmpeg..." → "Downloading..." → "Merging..."
Videos show quality badges when detected:
- Green badge:
1080p,720p,480p,360p- Standard resolution - Green badge:
FHD,HD,SD- Alternative quality labels
The extension automatically selects the highest quality available.
Use the search box to filter videos by:
- Filename: Type part of the video name
- Duration: Type
10:30to find 10-minute videos - Filesize: Type
150to find videos around 150MB
Videos are automatically sorted by filesize (largest first) to help identify high-quality downloads.
✅ Automatic Quality Selection: No manual selection needed, always gets best quality
✅ Browser-Based Merge: No external software required
✅ Privacy-Focused: All processing happens locally, no data sent to servers
✅ Universal Detection: Works on any website with compatible video formats
✅ Real-time Detection: Videos appear as you browse, no page refresh needed
❌ Large Bundle Size: ~30MB due to FFmpeg WebAssembly (downloaded once)
❌ DASH Merge Speed: Merging takes time for large videos (5-30 seconds)
❌ Memory Usage: Processing large videos (>500MB) requires significant RAM
❌ CORS Limitations: Some sites block preview/duration extraction
❌ DRM Content: Cannot download protected content (Netflix, Disney+, etc.)
- First DASH Download: Takes longer (~30s) to load FFmpeg WebAssembly
- Subsequent Downloads: Faster as FFmpeg is cached in memory
- Large Files: Videos over 1GB may cause browser slowdown during merge
- Background Processing: Service Worker may pause if inactive (Chrome limitation)
- HTTP-Only: Cannot intercept HTTPS traffic (Chrome security)
- Same-Origin: Cannot download cross-origin videos with strict CORS
- Ephemeral Storage: Video list clears when Service Worker restarts
- Quality Detection: Only works for platforms with quality metadata in URLs
src/
├── core/ # Pure TypeScript business logic
│ ├── types.ts # Type definitions
│ ├── utils.ts # Utility functions
│ ├── download.ts # Download logic with FFmpeg
│ ├── video-parser.ts # URL parsing
│ ├── video-store.ts # State management
│ └── chrome-api.ts # Chrome API wrappers
│
├── hooks/ # React hooks for state management
│ ├── useVideos.ts # Video list management
│ ├── useVideoMetadata.ts # Metadata extraction
│ └── useDownload.ts # Download state
│
├── components/ # React components
│ ├── VideoCard.tsx # Single video display
│ └── Metadata.tsx # Metadata extraction
│
├── background.ts # Service Worker - video detection
├── popup.tsx # Popup UI - video list
└── content.ts # Content script - page detection
public/
├── manifest.json # Extension configuration
├── *.html # UI pages
├── styles.css # Styling
└── ffmpeg-core/ # FFmpeg WebAssembly (~30MB)
- TState Persistence: Service worker restores video list from
chrome.storage.sessionon startup
- Auto-Cleanup:
chrome.webNavigation.onCommittedclears videos on page reload/navigation - Filesize Fetch: HEAD requests to get
Content-Lengthbefore download - Smart Merging: Popup preserves local metadata (preview/duration) when syncing with background
- Merge (DASH): FFmpeg merges streams:
ffmpeg -i video.mp4 -i audio.m4a -c copy output.mp4 - Download: Uses
chrome.downloads.downloadwith Blob URL
The project follows Clean Architecture principles with clear separation:
- Core Layer: Pure TypeScript business logic (framework-agnostic)
- Hooks Layer: React integration and state management
- Components Layer: Presentational React components
- Entrypoints: Thin glue for Chrome Extension + React
See ARCHITECTURE.md for detailed documentation.
- Chrome Manifest V3: Latest extension standard
npm run build # Production build
npm run dev # Watch mode for development
npm run package # Create distributable .zip- Detection:
chrome.webRequest.onCompletedintercepts HTTP responses withvideo/*oraudio/*MIME types - DASH Grouping: Extracts
video_idfrom URL parameters to group audio+video streams - Quality Comparison: Compares
bitratevalues, keeps highest quality version - Filesize Fetch: HEAD requests to get
Content-Lengthbefore download - Merge (DASH): FFmpeg merges streams:
ffmpeg -i video.mp4 -i audio.m4a -c copy output.mp4 - Download: Uses
chrome.downloads.downloadwith Blob URL
Contributions are welcome! Please read CONTRIBUTING.md for:
MIT License - See LICENSE file for details
- Some platforms send multiple quality versions - extension picks highest bitrate
- Sites with CORS restrictions may have preview extraction issues
- Large DASH videos (>1GB) may cause browser slowdown during merge
- Service Worker restart clears video list (Chrome Manifest V3 limitation)
IMPORTANT: This tool was developed and tested exclusively for educational purposes using the developer's own video content on social media platforms. The tool has been tested on Facebook and Instagram solely for the purpose of studying video streaming technologies (DASH, HLS) and browser extension development.
The use of this extension on social media platforms (Facebook, Instagram, YouTube, TikTok, etc.) violates their Terms of Service and is strongly discouraged. These platforms explicitly prohibit downloading content without permission.
Use this tool only:
- For downloading your own content from platforms where you hold the rights
- On websites where downloading is explicitly permitted
- For educational or archival purposes on content you own or have permission to download
The developers assume no responsibility for misuse of this tool. Users are solely responsible for ensuring their usage complies with applicable laws and platform Terms of Service.
Made with ❤️ by @mattveraldi