Tampermonkey JavaScript实现同一按键触发网站图片开/关双功能

实现逻辑 #

• 新增两个变量分别存储左侧、右侧图片的放大状态，初始值为未放大
• 按下W/E键时先判断当前对应图片的状态：
  • 未放大状态：点击对应图片触发放大，同步更新状态为已放大
  • 已放大状态：点击关闭按钮关闭放大图，同步更新状态为未放大
• 原有TAB键关闭功能保留，不影响原有使用习惯

完整可用代码 #

直接替换你油猴脚本内的原有全部代码即可生效：

// 存储左右图片放大状态，初始为未放大
let leftZoomed = false;
let rightZoomed = false;
// 关闭按钮公共选择器，避免重复写
const closeBtnSelector = "#root > div._1qw_lOmwJT6xuZplKq1ilH > div._26T7BbVDhm0i411GqTgBgr > div > button";

// ZOOM LEFT MEDIA - ASSIGNED TO *W* KEY
(function(){
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 87 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      if (!leftZoomed) {
        // 左图未放大，触发点击放大
        document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(1) > img").click();
        leftZoomed = true;
        rightZoomed = false;
      } else {
        // 左图已放大，触发关闭
        document.querySelector(closeBtnSelector).click();
        leftZoomed = false;
      }
    }
  }, false);
})();

// ZOOM RIGHT MEDIA - ASSIGNED TO *E* KEY
(function(){
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 69 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      if (!rightZoomed) {
        // 右图未放大，触发点击放大
        document.querySelector("#root > div._207u8cFhj1qJCuOVY3G3XU > div._22c-iquDGgsWF7kWWz--mz > div._2-Lr5G9MaWKGAeCMsEEoBi > div:nth-child(2) > img").click();
        rightZoomed = true;
        leftZoomed = false;
      } else {
        // 右图已放大，触发关闭
        document.querySelector(closeBtnSelector).click();
        rightZoomed = false;
      }
    }
  }, false);
})();

// ZOOM OUT MEDIA - ASSIGNED TO *TAB* KEY 原有功能保留
(function(){
  document.addEventListener('keydown', function(e) {
    if (e.keyCode == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      document.querySelector(closeBtnSelector).click();
      // 按TAB关闭后重置所有状态
      leftZoomed = false;
      rightZoomed = false;
    }
  }, false);
})();

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