GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - PixelCode01/YouTube-Screenshot-Helper-Extension: Take clutter-free screenshots with video controls automatically hidden. Save and organize captures into folders by channel, playlist, or video title for easy access

BranchesTags
Open more actions menu

Latest commit

 

History

16 Commits
16 Commits

Folders and files

NameName
Last commit message
Last commit date
chrome
chrome
 
 
edge
edge
 
 
firefox
firefox
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 

Repository files navigation

YouTube Screenshot Helper

Version License: MIT Chrome Extension

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:

Screenshot from 2025-06-22 20-26-14 Screenshot from 2025-06-22 20-26-31 Screenshot from 2025-06-22 20-26-40 Screenshot from 2025-06-22 20-26-49 Screenshot from 2025-06-22 20-26-55 Screenshot from 2025-06-22 20-27-01 Screenshot from 2025-06-22 20-27-07 Screenshot from 2025-06-22 20-27-07-1 Screenshot from 2025-06-22 20-27-11 Screenshot from 2025-06-22 20-27-27 Screenshot from 2025-06-22 20-27-31 Screenshot from 2025-06-22 20-27-36 Screenshot from 2025-06-22 20-34-40 Screenshot from 2025-06-22 20-34-51 Screenshot from 2025-06-22 20-35-16 Screenshot from 2025-06-22 20-35-52 Screenshot from 2025-06-22 20-35-53 Screenshot from 2025-06-22 20-36-35 Screenshot from 2025-06-22 20-36-41 Screenshot from 2025-06-22 20-36-46 Screenshot from 2025-06-22 20-36-49 Screenshot from 2025-06-22 20-36-56

License

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

About

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

Topics

extensionextension-chromehacktoberfestyoutube

Resources

Readme
MIT license
Activity

Stars

7 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.