Download videos from any website with one click. Supports streaming sites, HTML5 video, HLS, DASH, and more.
- Click the green Code button above → Download ZIP
- Extract the ZIP file to a folder on your computer
You need Node.js installed (download the LTS version).
Open a terminal/command prompt in the extracted folder and run:
npm install
npm run buildThis creates a dist/ folder — that's your extension.
- Open your browser and go to:
- Chrome:
chrome://extensions - Edge:
edge://extensions
- Chrome:
- Turn on Developer mode (toggle in the top-right corner)
- Click Load unpacked
- Select the
dist/folder from Step 2
✅ You should see the Video Downloader icon in your toolbar!
- Go to any website with a video (e.g., a streaming site, news site, social media)
- Play the video on the page
- Click the extension icon (play button with download arrow) in your toolbar
- You'll see a list of detected videos with a Save button next to each
- Click Save — a progress bar shows the download status
- When complete, you'll be prompted to save the file
| Badge | Meaning |
|---|---|
| 🟦 HLS | Streaming video (most common on streaming sites) — fully downloaded and merged for you |
| 🟩 Direct | Standard video file (MP4, WebM) — downloads directly |
| 🟨 Blob | In-memory video — auto-falls back to the HLS stream |
| 🟪 Embed | Embedded player (YouTube, Vimeo) — opens the video page |
- 📺 Best quality: Click Save on the master.m3u8 entry — it automatically picks the highest quality
- ⏳ Large files: Streaming video downloads take time (progress bar shows status). Keep the popup open to see progress.
- 🔄 No videos found? Try clicking Refresh (↻) after the video starts playing
- 📂 File format: Videos save as
.mp4. If your default player can't open it, use VLC Media Player (free)
- 🔍 Auto-detection — Finds videos automatically using three detection layers
- 📺 Streaming support — Downloads HLS (.m3u8) and DASH (.mpd) streams
- 📊 Progress bar — Real-time download progress with segment count and file size
- 🔄 Smart retry — Automatically retries on network errors with backoff
- 🎯 Deduplication — No duplicate entries for the same video
- 🔢 Badge counter — Shows detected video count on the extension icon
- 🎨 Modern UI — Clean dark-themed popup
- 🔒 Privacy-first — No data collection, no tracking, no external API calls
- 📦 No dependencies — Everything runs locally in your browser
The extension uses a three-layer detection architecture:
| Layer | Component | Detects |
|---|---|---|
| Network | Background service worker | Video content-types in HTTP headers, URL patterns |
| DOM | Content script | <video> elements, <source> tags, embedded iframes |
| Page Context | Injected script | fetch/XHR intercepted video URLs, blob URLs |
┌─────────────────────────────────────────────────┐
│ Extension Popup │
│ (video list + progress bars + download) │
└──────────────────┬──────────────────────────────┘
│ chrome.runtime messages
┌──────────────────▼──────────────────────────────┐
│ Background Service Worker │
│ • Network interception (webRequest API) │
│ • HLS segment download + merge │
│ • State management (chrome.storage.session) │
│ • Download orchestration (chrome.downloads) │
│ • Progress broadcasting │
└──────────┬──────────────────────────┬───────────┘
│ │
┌──────────▼──────────┐ ┌─────────▼───────────┐
│ Content Script │ │ Injected Script │
│ • DOM scanning │◄──┤ • fetch intercept │
│ • MutationObserver │ │ • XHR intercept │
│ • iframe detection │ │ • blob URL capture │
└─────────────────────┘ └─────────────────────┘
git clone https://github.com/bhanuprakash-1/VideoDownloader.git
cd VideoDownloader
npm install
npm run dev # Watch mode — auto-rebuilds on changes
npm run build # Production build (minified)
npm run build:dev # Development build with source maps
npm run typecheck # TypeScript type checkingVideoDownloader/
├── .github/ # AI instructions, agents, skills
│ ├── copilot-instructions.md # Coding standards for Copilot
│ ├── agents/ # Agent personas (dev, test)
│ ├── skills/ # Domain knowledge
│ └── instructions/ # Path-specific coding rules
├── src/
│ ├── manifest.json # Extension manifest (MV3)
│ ├── background/service-worker.ts # Network interception + downloads
│ ├── content/content.ts # DOM scanning
│ ├── content/injected.ts # Page-context interception
│ ├── popup/ # UI (HTML + CSS + TS)
│ ├── offscreen/ # Large file download helper
│ ├── utils/ # HLS/DASH parsers, helpers
│ └── types/index.ts # Shared TypeScript types
├── tests/ # E2E tests and fixtures
├── AGENTS.md # AI agent instructions
└── dist/ # Build output → load as extension
- Check network patterns → add to
src/background/service-worker.ts - Check DOM structure → add selectors to
src/content/content.ts - Update types if needed →
src/types/index.ts - Rebuild:
npm run build:dev
This project is set up for AI-assisted development with GitHub Copilot:
- AGENTS.md — Full project context for Copilot coding agent
- .github/copilot-instructions.md — Coding standards
- .github/agents/ — Dev and test agent personas
- .github/skills/ — Chrome extension, video detection, E2E testing knowledge
- .github/instructions/ — Path-specific coding rules
- .vscode/mcp.json — Playwright MCP for E2E testing
MIT — see LICENSE for details.
This extension is provided for educational and personal use. Respect copyright laws and the terms of service of the websites you visit. The developers are not responsible for misuse of this tool.