// ==UserScript== // @name TikTok Daily Time Tracker // @namespace tweeks.io // @version 1.0 // @description Tracks how long you actively spend on TikTok each day and resets automatically at 12:00 AM. // @author Tweeks // @match https://www.tiktok.com/* // @run-at document-end // @grant GM_registerMenuCommand // ==/UserScript== (function () { 'use strict'; const STORAGE_KEYS = { day: 'ttDailyTimer.day', ms: 'ttDailyTimer.ms', hidden: 'ttDailyTimer.hidden' }; const PANEL_ID = 'tt-daily-time-tracker-panel'; const STYLE_ID = 'tt-daily-time-tracker-style'; const IDLE_TIMEOUT_MS = 60 * 1000; const TICK_MS = 1000; const MAX_DELTA_MS = 5000; const state = { day: '', ms: 0, hidden: localStorage.getItem(STORAGE_KEYS.hidden) === '1', lastInteraction: Date.now(), lastTick: Date.now(), midnightTimeout: null }; function getTodayKey(date = new Date()) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } function loadStoredState() { const today = getTodayKey(); const storedDay = localStorage.getItem(STORAGE_KEYS.day); const storedMs = Number(localStorage.getItem(STORAGE_KEYS.ms) || '0'); if (storedDay !== today) { state.day = today; state.ms = 0; saveState(); return; } state.day = storedDay || today; state.ms = Number.isFinite(storedMs) && storedMs > 0 ? storedMs : 0; } function saveState() { localStorage.setItem(STORAGE_KEYS.day, state.day); localStorage.setItem(STORAGE_KEYS.ms, String(Math.max(0, Math.floor(state.ms)))); } function ensureCurrentDay() { const today = getTodayKey(); if (state.day === today) { return false; } state.day = today; state.ms = 0; saveState(); return true; } function resetTodayTimer() { state.day = getTodayKey(); state.ms = 0; state.lastTick = Date.now(); saveState(); renderPanel(); scheduleMidnightReset(); } function scheduleMidnightReset() { if (state.midnightTimeout) { clearTimeout(state.midnightTimeout); } const now = new Date(); const nextMidnight = new Date(now); nextMidnight.setHours(24, 0, 0, 0); const delay = Math.max(1000, nextMidnight.getTime() - now.getTime() + 50); state.midnightTimeout = window.setTimeout(() => { resetTodayTimer(); }, delay); } function markInteraction() { state.lastInteraction = Date.now(); } function isActivelyUsingTikTok() { return !document.hidden && document.hasFocus() && (Date.now() - state.lastInteraction) < IDLE_TIMEOUT_MS; } function formatDuration(ms) { const totalSeconds = Math.floor(ms / 1000); const hours = Math.floor(totalSeconds / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; return [hours, minutes, seconds].map((value) => String(value).padStart(2, '0')).join(':'); } function injectStyles() { if (document.getElementById(STYLE_ID)) { return; } const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` #${PANEL_ID} { position: fixed; right: 16px; bottom: 16px; z-index: 2147483647; width: 190px; padding: 12px 14px; border-radius: 14px; background: rgba(18, 18, 18, 0.9); color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); user-select: none; } #${PANEL_ID}[data-hidden="true"] { display: none; } #${PANEL_ID} .ttdt-label { font-size: 12px; line-height: 1.2; opacity: 0.78; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } #${PANEL_ID} .ttdt-time { font-size: 28px; font-weight: 700; line-height: 1.1; color: #25f4ee; margin-bottom: 8px; font-variant-numeric: tabular-nums; } #${PANEL_ID} .ttdt-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, 0.78); } #${PANEL_ID} .ttdt-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #${PANEL_ID} .ttdt-status::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #9ca3af; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); } #${PANEL_ID}[data-active="true"] .ttdt-status::before { background: #fe2c55; } #${PANEL_ID} .ttdt-reset-note { text-align: right; } @media (max-width: 767px) { #${PANEL_ID} { right: 10px; bottom: 10px; width: 168px; padding: 10px 12px; } #${PANEL_ID} .ttdt-time { font-size: 24px; } } `; (document.head || document.documentElement).appendChild(style); } function createPanel() { let panel = document.getElementById(PANEL_ID); if (panel) { return panel; } injectStyles(); panel = document.createElement('div'); panel.id = PANEL_ID; panel.setAttribute('role', 'status'); panel.setAttribute('aria-live', 'polite'); panel.setAttribute('aria-label', 'TikTok daily time tracker'); panel.innerHTML = `

TikTok today

00:00:00

Paused Resets 12:00 AM

`; const host = document.querySelector('#app') || document.body || document.documentElement; host.appendChild(panel); return panel; } function renderPanel() { const panel = createPanel(); const active = isActivelyUsingTikTok(); panel.dataset.hidden = state.hidden ? 'true' : 'false'; panel.dataset.active = active ? 'true' : 'false'; const timeElement = panel.querySelector('.ttdt-time'); const statusElement = panel.querySelector('.ttdt-status'); if (timeElement) { timeElement.textContent = formatDuration(state.ms); } if (statusElement) { statusElement.textContent = active ? 'Counting' : 'Paused'; } } function tick() { const now = Date.now(); const previousTick = state.lastTick; state.lastTick = now; const dayChanged = ensureCurrentDay(); if (dayChanged) { scheduleMidnightReset(); } if (isActivelyUsingTikTok()) { const delta = Math.max(0, Math.min(now - previousTick, MAX_DELTA_MS)); state.ms += delta; saveState(); } renderPanel(); } function syncFromStorage(event) { if (!event.key || !Object.values(STORAGE_KEYS).includes(event.key)) { return; } state.hidden = localStorage.getItem(STORAGE_KEYS.hidden) === '1'; loadStoredState(); state.lastTick = Date.now(); renderPanel(); } function togglePanelVisibility() { state.hidden = !state.hidden; localStorage.setItem(STORAGE_KEYS.hidden, state.hidden ? '1' : '0'); renderPanel(); } function registerMenuCommands() { if (typeof GM_registerMenuCommand === 'function') { GM_registerMenuCommand('Toggle TikTok timer panel', togglePanelVisibility); GM_registerMenuCommand('Reset today\'s TikTok timer', () => { if (window.confirm('Reset today\'s TikTok timer?')) { resetTodayTimer(); } }); } } function bindActivityEvents() { const activityEvents = ['pointerdown', 'pointermove', 'keydown', 'wheel', 'scroll', 'touchstart', 'mousemove']; activityEvents.forEach((eventName) => { window.addEventListener(eventName, markInteraction, { passive: true, capture: true }); }); window.addEventListener('focus', () => { markInteraction(); state.lastTick = Date.now(); renderPanel(); }); window.addEventListener('blur', () => { state.lastTick = Date.now(); renderPanel(); }); document.addEventListener('visibilitychange', () => { if (!document.hidden) { markInteraction(); } state.lastTick = Date.now(); renderPanel(); }); window.addEventListener('storage', syncFromStorage); } function keepPanelMounted() { window.setInterval(() => { if (!document.getElementById(PANEL_ID)) { renderPanel(); } }, 3000); } function init() { loadStoredState(); state.lastTick = Date.now(); injectStyles(); renderPanel(); bindActivityEvents(); registerMenuCommands(); scheduleMidnightReset(); keepPanelMounted(); window.setInterval(tick, TICK_MS); } init(); })();