☰

Greasy Fork is available in English.

Blur on inactivity Extended

https://greasyfork.org/en/scripts/466065-blur-on-inactivity with additional features

// ==UserScript==
// @name        Blur on inactivity Extended
// @description https://greasyfork.org/en/scripts/466065-blur-on-inactivity with additional features
// @author      Sadulisten @ Greasyfork
// @author      Schimon Jehudah, Adv.
// @namespace   Sadulisten
// @copyright   2023, Schimon Jehudah (http://schimon.i2p)
// @license     MIT; https://opensource.org/licenses/MIT
// @exclude     devtools://*
// @match       *://*/*
// @version     25
// @run-at      document-end
// @grant       GM_addStyle
// @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5al77iPPC90ZXh0Pjwvc3ZnPgo=
// ==/UserScript==

let sessionBlurDisabled = false;
let originalPageTitle = document.title;
let originalFaviconSource = getFavicon();
const originalFilter = document.body.style.filter;
const blurIntensity = 75;
const inactivityThresholdSeconds = 60;
const inactivityThresholdMiliseconds = inactivityThresholdSeconds * 1000;
let isBlurred = false;

function getFavicon() {
    var favicon = undefined;
    var nodeList = document.getElementsByTagName("link");
    for (var i = 0; i < nodeList.length; i++)
    {
        if((nodeList[i].getAttribute("rel") == "icon")||(nodeList[i].getAttribute("rel") == "shortcut icon"))
        {
            favicon = nodeList[i].getAttribute("href");
            break;
        }
    }
    if (favicon == undefined) return null;
    let isRelative = !favicon.includes("http");
    if (isRelative) favicon = (location.protocol == "https:" ? "https://www." : "http://www.") + window.location.hostname + favicon;
    return favicon;
}
function _changeFavicon(src) {
    var link = document.createElement('link'),
        oldLink = document.getElementById('dynamic-favicon');
    if (!oldLink) { oldLink = document.querySelector('link[rel*="icon"]');}
    link.id = 'dynamic-favicon';
    link.rel = 'shortcut icon';
    link.href = src;
    if (oldLink) {
        //document.head.removeChild(oldLink);
        oldLink.href = src;
    }
    document.head.appendChild(link);
}

function changeFavicon(newFaviconUrl) {
    let currentFaviconElement = document.querySelector('link[rel*="icon"]');
    if (currentFaviconElement) {
        currentFaviconElement.href = newFaviconUrl;
        if (!currentFaviconElement.hasAttribute("id"))
            currentFaviconElement.setAttribute("id", "dynamic-favicon");
    }
    else {
        var newFaviconElement = document.createElement('link');
        newFaviconElement.rel = "shortcut icon";
        newFaviconElement.id = "dynamic-favicon";
        newFaviconElement.href = newFaviconUrl;

        let head = document.getElementsByTagName("head")[0];
        if (!head) { document.head.insertBefore(newFaviconElement, document.head.firstChild); }
        else { head.insertBefore(newFaviconElement, head.firstChild); }
    }
}
function clamp(num, min, max) {
  return num <= min
    ? min
    : num >= max
      ? max
      : num
}
function addUnblurButton() {
    const btn = document.createElement("button");
    btn.id = blurButtonId;
    btn.innerHTML = "<span>👀</span>";
    btn.onclick = function() {
        document.querySelector("body").classList.remove("preventClicks");
        document.body.style.filter = originalFilter;
        blurButton.style.display = "none";
        blurCss.remove();
        blurCss = null;
        document.title = originalPageTitle;
        changeFavicon(originalFaviconSource);
        isBlurred = false;
    }

    GM_addStyle(
       `#${blurButtonId}
        {
            z-index:9999 !important;
            position:fixed !important;

            /*
            bottom:10px;
            right:10px;
            */
            top:50% !important;
            left:47% !important;

            display: none;
            box-shadow:inset 0px 1px 0px 0px #cf866c;
	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	        background-color:#d0451b;
            color:#ffffff;
	        border-radius:3px;
	        border:1px solid #942911;
	        cursor:pointer;
	        font-family:Arial;
	        font-size:13px;
	        padding:6px 24px;
	        text-decoration:none;
	        text-shadow:0px 1px 0px #854629;
        }
        #${blurButtonId}:hover
        {
            background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	        background-color:#bc3315;
        }
        #${blurButtonId}:hover:after
        {
            content: " Unblur Page";
        }
      `
    );
    document.body.appendChild(btn);
    return btn;
}
function addBlurNowButton() {
    const borderRadius = 12;
    const clickArea = document.createElement("div");
    const blurNowStyleButtonName = "blurNowButtonStyle";
    clickArea.id = unBlurButtonId;
    clickArea.title = "Blur the page now";
    clickArea.innerHTML = "<p style='text-align:center;color:white;margin-top:5px;'>😈</p>";

    GM_addStyle(
        `.${blurNowStyleButtonName} {
            position:fixed !important;
            bottom:0px !important;
            right:10px !important;
            width:50px !important;
            height:25px !important;
            -webkit-border-top-left-radius: ${borderRadius}px;
            -webkit-border-top-right-radius: ${borderRadius}px;
            -moz-border-radius-topleft: ${borderRadius}px;
            -moz-border-radius-topright: ${borderRadius}px;
            border-top-left-radius: ${borderRadius}px;
            border-top-right-radius: ${borderRadius}px;
            box-shadow:inset 0px 1px 0px 0px #cf866c;
	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	        background-color:#d0451b;
            transition: height 1s;
            z-index:9999 !important;
            text-decoration:none;
	        text-shadow:0px 1px 0px #854629;
        }

        .${blurNowStyleButtonName}:hover {
            background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	        background-color:#bc3315;
            height:30px !important;
            cursor:pointer;
        }`);

    clickArea.classList.add("blurNowButtonStyle");
    document.body.appendChild(clickArea);
    clickArea.onclick = function() {
        blurPage();
    }
    return clickArea;
}

