☰

Blur Screen After Idle

This script adds a blur overlay to the screen. Through the set idle time and pressing Ctrl B. Even if the page is refreshed the overlay will persists.

As of 2024-02-17. See the latest version.

// ==UserScript==
// @name         Blur Screen After Idle
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  This script adds a blur overlay to the screen. Through the set idle time and pressing Ctrl B. Even if the page is refreshed the overlay will persists.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==

(function() {
    'use strict';

    // Set the idle time in seconds
    const idleTimeSeconds = 2; // 10 seconds
    const idleTimeMilliseconds = idleTimeSeconds * 1000;

    let idleTimer;
    let blurEnabled = localStorage.getItem('blurEnabled') === 'true';

    const overlayDiv = document.createElement('div');
    overlayDiv.style.position = 'fixed';
    overlayDiv.style.top = 0;
    overlayDiv.style.left = 0;
    overlayDiv.style.width = '100%';
    overlayDiv.style.height = '100%';
    overlayDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // semi-transparent black background
    overlayDiv.style.backdropFilter = 'blur(10px)'; // apply a blur effect
    overlayDiv.style.zIndex = 9999;
    overlayDiv.style.display = blurEnabled ? 'block' : 'none';

    // Append the overlay to the body
    document.body.appendChild(overlayDiv);

    function startIdleTimer() {
        idleTimer = setTimeout(() => {
            if (!blurEnabled) {
                overlayDiv.style.display = 'block';
                localStorage.setItem('blurEnabled', true);
            }
        }, idleTimeMilliseconds);
    }

    function clearIdleTimer() {
        clearTimeout(idleTimer);
        startIdleTimer();
        if (!blurEnabled) {
            overlayDiv.style.display = 'none';
            localStorage.setItem('blurEnabled', false);
        }
    }

    //Function to store the state of the cover overlay to local storage
    function toggleBlur() {
        blurEnabled = !blurEnabled;
        if (!blurEnabled) {
            overlayDiv.style.display = 'none';
            localStorage.setItem('blurEnabled', false);
        } else {
            overlayDiv.style.display = 'block';
            localStorage.setItem('blurEnabled', true);
        }
    }

    document.addEventListener('mousemove', clearIdleTimer);
    document.addEventListener('keydown', clearIdleTimer);
    document.addEventListener('click', clearIdleTimer);
    document.addEventListener('scroll', clearIdleTimer);

    document.addEventListener('keydown', (event) => {
        if (event.ctrlKey && event.key === 'b') {
            toggleBlur();
        }
    });
    document.addEventListener('scroll', clearIdleTimer);

    startIdleTimer();
})();