Team Hexmos

I Created a Timer Chrome Extension

Sreedeep cv's photo
Sreedeep cv
·

4 min read

As a developer, there are moments when you realise you can make tools to simplify your life. I often needed a simple timer while working, so I decided to create a Chrome extension that helps me set quick timers without leaving the browser.

Here’s how I built it:

Project Setup

The first step was creating a manifest.json file, which is crucial for defining the metadata and behavior of the Chrome extension. The key properties included:

  • manifest_version: Set to 2, as per current guidelines.

  • name and description: The extension's name and a short description.

  • version: The version of the extension.

  • browser_action: Defines the icon and the popup HTML that appears when the extension is clicked.

  • permissions: Requested for notifications in this case.

Here's my manifest.json file:

{
  "manifest_version": 2,
  "name": "Quick Timer",
  "description": "Set and manage timers directly from your browser!",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["notifications"]
}

The default_popup points to popup.html, which serves as the UI for the extension.

Creating the User Interface

I created three files to build the UI and functionality:

  1. popup.html

  2. popup.js

  3. popup.css

Here’s the structure of popup.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Session Timer</title>
    <link rel="stylesheet" href="popup.css" />
</head>
<body>
    <div class="container">
        <h2>Session Timer</h2>
        <input id="minutesInput" type="number" placeholder="Minutes" />
        <button id="startTimerBtn">Start Timer</button>
        <button id="stopTimerBtn" disabled>Stop Timer</button>
        <p id="status"></p>
        <p id="timeRemaining"></p>
    </div>
    <script src="popup.js"></script>
</body>
</html>

The UI includes a text input for entering the timer duration in minutes and a button to start the timer.

Adding Functionality

The real magic happens in popup.js. When the timer is started, the script calculates the end time, sets a timeout, and sends a notification when the timer expires.

Here’s the JavaScript code:

document.addEventListener('DOMContentLoaded', () => {
    const startTimerBtn = document.getElementById('startTimerBtn');
    const stopTimerBtn = document.getElementById('stopTimerBtn');
    const minutesInput = document.getElementById('minutesInput');
    const status = document.getElementById('status');
    const timeRemaining = document.getElementById('timeRemaining');

    let timerInterval; // To store the interval ID
    let endTime; // To track when the timer should end

    const updateCountdown = () => {
        const now = Date.now();
        const remaining = Math.max(0, Math.floor((endTime - now) / 1000)); // Time left in seconds
        const minutes = Math.floor(remaining / 60);
        const seconds = remaining % 60;
        timeRemaining.textContent = `Time Remaining: ${minutes}:${seconds.toString().padStart(2, '0')}`;

        if (remaining <= 0) {
            clearInterval(timerInterval);
            timeRemaining.textContent = 'Session Complete!';
            status.textContent = '';
            stopTimerBtn.disabled = true;
            startTimerBtn.disabled = false;

            // Show notification
            chrome.notifications.create('', {
                title: 'Timer Finished',
                message: 'Your session has ended!',
                iconUrl: 'icon.png',
                type: 'basic',
            });
        }
    };

    const startTimer = () => {
        const minutes = parseInt(minutesInput.value);
        if (isNaN(minutes) || minutes <= 0) {
            status.textContent = 'Please enter a valid number of minutes.';
            return;
        }

        endTime = Date.now() + minutes * 60000; // Calculate end time in milliseconds
        status.textContent = `Timer started for ${minutes} minute(s).`;
        timeRemaining.textContent = ''; // Clear previous time if any
        startTimerBtn.disabled = true;
        stopTimerBtn.disabled = false;

        // Update the countdown every second
        timerInterval = setInterval(updateCountdown, 1000);
    };

    const stopTimer = () => {
        clearInterval(timerInterval); // Clear the interval
        status.textContent = 'Timer stopped.';
        timeRemaining.textContent = '';
        startTimerBtn.disabled = false;
        stopTimerBtn.disabled = true;
    };

    startTimerBtn.addEventListener('click', startTimer);
    stopTimerBtn.addEventListener('click', stopTimer);
});

Key points:

  • Input validation: Ensures a positive number is entered.

  • Timer setup: Uses setTimeout to track the timer duration.

  • Notifications: The chrome.notifications API alerts the user when the timer ends.

Styling the Extension

The popup.css file gives the extension a clean look:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 1rem;
    width: 300px;
}

.container {
    text-align: center;
}

input {
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
}

button {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

button:hover:enabled {
    background-color: #0056b3;
}

#status {
    margin-top: 1rem;
    font-weight: bold;
}

#timeRemaining {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #333;
}

Testing the Extension

To test, I loaded the extension in Chrome:

  1. Opened chrome://extensions.

  2. Enabled Developer Mode.

  3. Used Load Unpacked to select the project directory.

Afterward, the extension appeared in my toolbar, ready to use.

Conclusion

Building this extension showed me how powerful Chrome’s APIs can be. The ability to quickly set timers and get notified right from the browser toolbar has already improved my workflow. If you’ve never built a Chrome extension before, I highly recommend giving it a try.

I am currently working on LiveAPI ; super convenient api documentation generator. If you like to get free documentations for your back-end projects do try it out.

chrome extension