Focus Mode — Distraction Blocker

A Chrome extension that strips the addictive parts out of YouTube, Instagram and Facebook, plus a universal site blocker, grayscale mode, and focus timer that work on any website. No build step required — plain HTML/CSS/JS, loaded straight into Chrome as an "unpacked" extension.

---

1. What it does

🌐 Global (works on every site)

Feature	What it does
Focus Timer	A Pomodoro-style countdown (5/15/25/45/60 min). Keeps running even if you close the popup or the browser tab, shows a floating countdown badge on YouTube, and sends a native notification when time's up.
Grayscale Mode	Removes color from every page you visit. Sounds simple, but desaturated feeds are measurably less "grabby" than full-color ones — a common trick from digital wellbeing research.
Site Blocker	Add any domain (Reddit, X/Twitter, Hacker News, a game, anything) and it gets replaced with a calm "blocked" page. Choose whether it blocks always or only while your Focus Timer is running.

▶️ YouTube

Feature	Addresses the complaint...
Hide Shorts	"Shorts turn a 10-minute break into an hour."
Hide Comments	Comment sections are a rabbit hole / source of negativity.
Hide Recommended Sidebar	"I click one video and get sucked into 20 more."
Block Homepage Feed	The homepage is the algorithmic bait — replaced with a calm message.
Hide Notifications Bell	One less red badge pulling your attention.
Disable Autoplay	Stops the "next video" autoplay rabbit hole automatically.
Hide End-Screen Suggestions	Removes the suggestion cards/panel that pop up as a video ends.
Channel Whitelist	Only show videos from channels you chose, everywhere else is hidden.

📷 Instagram

Feature	Addresses the complaint...
Hide Reels	Removes Reels from the nav and from posts mixed into your feed.
Hide Explore Page	Replaces the endless "Explore" grid with a short message.
Hide Stories Tray	Removes the row of story bubbles at the top of your feed.
Hide "Suggested for You" Posts	Filters out algorithmic filler that isn't from people you follow.

📘 Facebook

Feature	Addresses the complaint...
Hide News Feed	Replaces the endless-scroll feed with a calm message — go straight to groups/pages/friends instead.
Hide Reels	Removes Reels links from your feed.
Hide Watch	Removes the video-binge "Watch" tab.
Hide Stories Tray	Removes the row of story bubbles.
Hide "Suggested for You" Posts	Filters out algorithmic/sponsored filler.

---

2. File structure

youtube-focus-mode/
├── manifest.json          → Extension config: permissions, what runs where
├── settings-schema.js     → Shared defaults + helpers, loaded first everywhere
│
├── background.js          → Service worker: focus timer + universal site blocker
├── blocked.html/css/js    → The page shown when a blocked site is visited
├── grayscale.js/css       → Runs on every site; applies the grayscale filter
│
├── youtube.js/css         → YouTube-specific filtering
├── instagram.js/css       → Instagram-specific filtering
├── facebook.js/css        → Facebook-specific filtering
│
├── popup.html/css/js      → The UI you see when you click the extension icon
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Everything must live in the same folder. No vite/webpack/build step needed — it's plain JS, loaded directly by Chrome.

---

3. How to load it in Chrome

1. Open chrome://extensions.
2. Turn on Developer mode (top-right toggle).
3. Click Load unpacked → select this folder.
4. Pin the icon (puzzle-piece icon in the toolbar → pin Focus Mode).
5. Click the icon to open the popup and start toggling.

After editing any file, go back to chrome://extensions and click the refresh icon on the extension's card to reload your changes.

---

4. How it works, technically

• Toggles → storage → live DOM changes. Every setting is saved instantly to chrome.storage.sync the moment you flip it. Each site's content script (youtube.js, instagram.js, facebook.js) listens for storage changes and re-applies CSS classes / hides elements immediately — no page reload needed.
• Single-page apps. All three sites are SPAs (clicking around doesn't reload the page), so each content script also watches for DOM mutations and (on YouTube) the site's own internal yt-navigate-finish event, to catch content that loads in after the fact.
• Focus Timer lives in the background, not the popup. Popups get destroyed the moment you click away, so the actual countdown is owned by background.js using chrome.alarms (survives the popup closing, even survives the browser being idle). The popup just displays whatever state is in storage and sends start/pause/reset messages.
• Site Blocker uses chrome.webNavigation. When you navigate to a page, background.js checks the hostname against your blocklist and — if it matches and blocking is currently active — redirects that tab to blocked.html before the page finishes loading.
• Instagram & Facebook selectors are "best-effort." Unlike YouTube (which uses semantic, fairly stable element names like ytd-comments), Instagram and Facebook auto-generate hashed class names that change on every deploy. To stay robust, those two content scripts avoid class-name selectors entirely and instead match on things that don't change as often: href patterns (/reels/, /watch/), ARIA attributes (aria-label="Reels"), and visible text ("Suggested for you"). This is more durable but not bulletproof — see Known Limitations.

---

5. Known limitations

• Instagram & Facebook selectors may need occasional updates. If Meta ships a redesign and a toggle stops doing anything, open the relevant instagram.js/facebook.js/.css file — the selectors are commented and grouped by feature, so it's usually a small, contained fix.
• YouTube selectors can also drift after major redesigns, though YouTube's structure is more stable than Meta's.
• Whitelist/suggested-post filtering only hides items it can positively identify. If it can't find a channel name or "Suggested for you" label on a card, it leaves that card alone rather than risk hiding legitimate content.
• The Site Blocker needs the <all_urls> permission because you can add any domain to the blocklist — the extension can't know in advance which sites you'll want blocked. It only acts on domains you've explicitly typed into the blocklist; it doesn't read or modify anything on sites you haven't added.

---

6. Permissions explained

Permission	Why it's needed
storage	Save your toggle settings and timer state.
alarms	Keep the focus timer counting down even when the popup is closed.
notifications	Send a native alert when a focus session finishes.
webNavigation	Detect when you navigate to a blocked site, so it can redirect you.
tabs	Redirect a blocked tab to the "blocked" page.
host_permissions: <all_urls>	Required for the Site Blocker (works on domains you choose) and Grayscale Mode (works on any site) to function everywhere, not just YouTube/Instagram/Facebook.

---