I wanted a Pomodoro timer that lived in the Chrome toolbar. Nothing flashy — no dashboards, daily reports, or login. Just a timer that helps me focus — and stays out of the way.
What I ended up building was a Chrome extension called Mini Pomodoro:
- 25/5 by default (customizable)
- A simple badge that shows minutes left
- A circular progress ring inside the popup
- Optional sound when a session ends
- Dark mode toggle
- Settings that sync across Chrome profiles
- No tracking, no cloud storage, no external dependencies
Everything runs in a background script using a setInterval loop. The popup and options pages just reflect the current state.
Why use a Chrome extension at all?
I didn’t want a separate app, and I didn’t want to keep a tab open, either. I already live in Chrome most of the day, so it made sense to build something that runs where I work.
The popup is a small HTML/CSS/JS file. It can show controls and visual feedback, but it doesn’t persist — as soon as you click away, it disappears. So all the actual timing logic had to live in the background script.
That meant using setInterval to tick once per second, decrementing timeLeft, and sending updates to the popup if it’s open. It’s accurate enough for this use case, and lightweight enough not to cause issues.
Designing with constraints
The popup has limited space — around 300px tall — so every element had to earn its spot. I chose to use a circular SVG timer ring with a stroke animation to show progress. It gives you a sense of motion without needing a giant display.
The badge in the toolbar shows the number of minutes left, and changes color depending on the session type: orange for work, green for break. I included and subsequently removed the seconds counter from the badge — they don’t fit cleanly, and they’re not necessary.
Users can set their own work and break durations, toggle dark mode, enable or disable sound, and choose whether the timer should start automatically when Chrome opens. All of that is saved in chrome.storage.sync, so it follows you if you’re signed into Chrome elsewhere.
Where things got tricky
One issue that kept showing up was the error message:
“Could not establish connection. Receiving end does not exist.”
This happens when the background script sends a message to the popup, but the popup isn’t open. It’s not really a bug — just an expected edge case. I fixed it by adding .catch() to every chrome.runtime.sendMessage() call in the background script, and filtering out that specific error.
Another pain point was syncing state across the popup and the options page. If you changed the dark mode toggle in one, the other wouldn’t reflect it until it reloaded. To fix that, I added a chrome.storage.onChanged listener in both scripts so they could react to changes in real time.
There were also small UX gaps I didn’t expect:
- Clicking “Reset” didn’t visually reset the ring — fixed by manually updating the ring UI
- Sound previews worked in the options page but not the popup — fixed by duplicating the preview logic
- The “Open full settings” link blended into the background in dark mode — fixed with a better color and styling
What I didn’t include — on purpose
I didn’t add:
- A session log or streak counter
- Long break timers
- Persistent notifications
- A floating window
- OAuth, sync servers, or external APIs
That was deliberate. The goal wasn’t to make the ultimate productivity tool. It was to make one that respected your focus — not one that tried to manage it for you.
I also added a “Buy me a coffee” button in the options page for fun. When you click it, it plays a short sound and shows a thank-you message that fades away after a few seconds.
What I’d do differently
If I rebuild this later, I might explore:
- Logging how many sessions you’ve completed in a day (locally)
- Optional long breaks after 4 sessions
- An optional notification bubble when a session ends (instead of just sound)
- A small persistent desktop window version
But for now, it does exactly what I need it to do: stay out of the way and keep me working.
You can find the code here: github.com/shehuphd/pomodoro-extension
Or support the project here: buymeacoffee.com/shehuphd
