Blockadado

A Brave/Chrome browser extension that cleans up YouTube and blocks distracting content. Designed to be expandable - adding a blocker for a new site requires creating a single file and a few lines in manifest.json.

Features

Feature	Default
Redirect YouTube home (/) to Subscriptions	✅ On
Hide Shorts (shelves, grid cards, nav entry, search results)	✅ On
Hide sidebar recommendations & end-screen suggestions on videos	✅ On

All features are independently toggle-able from the toolbar popup.

---

Installation (Brave / Chrome)

1. Open brave://extensions (or chrome://extensions)
2. Enable Developer mode (toggle, top-right)
3. Click Load unpacked
4. Select this folder (Blockadado/)

The extension activates immediately. Click the B shield icon in the toolbar to toggle features on or off.

---

Project structure

Blockadado/
├── manifest.json              # Extension manifest (Manifest V3)
├── icons/
│   └── icon.svg               # Toolbar & management page icon
├── background/
│   └── background.js          # Service worker - sets defaults on first install
├── content/
│   └── sites/
│       └── youtube.js         # YouTube content script (redirect + CSS injection)
├── popup/
│   ├── popup.html
│   ├── popup.js
│   └── popup.css
└── options/
    ├── options.html
    ├── options.js
    └── options.css

---

How it works

• Redirect - At document_start, the content script checks window.location.pathname. If it's /, the page is replaced with /feed/subscriptions. The same check runs on every YouTube SPA navigation via the yt-navigate-finish event.
• Hide Shorts - A <style> element with CSS :has() selectors is injected dynamically. Because it targets YouTube's custom element names (ytd-rich-shelf-renderer, ytd-reel-shelf-renderer, etc.), no MutationObserver is needed - the browser applies the rules as elements render.
• Hide Suggestions - When the URL is /watch, the CSS rule #secondary { display: none } is included in the injected stylesheet, removing the right-side recommendations panel. End-screen overlays (.ytp-ce-element) are also hidden.
• All settings are stored in chrome.storage.sync and change immediately: the content script listens to chrome.storage.onChanged and rebuilds its CSS in real time.

---

Adding a new site

1. Create the content script

   content/sites/reddit.js
   

2. Register it in manifest.json (under content_scripts):

   {
     "matches": ["https://www.reddit.com/*"],
     "js": ["content/sites/reddit.js"],
     "run_at": "document_start"
   }

3. Add the host permission in manifest.json:

   "host_permissions": [
     "https://www.youtube.com/*",
     "https://www.reddit.com/*"
   ]

4. Name your settings keys using the sitename_featureName convention (e.g. reddit_hidePromotedPosts: true).

5. Add toggles to popup/popup.html and options/options.html following the same pattern as the YouTube section.

---