I built an open-source Chrome Extension to stop my YouTube Shorts addiction (Manifest V3)

The Problem: "Just one more video..."

I’m a high school student hoping to major in Computer Science. A few months ago, I noticed a pattern destroying my study sessions:

1. Open YouTube to watch a 10-minute Physics tutorial.


2. See a "Shorts" shelf on the homepage.


3. Click one.


4. ...Wake up 2 hours later with zero work done.

I tried existing blockers, but they were too aggressive. They often blocked all of YouTube (which I couldn't do, because I need tutorials for school) or they were paid/closed-source (which I didn't trust with my browsing data).

So, I decided to build my own "Surgical" blocker using Manifest V3.

The Solution: FocusTube 🛡️

I built FocusTube to be the tool I needed. It doesn't break YouTube; it just removes the slot-machine elements.

View the Source Code on GitHub

How it Works (The Tech)

YouTube is a Single Page Application (SPA). This means when you click a video, the page doesn't actually reload; it just swaps the content via JavaScript. This makes building a blocker tricky because a simple CSS rule isn't enough, the elements keep popping back up.

Here is how I solved it:

1. The Watcher (MutationObserver)

I used a MutationObserver to watch the DOM for changes. Whenever YouTube injects a new "Shorts Shelf" or sidebar button, my script detects it and hides it immediately.

const observer = new MutationObserver(() => {

    if (isFocusModeOn) manualScan();

});

observer.observe(document.body, { childList: true, subtree: true });

2. The Navigation Listener

Since the URL changes without a page reload, I had to listen for YouTube's specific navigation events (yt-navigate-finish) to re-run my checks every time the user clicks a link.

3. Strict vs. Soft Mode

I didn't want to just hide things; I wanted to break the habit.

• Strict Mode: If I try to open a direct /shorts/ link, the extension detects the URL pattern and immediately redirects me to the Homepage using window.location.replace.


• Soft Mode: Sometimes I just need a nudge. This mode injects a full-screen HTML overlay that pauses the video and asks: "Do you really need to watch this?"
  

Privacy First

Since I built this for myself and my friends, I didn't want any tracking. The extension runs 100% client-side. It saves your preferences (Dark Mode, Strict Mode status) to chrome.storage.local. No data ever leaves the browser.

Try it out

I just released v1.2 and submitted it to the Microsoft Edge and Firefox Add-ons stores (pending review right now!).

But since it's open-source, you can install it today on Chrome, Edge, or Brave via Developer Mode.

• 💻 GitHub Repo (Download here): https://github.com/malekwael229/FocusTube
  


• 🐞 Issues/Feedback: Feel free to open an issue if you find a bug!

I hope this helps other students reclaim their attention span. Let me know what you think!