Browser extension to be more focused on Youtube. 15000+ users. Supports Chrome, Firefox, Brave and Edge.
Focused YouTube 
:mag: Focused YouTube (FY) is a browser extension that helps you stay focused by blocking recommendations and other elements on YouTube.
:computer: Focused YouTube is available for
:cookie: FY does not track any user data. It's a simple Vanilla JS application made with only one purpose – to help you avoid YouTube's rabbit hole.Table of Contents
- Table of Contents - Features - 🏠 Distraction-free YouTube homepage - 🔍 Clean search page - 📺 Noise-free video page - 🌚 Dark mode (depends of your system settings) - 💬 Options to show/hide comments/description - 🔗 Hover over YouTube logo to see the navigation menu - 📱 Works in mobile browser as well - Development - How to load the extension locally - Chrome - Firefox - Edge - Debugging storage API - For Chromium browsers (Chrome, Edge, Brave) - For Firefox - Testing - Releasing - Contributing - CreditsFeatures
🏠 Distraction-free YouTube homepage
🔍 Clean search page
📺 Noise-free video page
🌚 Dark mode (depends of your system settings)
Big shout out to @jakubkloc for introducing Dark Mode! :raisedhands:
Make sure to enable Dark Mode in your browser before testing it:
https://support.google.com/chrome/answer/9275525?hl=en&co=GENIE.Platform%3DDesktop
💬 Options to show/hide comments/description
Big thank you to @KParthSingh and @Ohnoimded for adding an option to temporarily disable the extension! :raised_hands:
🔗 Hover over YouTube logo to see the navigation menu
📱 Works in mobile browser as well
Big shout out to @fauzanabrar for making Focused Youtube work in mobile browsers! :raisedhands:
Development
Clone FY's repo to your computer.
You need to have nvm installed in order to have a correct Node version for this project.
Install dependencies and run a command to re-build the extension (update files in the distchrome or distfirefox folder) on any file change:
# 1. Install the correct node version.
nvm install
2. Install dependencies.
npm install
3. Monitor file changes to re-build the extension during development.
npm run dev --mode=chrome|firefox|edgeHow to load the extension locally
The npm run dev command will generate a build folder: distchrome, distfirefox or dist_edge. Browser differ slightly in how they load local extensions.
Chrome
For Chrome, load the distchrome folder as a local extension at chrome://extensions/ via "Load unpacked":
:warning: Note, that you'll need to update the extension (by clicking on the update icon) :point_up: every time you want to test the latest version.
Firefox
In Firefox, head over to about:debugging#/runtime/this-firefox and click on the "Load Temporary Add-on..." button on top of the page. :warning: For Firefox, you'll need to select the focused-youtube-firefox.zip file instead of the dist_firefox folder.
Edge
With Edge, open the edge://extensions/ page and click on the "Load unpacked" button on top of the page. :warning: Select the dist_edge folder instead.
Debugging storage API
Focused Youtube extension uses Storage API (see Storage API for Chrome or Storage API for Firefox) for keeping track of user settings and some additional data (installation timestamp, etc).
For Chromium browsers (Chrome, Edge, Brave)
To check out current storage data, right click on the extension icon and select "Inspect pop-up". In the dev console run:
chrome.storage.local.get(console.log)To clear storage run the following code in the dev console:
chrome.storage.local.clear(() => {
console.log("Cleared!")
})For Firefox
Head over to the about:debugging#/runtime/this-firefox page and click on the "Inspect" button next to the "Focused for YouTube" extension.
browser.storage.local.get(console.log)To clear storage run the following code in the dev console:
browser.storage.local.clear(() => {
console.log("Cleared!")
})Testing
When adding a new PR or releasing a new version, make sure the extension works (menu is shown, all distracting sections are hidden + dark mode) on the following pages:
- Home page.
- Video page.
- Search results page.
- Channel page.
- History page.
- Playlist page.
- Playlists page.
- Subscriptions page.
Releasing
- Bump version in
package.json.
- Build extension for all browser platforms:
npm run build:all- Upload zip files to all stores:
bin/publishContributing
You're more than welcome to contribute. In fact, I'm really looking forward to it! :rocket:
Just make sure to check out the contribution guidelines. :pray:
Credits
The info icon was created by @Remartwork and was taken from SVG Repo.
