spotlight chrome devtools snippet.

spotlight.js

(function() {
  if (document.querySelector('.spotlight')) {
    power();
    return;
  }
  var radius = 100;
  var isOn   = false;
  var css = ".spotlight {  \n\
  position: fixed;         \n\
  top: 0;                  \n\
  left: 0;                 \n\
  width: 100%;             \n\
  height: 100%;            \n\
  border: 1px solid #000;  \n\
  pointer-events: none;    \n\
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0))); \n\
  z-index:99999;           \n\
  }";
                
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  document.head.appendChild(style);
  
  var spot = document.createElement('div');
  spot.classList.add('spotlight');
  document.body.appendChild(spot);
  isOn = true;
  
  document.addEventListener('keyup', function(e) {
    if (event.keyCode !== 65) return;
    
    power();
  });
  
  document.addEventListener('mousemove', function(e) {
    var x = e.clientX;
    var y = e.clientY;
    var updatedStyle = '-webkit-gradient(radial, ' + x + ' ' + y + ', 0, ' + x + ' ' + y + ', ' + radius + ', from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)))';
    spot.style.backgroundImage = updatedStyle;
  }, false);
  
  function power() {
    if (isOn) {
      spot.classList.remove('spotlight');
      isOn = false;
    } else {
      spot.classList.add('spotlight');
      isOn = true;
    }
  }
})();