ShortStop

1. Pick what to block, per site

   Each platform has its own switch, and YouTube, Instagram and TikTok have several modes — block the whole site, block feeds and short-form video, or only the short-form video.

2. Intercept early

   A content script injects its CSS at document_start, then a MutationObserver keeps up as the page builds itself and as single-page navigation swaps content without a reload.

3. Replace, don’t just hide

   Blocked areas become a calm panel rendered in a shadow root, with a search box and shortcuts to the parts of the site that are still useful.

4. Let intent through

   Search, messages, profiles and videos you open deliberately are left alone, as are allowed accounts and the allowed times you set.

• Per-platform controls

  One switch per site; open tabs update instantly, no refresh.

• Multiple blocking modes

  YouTube, Instagram and TikTok can block everything, feeds, or just short-form video.

• Focus sessions

  30 minutes, 1 hour or 2 hours with the switches locked. Alt+Shift+F twice starts a one-hour session.

• Allowed times

  Let a site through on set days and hours. Adding or extending a time takes a 30-second wait.

• Allowed accounts

  Up to 10 accounts per platform on YouTube, Instagram, TikTok and Snapchat can get through, while their feeds stay blocked.

• Content preferences

  Optional on YouTube: allow, reduce or hide videos by category, with Focus and Study presets and a “Show anyway” option.

• No analytics

  No data collection of any kind.

• No network requests

  The extension never calls fetch and loads no remote code.

• Minimal permissions

  storage, plus host access to the seven supported sites.

• No third-party libraries

  Plain JavaScript and CSS, with no build step.

A privacy guard script checks these rules automatically on every change.

Language

Plain JavaScript and CSS — no framework, no build step

Platform

Chrome Manifest V3 with a service worker for the counter, shortcut and first-run page

Engine

Shared content-script core with one config file per platform

DOM

CSS at document_start, MutationObserver, single-page navigation handling, shadow-root panels

State

chrome.storage.sync for settings; chrome.storage.local for the on-device counter

Portability

Firefox build with small changes, and a generated Safari userscript for iPhone

Testing

Python standard-library runner driving headless Chrome or Edge against mock site markup

Automation

GitHub Actions for tests, the privacy guard and CodeQL

• YouTube

  Blocked

  Home feed, Up next, Shorts

  Still works

  Search, videos you open, allowed channels

• Instagram

  Blocked

  Feed, Explore, Reels, Stories

  Still works

  Messages, profiles, allowed accounts

• Facebook

  Blocked

  News Feed, Reels, Watch, Stories, Marketplace listings

  Still works

  Search, Messenger, your profile

• TikTok

  Blocked

  For You, Following, Friends, LIVE, Explore

  Still works

  Allowed accounts, videos you open

• Reddit

  Blocked

  Home, Popular, All, Explore

  Still works

  Communities you open on purpose

• X

  Blocked

  Home timeline, Explore

  Still works

  Search, messages, profiles, bookmarks

• Snapchat

  Blocked

  Spotlight, Discover, Explore

  Still works

  Chat, public profiles

• Building around websites I don’t control was the defining constraint. Every platform restructures its markup without notice, so the engine leans on URL-based rules where it can — they work in any language and survive redesigns — and keeps the fragile, label-dependent selectors small, isolated in per-platform config files and written down as a known limitation.
• Modern feeds aren’t static pages. Content is injected as you scroll and navigation happens without a reload, so blocking once at load isn’t enough. Getting CSS in at document_start and then observing the DOM taught me how much of “blocking” is really timing.
• The hardest design question wasn’t technical: how strict should it be? A blocker nobody can live with gets uninstalled, so strictness has to be balanced against being usable. The 30-second wait on adding allowed times, the “Show anyway” option and a calm replacement panel are small attempts at that balance.
• Keeping state coherent across tabs and sites meant treating storage as the source of truth and having open pages react to changes, rather than reading settings once.
• Testing is where I’d invest earlier next time. With seven platforms and many modes, a test suite running against mock markup was the only way to change one platform without quietly breaking another. It also made me honest about gaps: Reddit, X and Snapchat haven’t been tested on live sites yet, and the Firefox and iPhone builds are untested on real devices.
• Finally, privacy as an architectural decision rather than a policy: if the extension makes no network requests and holds minimal permissions, there is nothing to promise and nothing to leak. Encoding that into an automated check made it a rule rather than an intention.

Known limitsBlocking is not a lock — developer tools or uninstalling can bypass it, even during a focus session. Some selectors depend on English labels, and content-preference guesses are keyword-based and English-focused.