Implementing a Pomodoro Timer Chrome Extension that work straight out of the box.
Table of Contents
Overview
This tutorial will guide you through creating a simple yet effective Pomodoro Timer as a Chrome Extension. The timer will notify you when it’s time to take a break, and the notification will include options to start the break or skip it.
What is Pomodoro
It’s a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break work into intervals, traditionally 25 minutes in length, separated by short breaks. These intervals are known as “pomodoros,” named after the Italian word for tomato, inspired by the tomato-shaped kitchen timer Cirillo used as a university student.
Here’s a simplified overview of how the Pomodoro Technique works:
- Choose a Task: Select the task you want to work on.
- Set the Pomodoro Timer: Set the timer for 25 minutes.
- Work on the Task: Work on the task until the timer rings; then put a checkmark on a piece of paper.
- Take a Short Break: Take a short break (5 minutes is a good starting point).
- Every Four Pomodoros: After four pomodoros, take a longer break (15-30 minutes).
This technique is designed to improve focus and concentration by breaking down work into short, manageable intervals, while also providing regular breaks to refresh the mind.
Make your own Pomodoro Timer Chrome Extension
Creating a Basic Chrome Extension for a Pomodoro Timer
Creating a basic Chrome extension for a Pomodoro timer involves several steps. Below is an overview of how you can create such an extension, including the basic files you need and some example code for each.
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript
- Chrome Browser installed
- Text Editor (e.g., VS Code, Sublime Text, or any editor of your choice)
- Basic knowledge of how Chrome Extensions work
Step 1: Set Up Your Project
- Create a New Folder for your project (e.g.,
PomodoroTimerExtension). - Inside this folder, create the following files and sub-folders:
manifest.jsonbackground.jspopup.htmlpopup.js- A sub-folder named
imagesfor icons and other images.
Step 2: Prepare the Manifest File
First, you’ll need a manifest.json file, which tells Chrome everything it needs to know about your extension—its name, version, permissions it needs, and the files it uses.
{
 "manifest_version": 3,
 "name": "Pomodoro Timer",
 "version": "1.0",
 "description": "A simple Pomodoro timer to help you manage your work and break times.",
 "permissions": ["alarms", "notifications"],
 "action": {
  "default_popup": "popup.html",
  "default_icon": {
   "16": "images/tomato16.png",
   "48": "images/tomato48.png",
   "128": "images/tomato128.png"
  }
 },
 "background": {
  "service_worker": "background.js"
 },
 "icons": {
  "16": "images/tomato16.png",
  "48": "images/tomato48.png",
  "128": "images/tomato128.png"
 }
}
- Ensure you have icons at the specified paths.
Step 3: Create the Popup
The popup.html and popup.js files define the UI and functionality of the popup that appears when you click the extension icon.
popup.html
<!DOCTYPE html>
<html>
<head>
  <title>Pomodoro Timer</title>
  <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
  <div id="timer">25:00</div>
  <button id="start">Start</button>
   <button id="stop">Stop</button>
  <button id="reset" disabled>Reset</button>
  <script src="popup.js"></script>
