Chrome扩展开发问题：按住CTRL悬停放大图片后无法触发还原

咱们先梳理下你当前代码里导致还原功能失效的核心问题：

• 图片元素默认无焦点，直接给<img>绑定keydown事件根本不会触发，得把键盘事件绑定到全局document上
• 没保存图片的原始尺寸、定位样式，放大后没法精准还原到初始状态
• 悬停放大逻辑里没判断是否按住Ctrl键，会导致鼠标一悬停就放大，不符合需求
• 缺少状态跟踪，不知道当前哪张图片处于放大状态，按Ctrl时找不到目标元素

下面是修复后的完整代码，我加了详细注释帮你理解：

window.onload = function () {
  // 记录当前处于放大状态的图片
  let currentZoomedImg = null;
  // 存储图片的原始样式信息，用于还原
  let originalImgStyles = {};

  const images = document.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    const img = images[i];
    
    // 鼠标悬停事件：仅按住Ctrl时放大图片
    img.addEventListener('mouseover', function (event) {
      if (!event.ctrlKey) return;

      // 如果已有放大的图片，先还原它
      if (currentZoomedImg) {
        resetImgStyle(currentZoomedImg);
      }

      currentZoomedImg = event.target;
      // 保存图片原始的宽高、定位、位置样式
      originalImgStyles = {
        width: currentZoomedImg.style.width || currentZoomedImg.offsetWidth + 'px',
        height: currentZoomedImg.style.height || currentZoomedImg.offsetHeight + 'px',
        position: currentZoomedImg.style.position || 'relative',
        left: currentZoomedImg.style.left || '0',
        top: currentZoomedImg.style.top || '0'
      };

      // 执行放大操作
      currentZoomedImg.style.width = (currentZoomedImg.offsetWidth * 1.5) + 'px';
      currentZoomedImg.style.height = (currentZoomedImg.offsetHeight * 1.5) + 'px';
      currentZoomedImg.style.position = 'fixed';
      currentZoomedImg.style.transition = 'all 0.2s ease';
      // 计算屏幕居中位置，优化视觉体验
      const imgWidth = parseFloat(currentZoomedImg.style.width);
      const imgHeight = parseFloat(currentZoomedImg.style.height);
      currentZoomedImg.style.left = (window.innerWidth / 2 - imgWidth / 2) + 'px';
      currentZoomedImg.style.top = (window.innerHeight / 2 - imgHeight / 2) + 'px';
      // 提升层级避免被页面元素遮挡
      currentZoomedImg.style.zIndex = '9999';
    }, true);

    // 可选：鼠标离开时，若未按住Ctrl则自动还原
    img.addEventListener('mouseout', function (event) {
      if (!event.ctrlKey && currentZoomedImg) {
        resetImgStyle(currentZoomedImg);
        currentZoomedImg = null;
      }
    }, true);
  }

  // 全局监听Ctrl键按下事件，触发还原操作
  document.addEventListener('keydown', function (event) {
    if (event.ctrlKey && currentZoomedImg) {
      resetImgStyle(currentZoomedImg);
      currentZoomedImg = null;
    }
  });

  // 封装还原图片样式的工具函数
  function resetImgStyle(img) {
    img.style.width = originalImgStyles.width;
    img.style.height = originalImgStyles.height;
    img.style.position = originalImgStyles.position;
    img.style.left = originalImgStyles.left;
    img.style.top = originalImgStyles.top;
    img.style.zIndex = '';
  }
};

关键修复点说明： #

• 全局键盘事件绑定：把keydown事件绑定到document上，确保能捕获到Ctrl键操作（图片默认无焦点，直接绑定在img上无效）
• 原始样式保存：放大前记录图片的初始状态，还原时能精准恢复到原本的尺寸和位置
• 状态跟踪机制：用currentZoomedImg变量标记当前放大的图片，确保按Ctrl时能准确找到目标
• 完善触发逻辑：只有按住Ctrl悬停时才放大，避免误操作；同时支持多张图片切换放大的场景
• 体验优化：调整放大后图片为屏幕居中，添加过渡动画让缩放更平滑，提升用户体验

现在在Chrome扩展里测试，应该就能实现需求：按住Ctrl悬停图片放大，再次按下Ctrl键（或鼠标离开且未按住Ctrl）时，图片还原到原始状态。

内容的提问来源于stack exchange，提问作者user9688341