Build Your Focus: Productivity Timer Chrome Extension ⏳
 Precious Kelvin Nwaogu

Precious Kelvin Nwaogu @kelvincode1234

About: Software Developer skilled in React, Nextjs, Nodejs, Java, HTML5, CSS3 & Material UI. I love building user-centered web applications and am always eager to learn 📚 and collaborate 🤝!

Location:
Lagos, Ikeja.
Joined:
Oct 3, 2024

Build Your Focus: Productivity Timer Chrome Extension ⏳

Publish Date: Jun 24
24 3

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

Comments 3 total

  • Melody Kelly. N
    Melody Kelly. NJun 24, 2025

    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.⚓

    •  Precious Kelvin Nwaogu
      Precious Kelvin NwaoguJun 24, 2025

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

  • Dotallio
    DotallioJun 24, 2025

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

Add comment