FocusFlow - An extension for productivity

Inspiration

As a student constantly battling the temptations of YouTube, Reddit, and Twitter, I realized traditional Pomodoro timers weren’t enough. I needed something that didn’t just track time, but also fought distractions with me. That’s what sparked the idea for this extension — a focus timer that actively defends your attention span.

What it does

FocusFlow is a Chrome extension that combines the Pomodoro technique with aggressive distraction-blocking. It: Starts 25-minute focus sessions followed by 5-minute breaks Aggressively monitors social media pages and blocks irrelevant videos, posts, and short-form content Uses AI to determine if a clicked link is relevant to your focus topic Detects idleness and prompts you to re-engage when you zone out Pops up automatically when sessions end or break time begins, even if you're on another tab

How we built it

We used the Chrome Extensions API with: A background script that manages the focus/break timer Popup UI to interact with the user (start, pause, reset) DOM mutation observers and click interceptors to monitor and block distracting content AI relevance checks using a custom function to verify if clicked content matches the user’s focus Real-time communication between background and popup using chrome.runtime.sendMessage Custom popups created with chrome.windows.create() for seamless transitions between sessions

Challenges we ran into

Popup Resetting: Popup scripts reset every time they’re reopened, so we had to move all persistent logic to the background script. Timer State Sync: Ensuring the background timer state was correctly reflected in the popup. Blocking Just Enough: Making the content filter aggressive enough to stop distractions — but not so aggressive that it broke websites. Idle Detection: Creating a reliable system to detect when the user has gone idle and pause the timer with prompts.

Accomplishments that we're proud of

Built an AI-powered content relevance system to filter distractions Created a fully autonomous Pomodoro timer that continues running even when popup is closed Integrated seamless popup transitions at session boundaries Designed an intuitive interface and dynamic blocking overlay system Built a tool that genuinely helps reduce time lost to mindless browsing

What we learned

How to manage persistent state in background scripts Deepened our understanding of Chrome’s scripting and permissions model Effective use of async/await in a multi-script environment How to make content blockers that are subtle yet powerful The importance of designing UX for both productivity and accountability

What's next for FocusFlow - An extension for productivity

Focus Streaks and Achievements: Gamify consistency Smarter AI: Integrate an external LLM to judge deeper content relevance Analytics Dashboard: See how much time you saved each week Cross-device Sync: Connect your FocusFlow sessions across devices Plugin Support: Add custom blockers or productivity boosters (e.g., todo integration)

Built With

• api
• content-blocking
• css
• extension
• html
• javascript
• messaging
• mutationobserver
• storage