Tab viewing timer

Timer for when a tab being focused in HH:MM format. Reset after 24 hours.

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

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

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name        Tab viewing timer 
// @description Timer for when a tab being focused in HH:MM format. Reset after 24 hours.
// @version     1.0
// @author      Jenie
// @namespace   FFW Scripts
// @include     *
// @grant       none
// @noframes
// @license     MIT
// ==/UserScript==

document.body.insertAdjacentHTML(
	'beforeend',
	`<div id="timer" title="${new Date()}" style="position:fixed;bottom:0;right:0;color:#fff;background-color:#000;padding:10px;z-index:1000000;cursor:pointer;border-radius:2px;margin:10px;"><span>00:00</span></div>`
);

const timerSpan = document.querySelector('div#timer > span');
let focused = !0;
let seconds = 0;
window.setInterval(() => {
	if (!focused) return;
	seconds++;
	timerSpan.textContent = new Date(seconds * 1000).toISOString().substr(11, 5);
}, 1000);

const timerDiv = document.querySelector('div#timer');
timerDiv.addEventListener('click', () => {
	focused = !focused;
	timerDiv.style.color = focused ? '#fff' : 'red';
});

window.addEventListener('blur', () => {
	focused = !1;
	timerDiv.style.color = 'red';
});
window.addEventListener('focus', () => {
	focused = !0;
	timerDiv.style.color = '#fff';
});