☰

Persistent Floating Stopwatch

It adds a persistent stopwatch to any page that continues even if you reload the page

// ==UserScript==
// @name         Persistent Floating Stopwatch
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  It adds a persistent stopwatch to any page that continues even if you reload the page
// @author       b4kt
// @match        *://*/*
// @grant        none
// @license      GNU GPLv3
// ==/UserScript==

(function() {
    'use strict';

    // Add the HTML and CSS to the page
    const stopwatchHTML = `
    <div id="stopwatch" style="
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 9999;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 5px;
        font-family: monospace;
        font-size: 14px;
        text-align: center;
    ">
        <div id="stopwatch-time">00:00:00</div>
        <button id="stopwatch-start">Start</button>
        <button id="stopwatch-stop" style="display:none;">Stop</button>
        <button id="stopwatch-reset">Reset</button>
    </div>
    `;

    document.body.insertAdjacentHTML('beforeend', stopwatchHTML);

    // Stopwatch functionality
    let startTime;
    let elapsedTime = localStorage.getItem('elapsedTime') ? parseInt(localStorage.getItem('elapsedTime')) : 0;
    let timerInterval;

    function updateTime() {
        elapsedTime = Date.now() - startTime;
        localStorage.setItem('elapsedTime', elapsedTime);
        const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
        document.getElementById('stopwatch-time').textContent = timeString;
    }

    function startStopwatch() {
        startTime = Date.now() - elapsedTime;
        timerInterval = setInterval(updateTime, 100);
        document.getElementById('stopwatch-start').style.display = 'none';
        document.getElementById('stopwatch-stop').style.display = '';
        localStorage.setItem('stopwatchRunning', 'true');
    }

    function stopStopwatch() {
        clearInterval(timerInterval);
        document.getElementById('stopwatch-start').style.display = '';
        document.getElementById('stopwatch-stop').style.display = 'none';
        localStorage.setItem('stopwatchRunning', 'false');
    }

    function resetStopwatch() {
        clearInterval(timerInterval);
        elapsedTime = 0;
        localStorage.setItem('elapsedTime', elapsedTime);
        document.getElementById('stopwatch-time').textContent = '00:00:00';
        document.getElementById('stopwatch-start').style.display = '';
        document.getElementById('stopwatch-stop').style.display = 'none';
        localStorage.setItem('stopwatchRunning', 'false');
    }

    document.getElementById('stopwatch-start').addEventListener('click', startStopwatch);
    document.getElementById('stopwatch-stop').addEventListener('click', stopStopwatch);
    document.getElementById('stopwatch-reset').addEventListener('click', resetStopwatch);

    // Set the initial state of the stopwatch based on stored data
    if (elapsedTime > 0) {
        const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
        document.getElementById('stopwatch-time').textContent = timeString;
    }

    if (localStorage.getItem('stopwatchRunning') === 'true') {
        startStopwatch();
    } else {
        stopStopwatch();
    }
})();