Focus Hoot

Inspiration

t started one night before finals — I opened YouTube to find a quick “5-minute math refresher.” Two hours later, I knew everything about raccoon documentaries but absolutely nothing for my exam.

That’s when the idea for Focus Hoot was born — what if your browser had a witty little owl that could call you out before you fell down another distraction hole?

Instead of just blocking sites like every other extension, I wanted something more human — a tool that understands why you’re losing focus and keeps you accountable in a playful, supportive way.

What it does

Focus Hoot is your AI-powered focus companion that helps students, parents, and teachers stay on track. It doesn’t just block — it understands.

When you start a focus session, you tell Hoot your goal (e.g., “Study calculus”). Then it watches what you do — if you’re watching a YouTube video, it scrapes the metadata, analyzes it using Chrome’s built-in AI, and decides whether it’s related to your goal.

If it’s not, Focus Hoot swoops in: - 🚫 Blocks or redirects you to a “roast screen” that playfully calls you out. - 📊 Shows your focus stats, goals, and distraction patterns. - 🧭 Recommends content that actually helps with your study goal. - For sites like TikTok or Instagram, Focus Hoot doesn’t even negotiate — it just says “Nope.” 🦉

How we built it

Frontend: HTML, CSS, JavaScript, and jQuery (lightweight, SRP-structured)

AI: Chrome’s built-in Prompt API (on-device or cloud AI models for analyzing content relevance)

Storage: Chrome’s chrome.storage for session and user data

Architecture: - popup/ — focus session setup (goals, timers, resource URLs) - content/ — scrapes page metadata and runs analysis triggers - background.js — manages session state, communication, and blocking - block/ — playful “roast” screens with focus stats and AI-recommended redirection

Everything was built to follow the Single Responsibility Principle (SRP) for clean, scalable code.

Challenges we ran into

     - Making the AI context-aware enough to understand relevance (“Is a ‘Rust tutorial’ helpful or just    
        another rabbit hole?”)
     - Ensuring YouTube scraping didn’t break performance or violate content policies
     - Handling Chrome’s new built-in AI API securely — including token registration and safe prompt 
        use.

Balancing fun and productivity — we didn’t want Focus Hoot to feel like a strict parent, but more like a sarcastic study buddy.

Accomplishments that we're proud of

1. Built a working prototype that can analyze YouTube videos in real time and block distractions
   intelligently.
   1. Designed a personality-driven UX — Focus Hoot feels like a character, not a cold extension.
   2. Integrated Chrome’s new AI capabilities for on-device, private focus analysis.
   3. Created a system architecture ready for expansion into parental and teacher tools.

What we learned

1. How to integrate Chrome’s Prompt API (AI model) for real-time analysis.
2. That UX tone matters — humor and personality can drastically improve user engagement and reduce frustration. 3.That real focus tools shouldn’t just block — they should teach you how to notice your own patterns.

What's next for Focus Hoot

We’re turning Focus Hoot into a full accountability platform:

 - 👨‍👩‍👧 Parental Mode: lets parents get insight into what content their children are exposed to and track
          progress.
 - 🧑‍🏫 Teacher Mode: designed for online exams — limits tabs, monitors student activity, and ensures 
          focus during tests.
 - 📈 Adaptive Coaching: Hoot learns your habits and tailors its tone — from encouraging mentor to 
          full-on sarcastic owl.

Focus Hoot isn’t just an extension — it’s your focus buddy with attitude.

Built With

• chrome-built-in-ai
• css
• extension
• gemini-nano
• html
• javascript
• jquery