Website Usage Timer

Shows a timer on any website to track time spent, with hide/show toggle

Från och med 2025-03-13. Se den senaste versionen.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Website Usage Timer
// @namespace    http://tampermonkey.net/
// @version      1.2
// @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 timer container
    const container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.bottom = '20px';
    container.style.right = '20px';
    container.style.zIndex = '9999';

    // 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.marginLeft = '6px';
    toggleBtn.style.background = 'transparent';
    toggleBtn.style.border = 'none';
    toggleBtn.style.color = '#fff';
    toggleBtn.style.cursor = 'pointer';
    toggleBtn.style.fontSize = '14px';
    toggleBtn.style.fontFamily = 'monospace';
    toggleBtn.style.padding = '2px 6px';

    let visible = true;
    toggleBtn.onclick = () => {
        visible = !visible;
        timerBox.style.display = visible ? 'block' : 'none';
        toggleBtn.textContent = visible ? '⨉' : '⧉';
    };

    container.appendChild(timerBox);
    container.appendChild(toggleBtn);
    document.body.appendChild(container);

    // Start timer
    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);
})();