This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

Jigra (Focus Shield) is an in-browser companion built to eliminate digital friction during study sessions without resorting to rigid website bans.

The Problem & Who I Built It For

I built this for my friends and peers at college who spend long hours studying complex topics on YouTube—watching coding tutorials, math proofs, and engineering lectures.

The issue isn't a lack of discipline; it’s an environment designed to distract. A friend opens a video to review a quick 10-minute explanation, only to be surrounded by clickbait thumbnails, sidebars, autoplay loops, and YouTube Shorts. Traditional website blockers take an all-or-nothing approach: they block YouTube entirely, cutting off access to the very educational content students need.

How Jigra Solves It

Instead of blocking entire platforms, Jigra shapes the workspace around intentional study:

• Distraction-Free Video Mode: The moment a focus sprint starts, Jigra removes algorithmic home feeds, recommendation rails, sidebars, comments, and Shorts, leaving only the active lecture player visible.
• Ignis the Study Companion: A lightweight floating companion anchored at the edge of the screen that tracks your focus sprint, daily streaks, and accumulated "Sparks". As you log more focus hours, Ignis evolves from a Flame Sprout to a Guardian Phoenix and Celestial Sage.
• Focus Command Center: Flexible Pomodoro intervals (Standard, Deep, or Ultra) tailored to different task depths.
• 60-Second Micro-Break Arcade: To prevent short study breaks from turning into prolonged social media scrolling, Jigra offers 60-second micro-games (like Memory Matrix, Sparkle Snake, and Speed Code Typer) that automatically shut down after one minute so you can transition back into work.
• Cosmetics Bazaar: A reward loop where accumulated Sparks can be redeemed for companion skins, hats, and aura effects.
• Synthesized Audio: Transition cues and subtle completion fanfares synthesized directly in code via the Web Audio API without extra network requests.

Demo

Code

How I Built It

Jigra is developed as a client-side Chrome Extension using Manifest V3 (MV3) and standard browser APIs.

Architecture & Key Components

1. Closed Shadow DOM for UI Isolation
   
   The companion widget and interface elements run inside a closed Shadow DOM container. This isolates Jigra's stylesheets from the host site, preventing layout breaks and ensuring consistent rendering on any web page.

2. Single-Page Application (SPA) Lifecycle Handling
   
   YouTube does not perform standard full-page reloads when navigating between videos. Jigra binds to custom platform events (yt-navigate-finish) combined with MutationObserver instances to strip feeds and recommendation sidebars smoothly across dynamic page transitions.

3. Persistent Timing Across Service Worker Sleep Cycles
   
   Because Manifest V3 background workers go idle when inactive, standard JavaScript setInterval timers are prone to stopping. Jigra synchronizes sprint state with chrome.alarms and chrome.storage.local, ensuring timers remain reliable when the background service worker wakes or sleeps.

4. Zero-Asset Web Audio API
   
   Instead of bundling external .mp3 or .wav assets, auditory feedback and chimes are synthesized at runtime using custom oscillator nodes and gain envelopes.

Why Does Open Innovation Matter?

Open innovation and local-first architecture are crucial when building tools that touch everyday web browsing:

• Local Privacy: A browser extension sits alongside a user's web activity. Building Jigra on open web standards without third-party analytics or closed tracking endpoints guarantees that personal study routines and viewing habits stay entirely on the user's machine.
• Modularity & Adaptability: Every student's workflow is slightly different. Open-source development enables others to add custom DOM selectors for other learning platforms, tune sprint rules, or create their own micro-break challenges.
• Independence from Gated Services: Tools meant for students should not depend on fragile closed subscriptions or sudden API changes. Open code ensures long-term accessibility.

My Agent Session

Session details and workflow logged with DevRelay.

Prize Categories

• Primary Track: Build for a Friend