YouTube Screenshot Helper

Take clutter-free screenshots with video controls automatically hidden. Save and organize captures into folders by channel, playlist, or video title for easy access.

Overview

A browser extension that hides player controls, captures the current frame, and stores the result locally or in connected cloud storage. It includes configurable shortcuts, optional previews, and per-site enablement to fit most workflows without cluttering the UI.

Key Capabilities

• One-tap capture from the popup, keyboard shortcut, or fullscreen overlay
• Optional hiding of on-screen controls before capture
• Templated filenames and optional folder organization inside Downloads
• Optional annotation workflow with drawing tools, text, and undo/redo
• Google Drive and OneDrive upload flows (Chromium-based browsers)
• Configurable screenshot quality, capture delay, and notification behavior

Installation

Chrome (manual install)

1. Clone or download the repository and extract it locally.
2. Open chrome://extensions and enable Developer Mode.
3. Choose Load unpacked and select the chrome directory inside this repo.

Microsoft Edge

• Install from Microsoft Edge Add-ons, or load the edge directory using the same Developer Mode flow as Chrome.

Heads-up: The Edge Add-ons store still serves an older build with known bugs. A fixed release is pending review by Microsoft; use the unpacked install above for the latest code until the listing updates.

Firefox (temporary load)

1. Open about:debugging#/runtime/this-firefox.
2. Click Load Temporary Add-on and choose firefox/manifest.json.
3. Repeat after browser restarts unless the build is signed through AMO.

• Install from Firefox Add-ons.

Heads-up: Mozilla Add-ons currently hosts an outdated build with bugs. A corrected version is awaiting AMO review; prefer the temporary load flow above until the listing is refreshed.

Firefox uses a Manifest V2 background page. Cloud uploads remain disabled until browser.identity supports Manifest V3 OAuth flows.

Daily Use

1. Navigate to any supported video site (YouTube, Vimeo, Twitch, or your configured custom domains).
2. Start playback.
3. Capture a frame by:
   • Pressing the configured shortcut (defaults to Ctrl+Shift+S or Shift+Enter in fullscreen).
   • Clicking the extension icon and choosing Capture Screenshot.
   • Using the fullscreen overlay action if the popup is pinned.

The extension pauses the video if necessary, hides controls when configured, captures the frame, then resumes playback and restores the UI.

Configuration Highlights

• Screenshot quality and delay: Adjust JPEG/PNG quality and debounce capture on slower hardware.
• Auto-hide controls: Toggle per site to ensure overlays are hidden before capture.
• Folder organization: Select built-in patterns or create templates such as {channel}/{date}. Chromium browsers support nested folders; Edge may fall back to simplified paths.
• Filename variables: Insert title, channel, playlist, timestamp, site, date, or time tokens.
• Annotation mode: Enable an editable preview with drawing, text, crop, and undo actions. Final output can be saved locally or uploaded to configured cloud targets.
• Notifications and silent downloads: Control download shelf visibility and toast notifications per capture.

Cloud Upload Setup

Configure credentials in utils/cloudConfig.js for each browser bundle:

window.CLOUD_CONFIG = {
  GOOGLE_DRIVE_CLIENT_ID: 'replace-with-client-id',
  ONEDRIVE_CLIENT_ID: 'replace-with-client-id',
  GOOGLE_DRIVE: {
    scopes: ['https://www.googleapis.com/auth/drive.file']
  },
  ONEDRIVE: {
    scopes: ['Files.ReadWrite']
  }
};

Chromium builds rely on chrome.identity.getRedirectURL() for OAuth redirects. Firefox currently disables the identity-based paths. Store secrets outside the repository and inject them during packaging.

Supported Permissions

• activeTab for capturing the current page
• downloads for saving frames and managing optional silent mode
• notifications for capture results
• scripting for injecting capture scripts
• storage for user preferences
• identity (Chromium only) for OAuth-powered cloud uploads

Troubleshooting

Issue	Possible cause	Recommended action
Video not detected	Player loads slowly or uses a custom wrapper	Wait for playback to start, then retry. Add the domain under custom sites if needed.
Blank captures	Hardware acceleration or DRM blocking	Disable hardware acceleration temporarily or capture in fullscreen.
Shortcut conflicts	Page or browser reserves the key combination	Change shortcuts in the options page or use the popup capture button.
Edge folder templates ignored	Edge restricts complex download paths	Use simple templates or rely on filenames only.
Firefox lacks cloud uploads	browser.identity OAuth flow unavailable	Enable cloud uploads only in Chromium-based builds until APIs stabilize.

Enable debug mode from Settings > Advanced to expose detailed console logging when investigating capture or download issues.

Developer Notes

• chrome/, edge/, and firefox/ contain browser-specific manifests while sharing core logic across content, background, popup, options, and utils directories.
• The build scripts are placeholders; add bundling, linting, or packaging steps as needed for your workflow.
• Empty folders such as scripts/ are safe to remove if unused.

Media Gallery

The repository hosts annotated screenshots that illustrate the popup UI, settings, and annotation workflow:

License

This project is licensed under the MIT License. See the LICENSE file for details.