function addDontBlurThisSessionButton() {
    const borderRadius = 12;
    const clickArea = document.createElement("div");
    const dontBlurThiSessionButtonStyle = "dontBlurThiSessionButtonStyle";
    clickArea.id = unBlurButtonId;
    clickArea.title = "This will disable bluring for this tab";
    clickArea.innerHTML = '<p id="text" style="text-align:center;color:white;margin-top:5px;">⏸️</p>';

    GM_addStyle(
        `.${dontBlurThiSessionButtonStyle} {
            position:fixed !important;
            bottom:0px !important;
            right:65px !important;
            width:50px !important;
            height:25px !important;
            -webkit-border-top-left-radius: ${borderRadius}px;
            -webkit-border-top-right-radius: ${borderRadius}px;
            -moz-border-radius-topleft: ${borderRadius}px;
            -moz-border-radius-topright: ${borderRadius}px;
            border-top-left-radius: ${borderRadius}px;
            border-top-right-radius: ${borderRadius}px;
            box-shadow:inset 0px 1px 0px 0px #cf866c;
	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	        background-color:#d0451b;
            transition: height 1s;
            z-index:9999 !important;
            text-decoration:none;
	        text-shadow:0px 1px 0px #854629;
        }

        .${dontBlurThiSessionButtonStyle}:hover {
            background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
	        background-color:#bc3315;
            height:30px !important;
            cursor:pointer;
        }`);

    clickArea.classList.add(dontBlurThiSessionButtonStyle);
    document.body.appendChild(clickArea);
    clickArea.onclick = function() {
        sessionBlurDisabled = !sessionBlurDisabled;
        dontBlurThisSessionButton.title = sessionBlurDisabled ? "This will enable bluring for this tab" : "This will disable bluring for this tab";
        dontBlurThisSessionButton.querySelector("#text").innerText = sessionBlurDisabled ? "▶️" : "⏸️";
    }
    return clickArea;
}

const blurButtonId = "unblurButton";
const unBlurButtonId = "blurNowButton";
const blurButton = addUnblurButton();
var blurCss = null;
const unBlurButton = addBlurNowButton();
const dontBlurThisSessionButton = addDontBlurThisSessionButton();

function blurPage() {
    if (isBlurred) return;

    if (blurCss == null) {
        blurCss = GM_addStyle(
            `body > *:not(#${blurButtonId}) {
                filter: blur(${clamp(blurIntensity, 1, 100)}px) !important;
                pointer-events: none !important;
            }`
        );
    }

    blurButton.style.display = "block";
    originalPageTitle = document.title;
    document.title = "Cute Kittens - Google Search";
    changeFavicon("https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128");
    isBlurred = true;
}

onInactive(inactivityThresholdMiliseconds, function () {
    if (sessionBlurDisabled) return;
    blurPage();
});

function onInactive(ms, cb) {
  var wait = setInterval(cb, ms);
  window.ontouchstart = 
  window.ontouchmove = 
  window.onmousemove = 
  window.onmousedown = 
  window.onmouseup = 
  window.onwheel = 
  window.onscroll = 
  window.onkeydown = 
  window.onkeyup = 
  window.onfocus = 
  function () {
    clearInterval(wait);
    wait = setInterval(cb, ms);
  };
}