DEV Community

Akshit Suthar
Akshit Suthar

Posted on

I Built a Chrome Extension That Captures YouTube Screenshots at Custom Intervals (Even 10+ Hour Videos)

#javascript #extensions #beginners #opensource

Ever wanted to automatically capture screenshots from a YouTube video every 10 seconds?

Or extract frames from a 3-hour lecture without manually pausing and screenshotting hundreds of times?

I built a Chrome extension to solve exactly that.

YouTube Screenshot Capture
Give Star To My Repo
GitHub: https://github.com/akshitsutharr/Youtube-Screen-capture

The Problem

Capturing screenshots manually from long YouTube videos is extremely inefficient:

  • Pause → Screenshot → Play → Repeat
  • No batch export
  • No timestamp organization
  • Hard to manage large videos
  • Impossible to scale for 2–10 hour content

For students, researchers, analysts, and creators — this wastes hours.

So I built a solution.

What It Does

This Chrome Extension allows you to:

  • Capture screenshots from any custom time range
  • Set intervals from 1 second to 1 hour
  • Automatically chunk videos longer than 1 hour
  • Download all images as ZIP files
  • Track progress in real time
  • Choose screenshot quality (High / Medium / Low)

All processing happens locally inside your browser.

No servers.
No data collection.
No API keys.

Key Features

Custom Time Range

Supports both formats:

  • MM:SS
  • HH:MM:SS

Example:

  • Start: 00:01:20
  • End: 00:09:23

Flexible Intervals

Capture screenshots every:

  • 1 second
  • 5 seconds
  • 10 seconds
  • 30 seconds
  • 1 minute
  • Up to 1 hour

Smart Chunking (Large Video Support)

For videos longer than 1 hour:

The extension automatically splits processing into 1-hour chunks to prevent:

  • Memory overflow
  • Browser crashes
  • Performance drops

This makes it capable of handling 10+ hour videos efficiently.

Bulk ZIP Download

Each capture session downloads:

  • All screenshots in JPEG format
  • Organized by timestamp
  • info.txt file with capture details

For long videos:
Multiple ZIP files are generated (one per hour chunk).

Real-Time Progress Tracking

You see:

  • Percentage completed
  • Screenshot count
  • Processing updates

No guessing. No silent processing.

How It Works (Technical Deep Dive)

Tech Stack

  • Manifest V3
  • Canvas API
  • JSZip
  • Chrome Storage API
  • Chrome Downloads API

Detecting the Video

The extension injects a content script that:

  • Detects the <video> element
  • Ensures it is playable
  • Controls playback programmatically

Seeking to Specific Timestamps

For each interval:

video.currentTime = timestamp;
Enter fullscreen mode Exit fullscreen mode

The extension waits for the seeked event before capturing.

Capturing Frames via Canvas API

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, width, height);
Enter fullscreen mode Exit fullscreen mode

Convert to JPEG:

canvas.toBlob(...)
Enter fullscreen mode Exit fullscreen mode

Intelligent Chunking Logic

To avoid memory crashes:

const CHUNK_DURATION = 3600; // 1 hour
Enter fullscreen mode Exit fullscreen mode

Each chunk:

  • Captures screenshots
  • Packages them into ZIP
  • Triggers download
  • Frees memory
  • Continues to next chunk

Performance Optimizations

During capture:

  • Video auto-mutes
  • Playback pauses for frame stability
  • UI updates are throttled
  • Object URLs are cleaned
  • Memory is released per chunk

Example benchmark:

360 screenshots ≈ 2–3 minutes

Privacy & Permissions

Permissions required:

  • activeTab
  • storage
  • downloads
  • host_permissions (only youtube.com)

Important:

  • No data leaves your browser
  • No tracking
  • No analytics
  • No external servers

Everything runs locally.

What I Learned Building This

This project helped me deeply understand:

  • Chrome Extension architecture (Manifest V3)
  • Content scripts vs background service workers
  • Canvas-based video frame rendering
  • Browser memory management
  • Large file processing inside the browser
  • Async UI state control

The hardest part?

Handling very large videos safely without crashing Chrome.

Chunking logic solved that.

Installation (Dev Mode)

  1. Clone repository
  2. Go to chrome://extensions
  3. Enable Developer Mode
  4. Click "Load Unpacked"
  5. Select project folder

Done.

Future Improvements

Planned ideas:

  • Chrome Web Store release
  • Preset capture profiles
  • Automatic keyframe detection
  • Video metadata export
  • PDF storyboard export

🤝 Contributions Welcome

If you're interested in:

  • Chrome extension development
  • Performance optimization
  • UI improvements
  • Feature additions

PRs are welcome.

🔗 GitHub:
https://github.com/akshitsutharr/Youtube-Screen-capture

🌟 Final Thoughts

This started as a small productivity tool.

But it turned into a deep dive into:

  • Browser APIs
  • Video processing
  • Performance en

📸 Screenshots

Main Extension UI Interval Selection
Main UI Interval Selection
Downloading Start Custom Button in Youtube for Single Capture
Downloading Start Custom Button in Youtube

Top comments (2)

Collapse
 
trinhcuong-ast profile image
Kai Alder •

The chunking approach for long videos is smart. I've run into similar memory issues doing canvas operations in a loop — Chrome just silently starts garbage collecting and everything gets sluggish. Splitting into 1-hour chunks with cleanup between is exactly the right call.

One thought on the keyframe detection you mentioned for future work — you might want to look into comparing canvas pixel data between consecutive frames (something like a simple SSIM or even just average RGB diff). That way you could skip frames where almost nothing changed, like when a lecturer is on the same slide for 5 minutes. Would cut the output size way down for lecture videos specifically.

Also curious — did you run into any CORS issues with YouTube's video element? I remember canvas.toBlob throwing security errors on some embedded players because of cross-origin restrictions.

Collapse
 
akshit_suthar profile image
Akshit Suthar •

Thanks a lot for the thoughtful feedback really appreciate it!

Yeah the chunking logic was born out of exactly that problem When I first tested long videos repeated canvas.drawImage() + blob creation in a loop would slowly make Chrome sluggish. Garbage collection would kick in unpredictably and memory would spike hard for multi-hour captures Splitting into 1-hour chunks, packaging into ZIP triggering download and explicitly releasing object URLs before continuing made things dramatically more stable for 10+ hour videos
Your suggestion about comparing canvas pixel data between consecutive frames is spot on. Right now the extension captures strictly on fixed intervals (based on user input) and keyframe detection is just a planned future improvement. Using something lightweight like average RGB diff or even a simplified SSIM to skip visually identical frames would be especially powerful for lecture-style content where slides stay static for minutes It would reduce ZIP size and processing time significantly
On the CORS side since the extension runs as a content script on youtube.com (with host permissions restricted to YouTube) I havent hit canvas.toBlob() security errors when drawing directly from the native