Double Ctrl Image Zoom (Edge Style)

Double Ctrl to zoom images like Edge browser
As of 2025-10-15. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Double Ctrl Image Zoom (Edge Style)
// @namespace    https://products.agarmen.com
// @version      1.01
// @description  Double Ctrl to zoom images like Edge browser
// @match        *://*/*
// @grant        none
// @author       @emberasim
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  let lastCtrlTime = 0;
  const DOUBLE_PRESS_INTERVAL = 400; // ms
  let overlayDiv = null;
  let zoomedImg = null;

  // Track mouse position
  let mouseX = 0, mouseY = 0;
  document.addEventListener('mousemove', e => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  // Create overlay
  function createOverlay(imgSrc) {
    disposeOverlay(); // remove old one if any

    overlayDiv = document.createElement('div');
    overlayDiv.style.position = 'fixed';
    overlayDiv.style.top = 0;
    overlayDiv.style.left = 0;
    overlayDiv.style.width = '100vw';
    overlayDiv.style.height = '100vh';
    overlayDiv.style.backgroundColor = 'rgba(0,0,0,0.8)';
    overlayDiv.style.display = 'flex';
    overlayDiv.style.alignItems = 'center';
    overlayDiv.style.justifyContent = 'center';
    overlayDiv.style.zIndex = 999999;
    //overlayDiv.style.cursor = 'zoom-out';
    overlayDiv.style.backdropFilter = 'blur(2px)';
    overlayDiv.style.opacity = '0';
    overlayDiv.style.transition = 'opacity 0.2s ease';

    zoomedImg = document.createElement('img');
    zoomedImg.src = imgSrc;
    zoomedImg.style.maxWidth = '90vw';
    zoomedImg.style.maxHeight = '90vh';
    zoomedImg.style.borderRadius = '8px';
    zoomedImg.style.boxShadow = '0 0 20px rgba(0,0,0,0.6)';
    zoomedImg.style.transition = 'transform 0.2s ease';
    zoomedImg.style.transform = 'scale(1.05)';

    overlayDiv.appendChild(zoomedImg);
    document.body.appendChild(overlayDiv);

    // Fade in
    requestAnimationFrame(() => (overlayDiv.style.opacity = '1'));

    // Close handlers
    overlayDiv.addEventListener('click', disposeOverlay);
    document.addEventListener('keydown', escListener, { once: true });
  }

  function escListener(e) {
    if (e.key === 'Escape') disposeOverlay();
  }

  function disposeOverlay() {
    if (overlayDiv) {
      overlayDiv.style.opacity = '0';
      setTimeout(() => {
        if (overlayDiv) overlayDiv.remove();
        overlayDiv = null;
        zoomedImg = null;
      }, 200);
    }
  }

  // Detect double Ctrl
  window.addEventListener('keydown', (e) => {
    if (e.key === 'Control') {
      const now = Date.now();
      if (now - lastCtrlTime < DOUBLE_PRESS_INTERVAL) {
        // get elements under the mouse pointer
        const elems = document.elementsFromPoint(mouseX, mouseY);
        const hoveredImg = elems.find(el => el.tagName && el.tagName.toLowerCase() === 'img');

        if (hoveredImg) {
          //console.log('IMG Tag Found:', hoveredImg.src);
          createOverlay(hoveredImg.src);
          e.preventDefault();
        }
      }
      lastCtrlTime = now;
    } else if (e.key === 'Escape') {
      disposeOverlay();
    }
  });

})();