GO focus

GO Focus. No Excuses.

Comment

Inspiration

GO FOCUS started from a simple need: staying focused on work without drifting into distracting websites. Most extensions felt too soft, too minimal, or too easy to bypass. I wanted something that was visually bold and genuinely motivating — something that doesn’t sugarcoat but gives honest, reality-check reminders when I slip. The idea grew into a full cyberpunk-styled experience with an animated robot, neon UI, and tough motivational quotes that keep you grounded when discipline drops.

What it does

GO FOCUS blocks distracting websites and replaces them with a cyberpunk 3D page that displays rotating motivational messages. A robotic voice reads each quote, the UI animates with matrix-style effects, and a glowing robot character reinforces the “focus mode” theme. From the popup, users can add or remove domains, view their block list, and trigger the motivational modal. Quotes refresh automatically, audio can be toggled, and every blocked page provides a direct reminder to return to work.

How we built it

The extension is built using Chrome Manifest V3, with a clear separation of logic and UI.

  • background.js handles site-blocking through onBeforeNavigate, matching hostnames and redirecting users to the custom blocked page.
  • popup.js manages all user interactions: adding domains, removing them, loading storage data, and validating input.
  • modal.js controls the motivational pop-up, including the text-to-speech logic and user decision flow for keeping or removing a blocked site.
  • blocked.js powers the full-screen blocked page with quote rotation, speech synthesis, audio controls, and robot animations.

The UI was created with custom CSS files for each page. These include neon accents, matrix rain effects, glowing robot animations, 3D headers, scroll styling, and cyber grid backgrounds. Chrome Storage APIs are used to persist the block list.

Built With

  • JavaScript (ES6+) – Core logic for blocking, speech synthesis, UI behavior
  • Chrome Extensions (Manifest V3) – Service worker, permissions, storage
  • HTML5 – Popup, modal, and blocked page structure
  • CSS3 – Cyberpunk UI, neon effects, matrix animations, 3D styling
  • Chrome Storage API – Saving and loading blocked sites
  • Chrome Web Navigation API – Intercepting and redirecting web requests
  • Chrome Runtime Messaging – Communication between scripts
  • Web Speech API (Speech Synthesis) – Robotic motivational voice
  • AI Quote Generation (Planned) – Dynamic, personalized motivation for users
  • Visual Assets (Custom Icons & Robot Animation) – Extension branding and character design

Challenges we ran into

  • Configuring Manifest V3 service workers so the background logic remained reliable.
  • Ensuring the blocked page styling didn’t conflict with the target websites’ original CSS.
  • Consistent handling of speech synthesis across different Chromium browsers.
  • Designing animations that look futuristic but still perform smoothly.
  • Validating unpredictable user input when adding custom domains.
  • Balancing “harsh motivation” with a tone that remains constructive.

Accomplishments that we're proud of

  • Building a fully themed extension with a cohesive cyberpunk aesthetic.
  • Creating an animated robot character and interactive UI elements from scratch.
  • Implementing smooth matrix effects, neon glows, and 3D text completely through CSS.
  • Making the extension genuinely functional — not just visually appealing.
  • Achieving seamless integration between blocking logic, TTS, and the custom blocked page.

What we learned

  • Handling Chrome MV3 service worker limitations and navigation events.
  • Writing modular extension scripts that interact through Chrome’s messaging and storage APIs.
  • Advanced CSS animation techniques and 3D visual styling.
  • Using Speech Synthesis for robotic audio output and managing voice options.
  • How small UI decisions (like sound cues or subtle animations) greatly improve user focus.

What's next for GO FOCUS

  • Adding AI-powered quote generation so users receive fresh, personalized motivation instead of a fixed set of messages.
  • Introducing real-time, context-aware prompts that adapt based on the website being accessed — increasing the chances of interrupting distractions effectively.
  • Creating custom quote categories (soft, harsh, calm, study mode, gym mode) powered by dynamic AI variations.
  • Introducing scheduled blocking and automatic focus sessions for structured productivity routines.
  • Enhancing the robot with more animations, reactions, and visual states based on user behavior.
  • Building a Firefox version and improving compatibility across all major Chromium browsers.
  • Adding analytics for focus streaks, blocked attempts, and daily progress.
  • Expanding customization options for themes, colors, audio profiles, and motivational styles.

Built With

Share this project:

Updates