A browser extension that declutters YouTube — hide Shorts, ads, and sidebar items, simplify the player and feed, and add handy controls like a playback speed slider, all toggled from a side panel.
Install from the Chrome Web Store
Manifest V3 · React 19 · TypeScript · Tailwind CSS
- Hide Shorts sections, mixes, and playlists across the feed
- Remove sponsored videos and promotional banners
- Clean up the search bar, masthead, and player controls
- Playback speed slider for videos and a dedicated one for Shorts
- Auto-advance to the next Short
- Trim the sidebar (You, Explore, More from YouTube, …) item by item
- Channel page cleanup (banner, trailer)
Every feature is opt-in and persists in chrome.storage.local. A master
toggle enables or disables the whole extension at once.
Requires Node.js (>= 20.9) and pnpm
(corepack enable will pick the version from package.json).
pnpm install
pnpm dev # watch build into ./distThen load the unpacked extension:
- Open
chrome://extensions - Enable Developer mode
- Load unpacked → select the
distfolder
pnpm build # one-off chrome build into ./dist
pnpm build:chrome # bumps version, outputs release/build-chrome-<version>.zip
pnpm build:opera # Opera-specific manifestpnpm lint
pnpm typecheck
pnpm test
pnpm formatEverything is driven by a declarative feature config — you describe what a feature does, and the build/runtime turn that into UI, CSS, and DOM behavior.
The three entry points (webpack.config.js):
| Entry | Source | Role |
|---|---|---|
content |
src/content/ |
Applies features on the page |
sidebar |
src/sidebar/ |
Settings UI (Chrome side panel) |
worker |
src/worker/index.ts |
Opens the side panel on toolbar click |
Settings are a single source of truth: the Storage
singleton mirrors chrome.storage.local in memory and feeds both the imperative
DOM layer and the React UI (via StorageProvider).
CSS-only features (hide / styles) cost nothing at runtime — they are
compiled into content.css and switched on by a per-feature body attribute.
Only behavioral features (custom, component) run JavaScript.
A typical "hide element X" feature is a small diff: one declarative config entry and one translation key per locale. Storage, defaults, CSS, and sidebar UI are generated.
- Adding a feature - step-by-step implementation
- Selector guide - how to pick stable YouTube selectors
- Feature catalog - current features and config areas
- Contributing - PR workflow and required checks
MIT © lenadweb