BreakTime — A Retro-fied Pomodoro Extension That Helps You Focus

Inspiration

We built BreakTime from a very relatable problem: staying focused on a computer is hard. Endless tabs, email, social media and video sites constantly pull your attention away. BreakTime uses the Pomodoro technique and lightweight site‑blocking to help you protect focused work time and make breaks more meaningful.

What it does

BreakTime implements the Pomodoro method: focused work sessions separated by short breaks. While a work session is active, BreakTime can block distracting websites and show a full‑page overlay with a countdown, so you can’t lose time to temptation. During breaks you can play mini‑games or listen to music to recharge before the next session.

Key features

Customizable Pomodoro durations (work and break lengths). Start/pause/reset/skip controls and persistent timer state. Block list for domains (add one per line) — blocked sites show a full‑page overlay during work sessions. Visual overlay that shows remaining work time and a friendly message. Break tools: music, mini games (in development), and quick note taking. Lightweight, client‑side implementation built as a WebExtension (works with modern browsers supporting the WebExtensions API). Uses local storage for settings and blocked sites; background script manages the countdown and notifies popup/content scripts.

How we built it

We used plain JavaScript and the WebExtensions APIs (background scripts, content scripts, browser.runtime messaging, and browser.storage) to keep the extension compact and easy to maintain. We also used LLMs during development to accelerate ideation, prototyping, and to generate UI text and example code snippets.

Challenges we ran into

Integrating multiple features (timer, overlay, broken-site blocking, games and audio) into a single, smooth UX was harder than building each feature in isolation. Messaging and synchronization between background, popup and content scripts required careful handling to avoid race conditions and missing updates. Cross‑browser quirks and content script injection timing had to be addressed so overlays appear reliably.

Accomplishments

Built a working Pomodoro timer with UI and persistent settings. Created a blocking overlay that prevents access to distracting sites during work sessions. Implemented a simple blocked‑sites editor in the popup and wired storage to the blocking logic. Learned a lot about WebExtension messaging, storage, and content‑script safety.

What we learned

Extensions are surprisingly approachable — you can build useful productivity tools with a few key APIs. Clear message contracts (action names, payload shapes) between background/popup/content scripts make the code much easier to reason about. Small UX details — e.g., disabling settings while the timer is running — matter for perceived polish.

What’s next for BreakTime

Add more interactive and engaging break experiences (games, guided stretches, prompts).

Built With

Share this project:

Updates