Background Network Requests Indicator

Shows an indicator at bottom right/left when there is one or more background network requests in progress.

Per 23-11-2019. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name        Background Network Requests Indicator
// @namespace   BackgroundNetworkRequestsIndicator
// @version     1.0.4
// @license     AGPL v3
// @author      jcunews
// @description Shows an indicator at bottom right/left when there is one or more background network requests in progress.
// @website     https://greasyfork.org/en/users/85671-jcunews
// @include     *://*/*
// @grant       none
// @run-at      document-start
// ==/UserScript==

/*
The number on the indicator shows the number of background network requests in progress. When it shows, by default it will be placed at bottom-right. When the mouse cursor is moved to the right half area of the page, the indicator will move itself to the bottom-left.
*/

(function(ele, eleStyle, xhrId, xhrCount, xhrAbort, xhrOpen, xhrSend) {

  if (!(document instanceof HTMLDocument)) return;

  ele = document.createElement("DIV");
  eleStyle = `
display:block!important; opacity:1!important; visibility:visible!important;
position:fixed!important; z-index:9999999999!important; left:auto!important;
top:auto!important; right:0!important; bottom:0!important; float:none!important;
margin:0!important; box-sizing:content-box!important; border:4px solid #bb0!important;
border-radius:12px!important; padding:0!important; min-width:16px!important;
background:#ff0!important; text-align:center!important;
font:12px/16px sans-serif!important`;
  ele.style.cssText = eleStyle;

  xhrId = xhrCount = 0;

  function checkCursor(ev) {
    if (ev.clientX >= Math.floor(innerWidth / 2)) {
      ele.style.cssText = eleStyle.replace(/left:auto/, "left:0").replace(/right:0/, "right:auto");
    } else ele.style.cssText = eleStyle;
  }

  function doneRequest(xhr) {
    if (--xhrCount < 0) xhrCount = 0;
    delete xhr.id_bnri;
    if (xhrCount) {
      ele.textContent = xhrCount;
    } else if (ele.parentNode) {
      removeEventListener("mousemove", checkCursor);
      document.body.removeChild(ele);
    }
  }

  function checkState() {
    if ((this.readyState >= XMLHttpRequest.HEADERS_RECEIVED) && !ele.parentNode && document.body) {
      document.body.appendChild(ele);
      addEventListener("mousemove", checkCursor);
    }
    if ((this.readyState !== XMLHttpRequest.DONE) || !this.id_bnri) return;
    if (--xhrCount < 0) xhrCount = 0;
    doneRequest(this);
  }

  xhrAbort = XMLHttpRequest.prototype.abort;
  XMLHttpRequest.prototype.abort = function() {
    doneRequest(this);
    return xhrAbort.apply(this, arguments);
  };

  xhrOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    if (!this.url_bnri) this.addEventListener("readystatechange", checkState);
    this.url_bnri = arguments[1];
    return xhrOpen.apply(this, arguments);
  };

  xhrSend = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function() {
    if (!this.id_bnri) this.id_bnri = ++xhrId;
    ele.textContent = ++xhrCount;
    if (!ele.parentNode && document.body) {
      document.body.appendChild(ele);
      addEventListener("mousemove", checkCursor);
    }
    return xhrSend.apply(this, arguments);
  };

})();