</body>
</html>
popup.js
document.getElementById('start').addEventListener('click', () => {
  chrome.runtime.sendMessage({ command: 'start' });
  document.getElementById('reset').disabled = false; // Enable the "Reset" button
});
document.getElementById('stop').addEventListener('click', () => {
  chrome.runtime.sendMessage({ command: 'stop' });
  // Optionally decide if the "Reset" button should be enabled or disabled here
});
document.getElementById('reset').addEventListener('click', () => {
  chrome.runtime.sendMessage({ command: 'reset' });
});
// Listener for messages from the background script to update the timer display
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.timer) {
    document.getElementById('timer').textContent = message.timer;
  }
});
READ ALSO: 5 Minutes Tutorial: Making a Word Count Google Chrome Extension
Step 4: Implement the Background Script
The background.js script manages the timer and creates notifications.
let countdown;
let time = 25 * 60; // Initial timer set for 25 minutes
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.command === 'start') {
    startTimer();
  } else if (message.command === 'reset') {
    resetTimer();
  }
});
function startTimer() {
  if (time === 25 * 60 || countdown === undefined) { // Start a new timer if it's reset or not set
    clearInterval(countdown); // Clear any existing intervals
    countdown = setInterval(() => {
      if (time > 0) {
        time--;
        updatePopup();
      } else {
        completeTimer(); // Handle the completion of the timer
      }
    }, 1000);
  } else { // Resume the existing timer
    countdown = setInterval(() => {
      if (time > 0) {
        time--;
        updatePopup();
      } else {
        completeTimer(); // Handle the completion of the timer
      }
    }, 1000);
  }
}
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Existing message handling for 'start' and 'reset'
  if (message.command === 'stop') {
    stopTimer(); // Implement this function to pause the timer
  }
});
function stopTimer() {
  clearInterval(countdown);
  // Do not reset the time variable here to allow the timer to resume from where it was paused
}
function resetTimer() {
  clearInterval(countdown);
  time = 25 * 60; // Reset the timer to 25 minutes
  isRunning = false; // Ensure to mark the timer as not running
  updatePopup(); // Update the popup with the new time
}
function completeTimer() {
  clearInterval(countdown); // Stop the countdown
  // Reset the time for the next session but don't start counting down automatically
  time = 25 * 60;
  updatePopup(); // Update the popup with the reset time
   Â
  // Trigger the notification
  chrome.notifications.create({
    type: 'image',
    iconUrl: 'images/tomato128.png',
    title: 'Time is up!',
    message: 'Take a break, your 25-minute session is complete.',
       imageUrl: 'images/stop.jpg',
       requireInteraction: true, // The notification will stay until the user interacts with it
  buttons: [
    {title: "Start Break"},
    {title: "Skip Break"}
  ],
    priority: 2
  });
}
function updatePopup() {
  let minutes = Math.floor(time / 60);
  let seconds = time % 60;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  seconds = seconds < 10 ? '0' + seconds : seconds;
  chrome.runtime.sendMessage({ timer: `${minutes}:${seconds}` });
}
Step 5:Â Add Styling with CSS
The popup.css file will add some basic styling to your popup.
body {
  width: 200px;
  padding: 10px;
  text-align: center;
}
#timer {
  font-size: 2em;
  margin-bottom: 20px;
}
button {
  margin: 5px;
}
Step 6:Â Create Your Images
You will need to create or find some tomato images to use as icons (tomato16.png, tomato48.png, tomato128.png, stop.jpg) and place them in an images folder.
Image Sizes:
tomato16.png (16px w x 16px h)tomato48.png (48px w x 48px h)tomato128.png (128px w x 128px h)- stop.jpgÂ
(512px w x 512px h)
Step 7: Load Your Extension into Chrome
- Open Chrome and navigate to
chrome://extensions/. - Enable “Developer mode” at the top right.
- Click “Load unpacked” and select your project folder.
Now, you should see the Pomodoro Timer extension icon in your browser. Clicking it will open the popup with the start, stop and reset buttons. Starting the timer will count down from 25 minutes, showing the remaining time in the popup. When the timer ends, a notification will appear.
Make your own Pomodoro Timer Chrome Extension: Conclusion
Congratulations! You’ve just created a Pomodoro
Important Note for Developers:
When developing and testing your Pomodoro Timer Chrome Extension, it’s highly recommended to adjust the timer duration to a shorter period, such as 10 seconds, instead of the standard 25 minutes. This adjustment allows for quicker testing cycles, enabling you to verify the functionality of your timer and notifications without the long wait.
Adjusting the Timer for Testing:
In your background.js file, locate the line where the timer duration is set:
let time = 25 * 60; // 25 minutes
There are in total 4 instance of time duration that you’ll need to change.
let time = 10; // 10 seconds for testing
Remember to revert this change to the standard duration (e.g., 25 minutes) once you’ve completed your testing and before publishing or sharing your extension.
This practice ensures efficient development and testing, allowing you to focus on improving and refining your extension’s features without unnecessary delays.
How You Could Improve the Timer
If you plan to continue developing or refining this extension, here are a few additional features or improvements you might want to consider:
- Customizable Timer Durations: Allow users to set their preferred focus and break durations through the extension’s popup or options page.
- Long Breaks: Implement the traditional Pomodoro technique feature of taking a longer break after a set number of focus periods.
- Audio Alerts: Add optional audio notifications for when the timer starts, pauses, or completes, in addition to the visual notification.
- Task Integration: Allow users to input and select tasks they are working on during each Pomodoro session, helping with productivity tracking.
- Statistics: Offer insights into how many Pomodoro sessions a user has completed over time, average focus time, breaks taken, etc., to help users monitor and improve their productivity patterns.
Digital Designer, blog writer and also a tech enthusiast.
He loves to write content for blogs, podcasts, design websites, logos, brochures, banners and anything that sends a message to an audience.
You can contact Daniele at the link below:
