Last active
February 5, 2025 02:08
-
-
Save ArrEssJay/feeabb099278c542db95958ed6d92236 to your computer and use it in GitHub Desktop.
Tampermonkey script to overlay a 24hr clock.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name 24hr Clock & Date Overlay | |
| // @namespace http://your.namespace.here | |
| // @version 2.2 | |
| // @author Your Name | |
| // @match *://*/* | |
| // @grant GM_registerMenuCommand | |
| // @run-at document-end | |
| // ==/UserScript== | |
| (function() { | |
| 'use strict'; | |
| console.log('24hr clock script loaded (manual toggle mode)'); | |
| let clockActive = false; | |
| let observer = null; | |
| let intervalID = null; | |
| // Function to add the clock overlay | |
| function addClock() { | |
| if (!document.getElementById('myClockOverlay')) { | |
| const container = document.createElement('div'); | |
| container.id = 'myClockOverlay'; | |
| container.style.position = 'fixed'; | |
| container.style.top = '5px'; | |
| container.style.right = '5px'; | |
| container.style.backgroundColor = 'black'; // solid background | |
| container.style.color = 'white'; | |
| container.style.borderRadius = '10px'; // rounded corners | |
| container.style.zIndex = '9999999'; | |
| container.style.textAlign = 'center'; // center the text | |
| container.style.fontFamily = 'Menlo, monospace'; | |
| // Removed bold styling: container.style.fontWeight is not set | |
| // Create element for the time | |
| const timeElem = document.createElement('div'); | |
| timeElem.id = 'clockTime'; | |
| timeElem.style.fontSize = '32pt'; | |
| timeElem.style.lineHeight = '1'; | |
| // Create element for the date (small text) | |
| const dateElem = document.createElement('div'); | |
| dateElem.id = 'clockDate'; | |
| dateElem.style.fontSize = '14pt'; | |
| dateElem.style.marginTop = '3px'; | |
| container.appendChild(timeElem); | |
| container.appendChild(dateElem); | |
| document.body.appendChild(container); | |
| // Function to update the time and date | |
| function updateClock() { | |
| const now = new Date(); | |
| const hours = String(now.getHours()).padStart(2, '0'); | |
| const minutes = String(now.getMinutes()).padStart(2, '0'); | |
| const seconds = String(now.getSeconds()).padStart(2, '0'); | |
| timeElem.textContent = `${hours}:${minutes}:${seconds}`; | |
| const options = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }; | |
| dateElem.textContent = now.toLocaleDateString(undefined, options); | |
| } | |
| updateClock(); | |
| intervalID = setInterval(updateClock, 1000); | |
| } | |
| } | |
| // Function to remove the clock overlay | |
| function removeClock() { | |
| const clockElem = document.getElementById('myClockOverlay'); | |
| if (clockElem) { | |
| clockElem.parentNode.removeChild(clockElem); | |
| } | |
| if (intervalID !== null) { | |
| clearInterval(intervalID); | |
| intervalID = null; | |
| } | |
| } | |
| // Start a MutationObserver to re-add the clock if the page removes it | |
| function startObserver() { | |
| if (observer) return; | |
| observer = new MutationObserver(() => { | |
| if (!document.getElementById('myClockOverlay') && clockActive) { | |
| console.log('Clock overlay removed, re-injecting...'); | |
| addClock(); | |
| } | |
| }); | |
| if (document.body) { | |
| observer.observe(document.body, { childList: true, subtree: true }); | |
| } | |
| } | |
| // Stop the MutationObserver | |
| function stopObserver() { | |
| if (observer) { | |
| observer.disconnect(); | |
| observer = null; | |
| } | |
| } | |
| // Toggle the clock overlay on or off | |
| function toggleClock() { | |
| if (clockActive) { | |
| removeClock(); | |
| stopObserver(); | |
| clockActive = false; | |
| console.log('Clock overlay disabled'); | |
| } else { | |
| addClock(); | |
| startObserver(); | |
| clockActive = true; | |
| console.log('Clock overlay enabled'); | |
| } | |
| } | |
| // Register a menu command to toggle the clock overlay | |
| GM_registerMenuCommand("Toggle Clock Overlay", toggleClock, "T"); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment