🔍 Focused YouTube (FY) is a browser extension that helps you stay focused by blocking recommendations and other elements on YouTube.
💻 Focused YouTube is available for
🍪 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.
Big shout out to @jakubkloc for introducing Dark Mode! 🙌
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
Big thank you to @KParthSingh and @Ohnoimded for adding an option to temporarily disable the extension! 🙌
Big shout out to @fauzanabrar for making Focused Youtube work in mobile browsers! 🙌
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 dist_chrome or dist_firefox 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|edgeThe npm run dev command will generate a build folder: dist_chrome, dist_firefox or dist_edge. Browser differ slightly in how they load local extensions.
For Chrome, load the dist_chrome folder as a local extension at chrome://extensions/ via "Load unpacked":
In Firefox, head over to about:debugging#/runtime/this-firefox and click on the "Load Temporary Add-on..." button on top of the page. focused-youtube-firefox.zip file instead of the dist_firefox folder.
With Edge, open the edge://extensions/ page and click on the "Load unpacked" button on top of the page. dist_edge folder instead.
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).
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!")
})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!")
})-
Bump version in
package.json. -
Build extension for all browser platforms:
npm run build:all
- Upload zip files to all stores:
bin/publish
You're more than welcome to contribute. In fact, I'm really looking forward to it! 🚀
Just make sure to check out the contribution guidelines. 🙏
The info icon was created by @Remartwork and was taken from SVG Repo.
