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.

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.

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

For Google Drive and OneDrive integration:

1. Create OAuth credentials through the respective cloud provider's developer console:

   • Google Drive: Google Cloud Console
   • OneDrive: Azure Portal

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

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

Chromium builds use chrome.identity.getRedirectURL() for OAuth redirects. Firefox currently disables identity-based cloud upload paths due to API limitations.

Supported Permissions

• activeTab: Captures the current page content
• downloads: Saves screenshot files and manages download behavior
• notifications: Displays capture result notifications
• scripting: Injects capture scripts into video pages
• storage: Stores user preferences and settings
• identity: (Chromium only) Enables OAuth-based cloud uploads

All permissions are necessary for core functionality. No user data is transmitted to external servers except when explicitly using cloud upload features.

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.

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.