☰

Useless Things Series: 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.

  1. // ==UserScript==
  2. // @name         Useless Things Series: Blur Screen After Idle
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @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.
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace https://greasyfork.org/users/1126616
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Set the idle time in seconds
  16.     const idleTimeSeconds = 10; // 10 seconds
  17.     const idleTimeMilliseconds = idleTimeSeconds * 1000;
  18.  
  19.     let idleTimer;
  20.     let blurEnabled = localStorage.getItem('blurEnabled') === 'true';
  21.  
  22.     const overlayDiv = document.createElement('div');
  23.     overlayDiv.style.position = 'fixed';
  24.     overlayDiv.style.top = 0;
  25.     overlayDiv.style.left = 0;
  26.     overlayDiv.style.width = '100%';
  27.     overlayDiv.style.height = '100%';
  28.     overlayDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // semi-transparent black background
  29.     overlayDiv.style.backdropFilter = 'blur(10px)'; // apply a blur effect
  30.     overlayDiv.style.zIndex = 9999;
  31.     overlayDiv.style.display = blurEnabled ? 'block' : 'none';
  32.  
  33.     // Append the overlay to the body
  34.     document.body.appendChild(overlayDiv);
  35.  
  36.     function startIdleTimer() {
  37.         idleTimer = setTimeout(() => {
  38.             if (!blurEnabled) {
  39.                 overlayDiv.style.display = 'block';
  40.                 localStorage.setItem('blurEnabled', true);
  41.             }
  42.         }, idleTimeMilliseconds);
  43.     }
  44.  
  45.     function clearIdleTimer() {
  46.         clearTimeout(idleTimer);
  47.         startIdleTimer();
  48.         if (!blurEnabled) {
  49.             overlayDiv.style.display = 'none';
  50.             localStorage.setItem('blurEnabled', false);
  51.         }
  52.     }
  53.  
  54.     //Function to store the state of the cover overlay to local storage
  55.     function toggleBlur() {
  56.         blurEnabled = !blurEnabled;
  57.         if (!blurEnabled) {
  58.             overlayDiv.style.display = 'none';
  59.             localStorage.setItem('blurEnabled', false);
  60.         } else {
  61.             overlayDiv.style.display = 'block';
  62.             localStorage.setItem('blurEnabled', true);
  63.         }
  64.     }
  65.  
  66.     document.addEventListener('mousemove', clearIdleTimer);
  67.     document.addEventListener('keydown', clearIdleTimer);
  68.     document.addEventListener('click', clearIdleTimer);
  69.     document.addEventListener('scroll', clearIdleTimer);
  70.  
  71.     document.addEventListener('keydown', (event) => {
  72.         if (event.ctrlKey && event.key === 'b') {
  73.             toggleBlur();
  74.         }
  75.     });
  76.     document.addEventListener('scroll', clearIdleTimer);
  77.  
  78.     startIdleTimer();
  79. })();