☰

Blur on inactivity Extended

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

  1. // ==UserScript==
  2. // @name        Blur on inactivity Extended
  3. // @description https://greasyfork.org/en/scripts/466065-blur-on-inactivity with additional features
  4. // @author      Sadulisten @ Greasyfork
  5. // @author      Schimon Jehudah, Adv.
  6. // @namespace   Sadulisten
  7. // @copyright   2023, Schimon Jehudah (http://schimon.i2p)
  8. // @license     MIT; https://opensource.org/licenses/MIT
  9. // @exclude     devtools://*
  10. // @match       *://*/*
  11. // @version     25
  12. // @run-at      document-end
  13. // @grant       GM_addStyle
  14. // @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGV4dCB5PSIuOWVtIiBmb250LXNpemU9IjkwIj7wn5al77iPPC90ZXh0Pjwvc3ZnPgo=
  15. // ==/UserScript==
  16.  
  17. let sessionBlurDisabled = false;
  18. let originalPageTitle = document.title;
  19. let originalFaviconSource = getFavicon();
  20. const originalFilter = document.body.style.filter;
  21. const blurIntensity = 75;
  22. const inactivityThresholdSeconds = 60;
  23. const inactivityThresholdMiliseconds = inactivityThresholdSeconds * 1000;
  24. let isBlurred = false;
  25.  
  26. function getFavicon() {
  27.     var favicon = undefined;
  28.     var nodeList = document.getElementsByTagName("link");
  29.     for (var i = 0; i < nodeList.length; i++)
  30.     {
  31.         if((nodeList[i].getAttribute("rel") == "icon")||(nodeList[i].getAttribute("rel") == "shortcut icon"))
  32.         {
  33.             favicon = nodeList[i].getAttribute("href");
  34.             break;
  35.         }
  36.     }
  37.     if (favicon == undefined) return null;
  38.     let isRelative = !favicon.includes("http");
  39.     if (isRelative) favicon = (location.protocol == "https:" ? "https://www." : "http://www.") + window.location.hostname + favicon;
  40.     return favicon;
  41. }
  42. function _changeFavicon(src) {
  43.     var link = document.createElement('link'),
  44.         oldLink = document.getElementById('dynamic-favicon');
  45.     if (!oldLink) { oldLink = document.querySelector('link[rel*="icon"]');}
  46.     link.id = 'dynamic-favicon';
  47.     link.rel = 'shortcut icon';
  48.     link.href = src;
  49.     if (oldLink) {
  50.         //document.head.removeChild(oldLink);
  51.         oldLink.href = src;
  52.     }
  53.     document.head.appendChild(link);
  54. }
  55.  
  56. function changeFavicon(newFaviconUrl) {
  57.     let currentFaviconElement = document.querySelector('link[rel*="icon"]');
  58.     if (currentFaviconElement) {
  59.         currentFaviconElement.href = newFaviconUrl;
  60.         if (!currentFaviconElement.hasAttribute("id"))
  61.             currentFaviconElement.setAttribute("id", "dynamic-favicon");
  62.     }
  63.     else {
  64.         var newFaviconElement = document.createElement('link');
  65.         newFaviconElement.rel = "shortcut icon";
  66.         newFaviconElement.id = "dynamic-favicon";
  67.         newFaviconElement.href = newFaviconUrl;
  68.  
  69.         let head = document.getElementsByTagName("head")[0];
  70.         if (!head) { document.head.insertBefore(newFaviconElement, document.head.firstChild); }
  71.         else { head.insertBefore(newFaviconElement, head.firstChild); }
  72.     }
  73. }
  74. function clamp(num, min, max) {
  75.   return num <= min
  76.     ? min
  77.     : num >= max
  78.       ? max
  79.       : num
  80. }
  81. function addUnblurButton() {
  82.     const btn = document.createElement("button");
  83.     btn.id = blurButtonId;
  84.     btn.innerHTML = "<span>👀</span>";
  85.     btn.onclick = function() {
  86.         document.querySelector("body").classList.remove("preventClicks");
  87.         document.body.style.filter = originalFilter;
  88.         blurButton.style.display = "none";
  89.         blurCss.remove();
  90.         blurCss = null;
  91.         document.title = originalPageTitle;
  92.         changeFavicon(originalFaviconSource);
  93.         isBlurred = false;
  94.     }
  95.  
  96.     GM_addStyle(
  97.        `#${blurButtonId}
  98.         {
  99.             z-index:9999 !important;
  100.             position:fixed !important;
  101.  
  102.             /*
  103.             bottom:10px;
  104.             right:10px;
  105.             */
  106.             top:50% !important;
  107.             left:47% !important;
  108.  
  109.             display: none;
  110.             box-shadow:inset 0px 1px 0px 0px #cf866c;
  111. 	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
  112. 	        background-color:#d0451b;
  113.             color:#ffffff;
  114. 	        border-radius:3px;
  115. 	        border:1px solid #942911;
  116. 	        cursor:pointer;
  117. 	        font-family:Arial;
  118. 	        font-size:13px;
  119. 	        padding:6px 24px;
  120. 	        text-decoration:none;
  121. 	        text-shadow:0px 1px 0px #854629;
  122.         }
  123.         #${blurButtonId}:hover
  124.         {
  125.             background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
  126. 	        background-color:#bc3315;
  127.         }
  128.         #${blurButtonId}:hover:after
  129.         {
  130.             content: " Unblur Page";
  131.         }
  132.       `
  133.     );
  134.     document.body.appendChild(btn);
  135.     return btn;
  136. }
  137. function addBlurNowButton() {
  138.     const borderRadius = 12;
  139.     const clickArea = document.createElement("div");
  140.     const blurNowStyleButtonName = "blurNowButtonStyle";
  141.     clickArea.id = unBlurButtonId;
  142.     clickArea.title = "Blur the page now";
  143.     clickArea.innerHTML = "<p style='text-align:center;color:white;margin-top:5px;'>😈</p>";
  144.  
  145.     GM_addStyle(
  146.         `.${blurNowStyleButtonName} {
  147.             position:fixed !important;
  148.             bottom:0px !important;
  149.             right:10px !important;
  150.             width:50px !important;
  151.             height:25px !important;
  152.             -webkit-border-top-left-radius: ${borderRadius}px;
  153.             -webkit-border-top-right-radius: ${borderRadius}px;
  154.             -moz-border-radius-topleft: ${borderRadius}px;
  155.             -moz-border-radius-topright: ${borderRadius}px;
  156.             border-top-left-radius: ${borderRadius}px;
  157.             border-top-right-radius: ${borderRadius}px;
  158.             box-shadow:inset 0px 1px 0px 0px #cf866c;
  159. 	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
  160. 	        background-color:#d0451b;
  161.             transition: height 1s;
  162.             z-index:9999 !important;
  163.             text-decoration:none;
  164. 	        text-shadow:0px 1px 0px #854629;
  165.         }
  166.  
  167.         .${blurNowStyleButtonName}:hover {
  168.             background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
  169. 	        background-color:#bc3315;
  170.             height:30px !important;
  171.             cursor:pointer;
  172.         }`);
  173.  
  174.     clickArea.classList.add("blurNowButtonStyle");
  175.     document.body.appendChild(clickArea);
  176.     clickArea.onclick = function() {
  177.         blurPage();
  178.     }
  179.     return clickArea;
  180. }
  181.  
  182. function addDontBlurThisSessionButton() {
  183.     const borderRadius = 12;
  184.     const clickArea = document.createElement("div");
  185.     const dontBlurThiSessionButtonStyle = "dontBlurThiSessionButtonStyle";
  186.     clickArea.id = unBlurButtonId;
  187.     clickArea.title = "This will disable bluring for this tab";
  188.     clickArea.innerHTML = '<p id="text" style="text-align:center;color:white;margin-top:5px;">⏸️</p>';
  189.  
  190.     GM_addStyle(
  191.         `.${dontBlurThiSessionButtonStyle} {
  192.             position:fixed !important;
  193.             bottom:0px !important;
  194.             right:65px !important;
  195.             width:50px !important;
  196.             height:25px !important;
  197.             -webkit-border-top-left-radius: ${borderRadius}px;
  198.             -webkit-border-top-right-radius: ${borderRadius}px;
  199.             -moz-border-radius-topleft: ${borderRadius}px;
  200.             -moz-border-radius-topright: ${borderRadius}px;
  201.             border-top-left-radius: ${borderRadius}px;
  202.             border-top-right-radius: ${borderRadius}px;
  203.             box-shadow:inset 0px 1px 0px 0px #cf866c;
  204. 	        background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
  205. 	        background-color:#d0451b;
  206.             transition: height 1s;
  207.             z-index:9999 !important;
  208.             text-decoration:none;
  209. 	        text-shadow:0px 1px 0px #854629;
  210.         }
  211.  
  212.         .${dontBlurThiSessionButtonStyle}:hover {
  213.             background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
  214. 	        background-color:#bc3315;
  215.             height:30px !important;
  216.             cursor:pointer;
  217.         }`);
  218.  
  219.     clickArea.classList.add(dontBlurThiSessionButtonStyle);
  220.     document.body.appendChild(clickArea);
  221.     clickArea.onclick = function() {
  222.         sessionBlurDisabled = !sessionBlurDisabled;
  223.         dontBlurThisSessionButton.title = sessionBlurDisabled ? "This will enable bluring for this tab" : "This will disable bluring for this tab";
  224.         dontBlurThisSessionButton.querySelector("#text").innerText = sessionBlurDisabled ? "▶️" : "⏸️";
  225.     }
  226.     return clickArea;
  227. }
  228.  
  229. const blurButtonId = "unblurButton";
  230. const unBlurButtonId = "blurNowButton";
  231. const blurButton = addUnblurButton();
  232. var blurCss = null;
  233. const unBlurButton = addBlurNowButton();
  234. const dontBlurThisSessionButton = addDontBlurThisSessionButton();
  235.  
  236. function blurPage() {
  237.     if (isBlurred) return;
  238.  
  239.     if (blurCss == null) {
  240.         blurCss = GM_addStyle(
  241.             `body > *:not(#${blurButtonId}) {
  242.                 filter: blur(${clamp(blurIntensity, 1, 100)}px) !important;
  243.                 pointer-events: none !important;
  244.             }`
  245.         );
  246.     }
  247.  
  248.     blurButton.style.display = "block";
  249.     originalPageTitle = document.title;
  250.     document.title = "Cute Kittens - Google Search";
  251.     changeFavicon("https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128");
  252.     isBlurred = true;
  253. }
  254.  
  255. onInactive(inactivityThresholdMiliseconds, function () {
  256.     if (sessionBlurDisabled) return;
  257.     blurPage();
  258. });
  259.  
  260. function onInactive(ms, cb) {
  261.   var wait = setInterval(cb, ms);
  262.   window.ontouchstart = 
  263.   window.ontouchmove = 
  264.   window.onmousemove = 
  265.   window.onmousedown = 
  266.   window.onmouseup = 
  267.   window.onwheel = 
  268.   window.onscroll = 
  269.   window.onkeydown = 
  270.   window.onkeyup = 
  271.   window.onfocus = 
  272.   function () {
  273.     clearInterval(wait);
  274.     wait = setInterval(cb, ms);
  275.   };
  276. }