Shows a timer on any website to track time spent, with hide/show toggle
Per
// ==UserScript==
// @name Website Usage Timer
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Shows a timer on any website to track time spent, with hide/show toggle
// @author Drewby123
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// Create the container
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.bottom = '20px';
container.style.right = '20px';
container.style.zIndex = '9999';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'flex-end';
container.style.gap = '6px';
// Create the timer box
const timerBox = document.createElement('div');
timerBox.id = 'site-timer-overlay';
timerBox.style.background = 'rgba(0, 0, 0, 0.7)';
timerBox.style.color = '#fff';
timerBox.style.padding = '10px 14px';
timerBox.style.borderRadius = '10px';
timerBox.style.fontFamily = 'monospace';
timerBox.style.fontSize = '14px';
timerBox.style.boxShadow = '0 2px 8px rgba(0,0,0,0.5)';
timerBox.textContent = 'Time on site: 00:00';
// Create the toggle button
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '⨉';
toggleBtn.style.background = '#000';
toggleBtn.style.border = '1px solid #fff';
toggleBtn.style.color = '#fff';
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.fontSize = '14px';
toggleBtn.style.fontFamily = 'monospace';
toggleBtn.style.padding = '4px 8px';
toggleBtn.style.borderRadius = '6px';
toggleBtn.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
toggleBtn.style.transition = 'background 0.2s';
toggleBtn.onmouseenter = () => toggleBtn.style.background = '#222';
toggleBtn.onmouseleave = () => toggleBtn.style.background = '#000';
let visible = true;
toggleBtn.onclick = () => {
visible = !visible;
timerBox.style.display = visible ? 'block' : 'none';
toggleBtn.textContent = visible ? '⨉' : '⧉';
};
container.appendChild(toggleBtn);
container.appendChild(timerBox);
document.body.appendChild(container);
// Timer logic
let seconds = 0;
setInterval(() => {
if (visible) {
seconds++;
const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
const secs = (seconds % 60).toString().padStart(2, '0');
timerBox.textContent = `Time on site: ${mins}:${secs}`;
}
}, 1000);
})();