☰

Persistent Floating Stopwatch

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

  1. // ==UserScript==
  2. // @name         Persistent Floating Stopwatch
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  It adds a persistent stopwatch to any page that continues even if you reload the page
  6. // @author       b4kt
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      GNU GPLv3
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Add the HTML and CSS to the page
  16.     const stopwatchHTML = `
  17.     <div id="stopwatch" style="
  18.         position: fixed;
  19.         top: 10px;
  20.         right: 10px;
  21.         z-index: 9999;
  22.         background-color: #f9f9f9;
  23.         border: 1px solid #ccc;
  24.         padding: 8px;
  25.         border-radius: 5px;
  26.         font-family: monospace;
  27.         font-size: 14px;
  28.         text-align: center;
  29.     ">
  30.         <div id="stopwatch-time">00:00:00</div>
  31.         <button id="stopwatch-start">Start</button>
  32.         <button id="stopwatch-stop" style="display:none;">Stop</button>
  33.         <button id="stopwatch-reset">Reset</button>
  34.     </div>
  35.     `;
  36.  
  37.     document.body.insertAdjacentHTML('beforeend', stopwatchHTML);
  38.  
  39.     // Stopwatch functionality
  40.     let startTime;
  41.     let elapsedTime = localStorage.getItem('elapsedTime') ? parseInt(localStorage.getItem('elapsedTime')) : 0;
  42.     let timerInterval;
  43.  
  44.     function updateTime() {
  45.         elapsedTime = Date.now() - startTime;
  46.         localStorage.setItem('elapsedTime', elapsedTime);
  47.         const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
  48.         document.getElementById('stopwatch-time').textContent = timeString;
  49.     }
  50.  
  51.     function startStopwatch() {
  52.         startTime = Date.now() - elapsedTime;
  53.         timerInterval = setInterval(updateTime, 100);
  54.         document.getElementById('stopwatch-start').style.display = 'none';
  55.         document.getElementById('stopwatch-stop').style.display = '';
  56.         localStorage.setItem('stopwatchRunning', 'true');
  57.     }
  58.  
  59.     function stopStopwatch() {
  60.         clearInterval(timerInterval);
  61.         document.getElementById('stopwatch-start').style.display = '';
  62.         document.getElementById('stopwatch-stop').style.display = 'none';
  63.         localStorage.setItem('stopwatchRunning', 'false');
  64.     }
  65.  
  66.     function resetStopwatch() {
  67.         clearInterval(timerInterval);
  68.         elapsedTime = 0;
  69.         localStorage.setItem('elapsedTime', elapsedTime);
  70.         document.getElementById('stopwatch-time').textContent = '00:00:00';
  71.         document.getElementById('stopwatch-start').style.display = '';
  72.         document.getElementById('stopwatch-stop').style.display = 'none';
  73.         localStorage.setItem('stopwatchRunning', 'false');
  74.     }
  75.  
  76.     document.getElementById('stopwatch-start').addEventListener('click', startStopwatch);
  77.     document.getElementById('stopwatch-stop').addEventListener('click', stopStopwatch);
  78.     document.getElementById('stopwatch-reset').addEventListener('click', resetStopwatch);
  79.  
  80.     // Set the initial state of the stopwatch based on stored data
  81.     if (elapsedTime > 0) {
  82.         const timeString = new Date(elapsedTime).toISOString().substr(11, 8);
  83.         document.getElementById('stopwatch-time').textContent = timeString;
  84.     }
  85.  
  86.     if (localStorage.getItem('stopwatchRunning') === 'true') {
  87.         startStopwatch();
  88.     } else {
  89.         stopStopwatch();
  90.     }
  91. })();