z4kkyhub/chrome-ext-youtube-focus-suite

Purpose and Extension Entry Points

YouTube Focus Suite is a Manifest V3 Chrome extension that combines two independently toggled YouTube behaviors: distraction-reduced video viewing and Shorts removal/redirecting. Chrome loads the extension definition from manifest.json; its runtime entry points are the service worker background.js, toolbar popup popup/popup.html, and YouTube content scripts under content/.

Manifest and Runtime Topology

manifest.json defines the extension’s permissions, host matching, content-script injection, popup, and declarative rules integration. The browser executes background.js in the MV3 service-worker lifecycle, injects feature-specific scripts/CSS into applicable YouTube pages, and opens popup/popup.html as the user-facing settings surface.

Focus Mode Feature

Focus mode targets video-watch pages and removes related videos, comments, and supporting UI through page-level CSS and DOM behavior:

• content/focus-mode.js

• content/focus-mode.css

The content script applies or removes the focus presentation based on persisted state and exposes an in-page control near the video player. This is the feature boundary most coupled to YouTube’s changing DOM structure.

Shorts Suppression Feature

Shorts removal is split between regular-page filtering and direct-navigation prevention:

• content/hide-shorts.js

• content/hide-shorts.css

• rules/shorts-redirect.json

The content layer hides Shorts cards/sections across home, subscriptions, search, and related-content surfaces. Declarative network rules redirect navigations to /shorts/* back to the home page, avoiding a content-script-only redirect path.

Settings and User Control Flow

The toolbar UI in popup/popup.html and popup/popup.js lets users toggle Focus Mode and Hide Shorts separately; styling is contained in popup/popup.css. State is stored in Chrome sync storage, so popup changes propagate to content-script behavior across signed-in Chrome instances. Focus Mode additionally accepts page-local toggling through its injected video-page button.

Background Coordination and Platform Boundaries

background.js is the privileged extension-side coordinator for browser events, state defaults or updates, and ruleset enablement as required by the Shorts setting. Content scripts operate within YouTube page contexts and should limit responsibility to DOM observation/manipulation. Chrome extension APIs—especially synchronized storage and declarative network request rules—form the key boundary between persistent settings, browser-level navigation handling, and page-level UI changes.

Infrastructure and Maintenance Constraints

This is a client-only browser extension: no backend, database, or external API service is indicated. It relies on Chrome/Chromium extension APIs and YouTube’s rendered DOM. The primary operational risk is YouTube markup changes; selectors and DOM handling in content/focus-mode.js and content/hide-shorts.js are the likely maintenance points.