Media
1 item
Description
Take HD screenshots, skip frames, boost volume up to 400%, and control playback speed on YouTube, Vimeo, and any HTML5 video. # VideoForge A Manifest V3 Chrome extension that adds an HD screenshot tool, skip controls, a volume booster (up to 400%), and playback speed control (up to 4x) to YouTube, Vimeo, and any page with an HTML5 `<video>` element. ## What's new in v1.1 - Volume and speed buttons on the player toolbar now open a real dropdown, positioned with `position: fixed` and appended to `<html>` instead of living inside the toolbar's own box. The previous version nested the dropdown inside the toolbar, and some players (YouTube's included) clip absolutely-positioned descendants with `overflow: hidden`, which could make the dropdown open but stay invisible. This version can't be clipped that way. - Playback speed now goes up to native 4x everywhere (toolbar, popup, and the Options default-speed field all previously topped out at 2x in a couple of places). - The popup's "Keyboard shortcuts" panel is a real collapse/expand control now (CSS grid-row animation) and starts collapsed. - Screenshot filenames truncate only the `{title}` portion to a configurable length (60 characters by default) — the timestamp and date are never cut, and you won't get a truncated whole filename anymore. - Full dark/light theme support in the popup, Options page, and the on-player toolbar, either following your OS setting automatically or pinned to Dark/Light in Options → Appearance. - Every feature toggle is now exposed in Options → General (Picture-in- Picture, A/B loop, auto-hide toolbar, wheel shortcuts, toasts, screenshot preview, etc.) — previously a few were hardcoded on. - A "Save & Sync" tab lets you turn permanent saving off: changes still apply immediately to open tabs, but nothing is written to disk, and a page reload (or browser restart) reverts every setting back to its last saved value. The on/off choice itself is always remembered. ## Install (unpacked, for testing / before publishing) 1. Open `chrome://extensions`. 2. Turn on **Developer mode** (top right). 3. Click **Load unpacked** and select this folder (`video-master/`). 4. Open any video page — a small floating toolbar appears over the top-right corner of the player. ## Features included - **HD Screenshot** — captures the current video frame at full source resolution (not a screen grab of the browser UI), downloads as PNG/JPG/WebP, shows a preview card with a "copy to clipboard" button, and has a customizable filename template (`{title}`, `{timestamp}`, `{date}`). - **Skip controls** — back/forward 5s and 10s buttons plus keyboard shortcuts. - **Volume booster** — 100/125/150/200/300/400% via the Web Audio API (`GainNode`), so it can push past the native `<video>` volume ceiling. - **Playback speed** — 0.25x to 4x in the standard step list, with increase/decrease/reset shortcuts and per-website memory. - **Universal detection** — a `MutationObserver` finds any video added to the page (including SPA navigations on YouTube) and skips tiny/hidden elements (e.g. ad thumbnails). - **Right-click context menu** on any video for all of the above. - **Popup** with quick controls + a live shortcut reference. - **Options page** to toggle each feature, set defaults, change the screenshot format/quality/filename template, and remap every keyboard shortcut by clicking the field and pressing a new combo. - **Extras included**: Picture-in-Picture toggle, A/B loop (click the loop icon twice to mark start/end), Ctrl/Cmd+Scroll to change speed, Shift+Scroll to change volume boost, auto-hide toolbar after a few seconds idle, toast notifications, screenshot flash animation, clipboard copy, dark/light theme (auto or manual). ## Scope notes — what's simplified from the original spec This was originally requested as a large "everything" build (frame-by-frame stepping, drag-to-desktop screenshots, mouse-wheel volume, sound effects, full localization, a TypeScript build pipeline, and a complete Chrome Web Store asset/SEO package). To keep this a real, working, reviewable codebase rather than a shell of stubbed files, I built the core feature set above in plain, well-commented JavaScript, and left out the long tail of extras. Tell me which of the following you'd like added next and I'll build it in: - Frame-by-frame stepping (needs per-frame duration detection, format-dependent) - Drag-to-desktop screenshot (HTML5 drag-out API) - Mouse-wheel volume control (currently Ctrl+Scroll is wired to speed only, to avoid conflicting with page scroll) - Sound-effect toggle, full i18n/`_locales` setup - TypeScript build (currently plain ES modules / classic scripts, since MV3 content scripts can't load ES modules directly) - Chrome Web Store store-listing copy, keyword research, and store screenshots ## Toolbar placement The toolbar is positioned over the nearest sensibly-sized container around the `<video>` element rather than hard-coded into each site's native control bar. Site player DOMs (especially YouTube's) change frequently, and pinning to their internal control-bar classes is the most common way extensions like this break after a redesign. The floating approach is more resilient across YouTube, Vimeo, and arbitrary HTML5 players, at the cost of not looking pixel-identical to native controls. It can be toggled per-shortcut (`Shift+T` by default) or disabled entirely in Options → General. ## Permissions used - `storage` — save your settings via `chrome.storage.sync`. - `activeTab` / `scripting` — run the content script on the page you're viewing. - `contextMenus` — the right-click video menu. - `downloads` — save screenshots to your Downloads folder. - `clipboardWrite` — the "Copy" button on the screenshot preview. - `<all_urls>` host permission — the extension works on any page with a video, not just an allow-list of sites. ## Known limitations - Some DRM-protected video (e.g. certain streaming services) blocks `<video>` frames from being read onto a `<canvas>` by design (CORS/EME). The extension will show a "Screenshot blocked" toast rather than silently failing. - `createMediaElementSource` can only wrap a given `<video>` element once; if another extension or the page itself has already attached a Web Audio graph to the element, the volume booster may be unavailable for that video. - With permanent saving turned off (Options → Save & Sync), unsaved changes live in the background service worker's memory and are broadcast to open tabs. Chrome can recycle that service worker in the background at any time when the browser is idle, which would clear the unsaved changes a little earlier than "next full browser restart" in rare cases — in practice this only matters if you leave a tab open and untouched for a long time without reloading it. - Icons are generated programmatically (gradient glass square + play + lightning) rather than hand-designed; swap `icons/icon*.png` for your own art if you want a different look — `icons/gen_icons.py` shows how they were built if you want to tweak the script instead.