DEV Community

Cover image for Build Your Focus: Productivity Timer Chrome Extension โณ
 Precious Kelvin Nwaogu
Precious Kelvin Nwaogu

Posted on

Build Your Focus: Productivity Timer Chrome Extension โณ

Hey DEV community! ๐Ÿ‘‹

I recently built a Productivity Timer Chrome Extension, a lightweight, clean, and persistent Pomodoro-style timer designed to help you stay focused, even when you close the popup or restart your browser.
Additionally, it also runs on ignition mode. Isn't that cool?

๐Ÿ”— Check it out on GitHub


๐ŸŽฏ What It Does

Sometimes, a simple timer is all you need to lock in and beat procrastination. This extension is:

  • ๐Ÿ› ๏ธ Customizable: Set your own timer duration
  • ๐ŸŽฎ Fully controllable: Start, Pause, Resume, Reset, your rules
  • ๐Ÿง  Persistent: Keeps ticking even when the popup closes or Chrome restarts
  • ๐Ÿ”” Notifies you: Desktop alerts & in-app toasts for every action
  • ๐Ÿ“œ Session history: Tracks your last 10 focus rounds

๐Ÿงช Features at a Glance

  • โœ… Set your desired time (default: 25 mins)
  • โœ… Works in the background (thanks to background.js + alarms)
  • โœ… Toast & desktop notifications keep you in the loop
  • โœ… Last 10 sessions stored using Chrome's storage API
  • โœ… Smooth, modern UI built with HTML, CSS, JS

๐Ÿ“ฆ How To Install

  1. Clone the repo:

    git clone https://github.com/KelvinCode1234/Productivity-Timer

  2. Visit:

    chrome://extensions/

  3. Enable Developer Mode

  4. Click Load Unpacked and select the project folder

  5. Done! Youโ€™ll see the timer icon in your Chrome toolbar ๐Ÿงญ


UI Sneak Peek

Screenshot


๐Ÿ—‚๏ธ Tech Breakdown

Here's what powers it:

  • popup.html: Timer interface
  • popup.js: UI logic + background messaging
  • background.js: Alarm + persistent timer
  • popup.css: Clean minimal styles
  • manifest.json: Chrome manifest v3

โš™๏ธ Permissions Used

  • notifications: To ping you when timeโ€™s up
  • storage: To save your sessions + timer state
  • alarms: To run seamlessly in the background

๐Ÿ“œ License

Open-source and MIT licensed! Fork it, tweak it, or contribute ๐Ÿ™Œ

๐Ÿ‘‰ GitHub Repo


๐Ÿค” Why I Built This

As a dev constantly switching tabs, I needed something that wouldn't quit on me once I closed a popup.

So I built one myself: persistent, stylish, and to the point.


๐Ÿ’ฌ Letโ€™s Talk

Would love your thoughts, stars โญ, or suggestions in the comments.

Letโ€™s stay focused and build cool stuff!

โ€” Precious Kelvin.N

Top comments (3)

Collapse
 
melody_kelly_n profile image
Melody Kelly. N • Edited

One suggestion you can choose to add a customizable alert sound. That way, users can choose what works best for them.โšก๐Ÿ‘Œ
But still
You're so talented! Keep up the great work.
You're definitely onto something here.โš“

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu

Thanks so much for your feedback and suggestions, buddy! The alert sound feature is definitely on the way, stay tuned!

Collapse
 
dotallio profile image
Dotallio

Love that it keeps running through browser restarts, that's usually missing from other timers. How does 'ignition mode' work exactly?