Baseline Bookmarklet

grid-bookmarklet.js

javascript:(function () {
  var BASE_PIXELS = 8;
  var baselineNode = document.querySelector(".baseliner-overlay");
  if (baselineNode) {
    baselineNode.remove();
    return;
  }
  var body = document.body,
        html = document.documentElement,
        height = Math.max(body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight);

  var baselineOverlay = document.createElement("div");
  baselineOverlay.className = "baseliner-overlay";
  baselineOverlay.style.position = "absolute";
  baselineOverlay.style.top = 0;
  baselineOverlay.style.right = 0;
  baselineOverlay.style.left = 0;
  baselineOverlay.style.height = height + "px";
  baselineOverlay.style.backgroundSize = "100% " + (BASE_PIXELS * 2) + "px";
  baselineOverlay.style.backgroundImage = "linear-gradient(to bottom,rgba(0,0,0,0.08) 50%,rgba(0, 0, 0, 0) 8%,rgba(0, 0, 0, 0) 100%)";
  baselineOverlay.style.zIndex = 20000;
  baselineOverlay.style.content = '';
  baselineOverlay.style.pointerEvents = "none";
  
  document.body.appendChild(baselineOverlay);
})();