Skip to content

dominhduy09/pomodoro-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

⏱️ Pomodoro Timer Extension

A minimalist, distraction-free Pomodoro timer that keeps running even when the popup is closed

Version License Chrome Extension PRs Welcome

Features β€’ Installation β€’ Usage β€’ Tech Stack β€’ Contributing


πŸ“‹ Table of Contents


🎯 Overview

Pomodoro Timer Extension is a Chrome extension (Manifest V3) designed for developers, students, and productivity enthusiasts who need a reliable timer that works in the background. Unlike traditional web-based timers, this extension continues running even when you close the popup, using Chrome's service worker architecture.

Perfect for:

  • Developers practicing the Pomodoro Technique
  • Students managing study sessions
  • Remote workers tracking focus time
  • Anyone seeking distraction-free productivity

✨ Features

Core Functionality

  • ⏰ Background Persistence β€” Timer runs via service worker, even when popup is closed
  • πŸ”” Desktop Notifications β€” Get notified when focus/break sessions end
  • 🎡 Audio Alerts β€” Custom ring tone plays at session completion
  • πŸ“Š Daily Statistics β€” Track completed Pomodoros per day with automatic daily reset
  • πŸ”„ Auto-Start Options β€” Automatically begin next focus or break session

User Experience

  • 🎨 Customizable Theme β€” Change button accent color while preserving timer colors
  • πŸ’Ž Glassmorphism UI β€” Modern liquid glass design with backdrop blur
  • ⚑ Smooth Animations β€” Interactive button states with hover/active effects
  • 🎧 Looping Sound Player β€” Test and play ambient sounds from the popup
  • πŸ“± Responsive Design β€” Clean, minimal interface that adapts to your needs

Advanced Features

  • βš™οΈ Flexible Settings β€” Customize focus (1-180 min), short break (1-60 min), long break (1-60 min)
  • πŸ” Cycle Management β€” Automatic long breaks after configurable focus sessions (default: 4)
  • πŸ’Ύ Persistent State β€” All settings and progress saved in Chrome storage
  • πŸ† Badge Counter β€” Extension icon shows remaining minutes while running
  • ⚑ Quick Templates β€” Instantly switch between Classic (25/5), Short (15/3), Long (50/10), and Ultra (90/20) timing patterns

πŸ”§ How It Works

  • The service worker owns the state (mode, running, start/end times, remaining seconds) in chrome.storage.local.
  • When you start a session, the worker schedules an end alarm and a minute badge update alarm.
  • The popup reads state and renders a local ticking UI; it does not drive the timer.
  • On alarm, the worker flips mode, increments counters, sends a notification, and (optionally) auto‑starts the next session.
  • The popup and worker communicate via chrome.runtime.sendMessage.

πŸ“₯ Installation

  1. Open Chrome and navigate to chrome://extensions/.
  2. Enable "Developer mode" using the toggle in the top-right corner.
  3. Click the "Load unpacked" button and select the extension's directory.
  4. Pin the extension to the Chrome toolbar for easy access.

πŸš€ Usage

Quick Template Switching

One-click timing patterns:

  • Classic (25/5/15) β€” Traditional Pomodoro technique
  • Short (15/3/10) β€” Quick focus bursts for task switching
  • Long (50/10/30) β€” Deep work sessions
  • Ultra (90/20/45) β€” Maximum concentration blocks

Simply click a template button to instantly apply those durations.

Basic Workflow

  • Start/Pause/Reset: Use the popup controls to manage your timer.
  • Mode Selection: Choose between Focus, Short Break, and Long Break modes.
  • Settings: Click the gear icon to customize your timer durations and auto-start preferences.
  • Color Theme: Press the 🎨 button to select your preferred button accent color.
  • Sound Alerts: Use the Play Sound button to test the break end sound.

βš™οΈ Configuration

Template Presets

Template Focus Short Break Long Break Best For
Classic 25 min 5 min 15 min Standard Pomodoro
Short 15 min 3 min 10 min Quick tasks
Long 50 min 10 min 30 min Deep work
Ultra 90 min 20 min 45 min Complex projects
  • Focus Duration: Set the length of your focus sessions (1-180 minutes).
  • Short Break Duration: Configure the duration of short breaks (1-60 minutes).
  • Long Break Duration: Adjust the length of long breaks (1-60 minutes).
  • Auto-Start: Enable or disable automatic starting of the next session.

πŸ› οΈ Tech Stack

  • Chrome Extensions API: For building the extension and interacting with the browser.
  • HTML/CSS/JavaScript: Core technologies used to develop the extension.
  • Service Workers: Background scripts that run independently of the extension's UI.

πŸ“‚ Project Structure

  • manifest.json β€” MV3 configuration
  • service_worker.js β€” background logic: timers, alarms, storage, notifications
  • popup.html β€” UI markup
  • popup.css β€” UI styles (minimal, dark‑friendly)
  • popup.js β€” UI logic and messaging

🚧 Roadmap

  • Template presets for quick timing changes (Classic/Short/Long/Ultra)
  • Custom template creator (save your own presets)
  • Implement task and goal tracking
  • Provide detailed statistics and reports
  • Introduce user accounts and cloud sync

🀝 Contributing

Contributions are welcome! Please read the CONTRIBUTING.md for guidelines.


πŸ’– Support

If you find this extension useful, consider supporting the project:

  • ⭐ Star this repository on GitHub
  • β˜• Buy me a coffee via PayPal
  • πŸ› Report bugs via Issues
  • πŸ’¬ Share feedback in Discussions

Your support helps maintain and improve this project!


πŸ‘€ Author

Minh Duy Do


πŸ“œ License

This project is licensed under the MIT License - see the LICENSE file for details.


πŸŽ‰ Acknowledgments

  • Inspired by the Pomodoro Technique
  • Built using Chrome Extensions MV3
  • Thanks to all contributors and supporters