search

makaroni4 / focused_youtube

Chrome Extension to be more focused on Youtube.
https://chrome.google.com/webstore/detail/focused-youtube/nfghbmabdoakhobmimnjkamfdnpfammn
MIT License
67 stars 21 forks source link
chrome-extension productivity youtube

readme

Focused YouTube Add to Chrome

:mag: Focused YouTube (FY) is a Chrome Extension that helps you stay focused by blocking recommendations and other elements on YouTube.

:heart: 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.

Screenshots

🏠 Distraction-free YouTube homepage

home_page

🔍 Clean search page

search_page

📺 Noise-free video page

video_page

:last_quarter_moon_with_face: Dark mode (depends of your system settings)

search_page

Big shout out to @jakubkloc for introducing Dark Mode! :raised_hands:

Make sure to enable Dark Mode in your Chrome before testing it:

https://support.google.com/chrome/answer/9275525?hl=en&co=GENIE.Platform%3DDesktop

💬 Options to show/hide comments/description

search_page

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

search_page

📱 Works in mobile browser as well

mobile_version

Big shout out to @fauzanabrar for making Focused Youtube work in mobile browsers! :raised_hands:

Contributing

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:

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 dist 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 mon

Load the dist folder as a local extension at chrome://extensions/ via "Load unpacked":

update_extension

: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.

Chrome Storage

Focused Youtube extension uses chrome.storage API 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!")
})

Releasing

npm run build