Alternate approaches for handling multiple changing styles of spotlight in snipmodeClickHandler

ClickGetImg_Object.js

var clickGetImg = (function() {
  var count = 3;

  return function(event) {
    count--;
    if(event.target.src) {
      chrome.runtime.sendMessage({image: event.target.src});
      count = -1;
    }
    if(count <= 0){
      document.removeEventListener('click', clickGetImg);
      spotlight.fade = 'fadeOut'; // only starts when user moves mouse next
      spotlight.element.addEventListener('animationend', function() {
        document.removeEventListener('mousemove', updateSpotlight);
        document.body.removeChild(spotlight.element);
        document.head.removeChild(spotlightStyle);
      });
      document.body.style.cursor = 'auto';
    }
    event.preventDefault(); // if the image is a link, don't follow it
  }

})(); // closure/IIFE to hide count
document.addEventListener('click', clickGetImg, false);

document.body.style.cursor = 'crosshair';


var spotlightStyle = document.createElement('style');
spotlightStyle.type = 'text/css';
spotlightStyle.innerHTML =
 '@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } \
  @keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }';
document.head.appendChild(spotlightStyle);

var spotlight = {
  element: document.createElement('div'),
  fade: 'fadeIn',
  x: window.outerWidth-45,
  y: 0,
  FULL_WHITE_RADIUS: 30, // GRADIENT_START_RADIUS
  BEGIN_FULL_GREY_RADIUS: 100, // GRADIENT_END_RADIUS
  DARKNESS: 0.5, // const: http://stackoverflow.com/questions/10843572/
  setStyle: function() {
    this.element.style =
     `position: fixed; height: 100%; width: 100%; top: 0; left: 0; \
      z-index: 10; pointer-events: none; animation: ${this.fade} 1s; \
      background: radial-gradient(circle at ${this.x}px ${this.y}px, \
      transparent 0, transparent ${this.FULL_WHITE_RADIUS}px, \
      rgba(0, 0, 0, ${this.DARKNESS}) ${this.BEGIN_FULL_GREY_RADIUS}px);`;
  },
  move: function(x, y) {
    this.x = x;
    this.y = y;
    this.setStyle();
  }
}
spotlight.element.id = 'spotlight';
document.body.appendChild(spotlight.element);
document.addEventListener('mousemove', function updateSpotlight(event) {
  spotlight.move(event.x, event.y);
}, false);

ClickGetImg_Properties.js

var snipmodeClickHandler = (function() {
  var count = 3;

  return function(event) {
    count--;
    if(event.target.src) {
      chrome.runtime.sendMessage({image: event.target.src});
      count = -1;
    }
    if(count <= 0){
      document.removeEventListener('click', snipmodeClickHandler);
      // fade slowly if image clicked, but quickly if canceled
      spotlight.fade = `fadeOut ${count==-1?2:0.5}s`;
      styleSpotlight(); // make sure animation style is updated
      spotlight.addEventListener('animationend', function() {
        document.removeEventListener('mousemove', styleSpotlight);
        document.body.removeChild(spotlight);
        document.head.removeChild(spotlightAnimations);
      });
      document.body.style.cursor = 'auto';
    }
    event.preventDefault(); // if the image is a link, don't follow it
  }

})(); // closure/IIFE to hide count
document.addEventListener('click', snipmodeClickHandler, false);

document.body.style.cursor = 'crosshair';


var spotlight = document.createElement('div');
spotlight.id = 'spotlight';

var spotlightAnimations = document.createElement('style');
spotlightAnimations.type = 'text/css';
spotlightAnimations.innerHTML =
  '@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } \
   @keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} }';
document.head.appendChild(spotlightAnimations);
spotlight.fade = 'fadeIn 1s';

var styleSpotlight = function() {
  const FULL_WHITE_RADIUS = 30, // GRADIENT_START_RADIUS
        BEGIN_FULL_GREY_RADIUS = 100, // GRADIENT_END_RADIUS
        DARKNESS = 0.5;
  spotlight.style =
    `position: fixed; height: 100%; width: 100%; top: 0; left: 0;
     z-index: 10; pointer-events: none; animation: ${spotlight.fade};
     background: radial-gradient(circle at ${spotlight.x}px ${spotlight.y}px,
     transparent 0, transparent ${FULL_WHITE_RADIUS}px,
     rgba(0, 0, 0, ${DARKNESS}) ${BEGIN_FULL_GREY_RADIUS}px);`;
}
document.addEventListener('mousemove', function(event) {
  spotlight.x = event.x;
  spotlight.y = event.y;
  styleSpotlight();
}, false);

spotlight.x = window.outerWidth-45;
spotlight.y = 0;

document.body.appendChild(spotlight);