☰

Time Spent on Youtube

A simple timer that shows how much time you spent on Youtube today.

  1. // ==UserScript==
  2. // @name         Time Spent on Youtube
  3. // @version      2022.08.30.07.46
  4. // @description  A simple timer that shows how much time you spent on Youtube today.
  5. // @license      MIT
  6. // @author       Marco Dalla Gatta
  7. // @namespace    https://github.com/marcodallagatta/userscripts/raw/main/youtube-time-spent/
  8. // @match        https://www.youtube.com/*
  9. // @icon         https://icons.duckduckgo.com/ip2/youtube.com.ico
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   "use strict";
  14.  
  15.   const background = false; // 'true' also counts when YT is in a background tab, 'false' only counts active tab
  16.   const showInTitle = true; // 'true' prepend the minutes before the title in the tab
  17.   const originalTitle = document.title;
  18.   const resetTime = 4; // time when the timer resets, 24h time (0 = midnight, 4 = 4AM, 15 = 3PM)
  19.  
  20.   const today = new Date();
  21.   const dd = String(today.getDate()).padStart(2, "0");
  22.   const mm = String(today.getMonth() + 1).padStart(2, "0");
  23.   const yyyy = today.getFullYear();
  24.   const todayYYMMDD = yyyy + mm + dd;
  25.   const hours = today.getHours();
  26.  
  27.   let spent = 0;
  28.   
  29.   if (localStorage.getItem("date") !== todayYYMMDD && hours >= resetTime) {
  30.     localStorage.setItem("date", todayYYMMDD);
  31.     localStorage.setItem("spent", 0);
  32.   } else {
  33.     spent = parseFloat(localStorage.getItem("spent"));
  34.   }
  35.  
  36.   const inDOM = document.getElementById("start");
  37.   let elem = document.createElement("span");
  38.   elem.style = "color:white;font-size:2rem";
  39.   inDOM.appendChild(elem);
  40.   
  41.   function showAlert(time) {
  42.     const mm = (Math.trunc(time) % 60).toString();
  43.     if (time > 60) {
  44.       const hh = Math.trunc(time / 60).toString();
  45.       elem.innerText = `${hh}h ${mm}m`;
  46.       if (showInTitle) document.title = `${hh}h${mm.padStart(2, "0")}m ${originalTitle}`;
  47.     } else {
  48.       elem.innerText = `${mm}m`;
  49.       if (showInTitle) document.title = `${mm.padStart(2, "0")}m ${originalTitle}`;
  50.     }
  51.   }
  52.  
  53.   setInterval(function () {
  54.     if (background || document.hasFocus()) {
  55.       spent = parseFloat(localStorage.getItem("spent")) + 0.25;
  56.       localStorage.setItem("spent", spent);
  57.       showAlert(spent);
  58.     }
  59.   }, 15000); // 15s
  60.  
  61.   // triggers after a few seconds since by default YT overwrites titlebar after a while on load \_(ツ)_/
  62.   setTimeout(function () { showAlert(spent) }, 2000);
  63.  
  64. })();