chrome浏览器插件实现vim方式的跳转

52 阅读1分钟

背景, 有些页面老长老长,看到结尾滑动到开头则很费时间,手也累。 以前有用过别人写的浏览器vim插件,但用起来不顺手,经常按个F就帮我查找。后来实在太干扰,就弃用了。最近捡起来,自己写一个。

chrome插件的基础框架和用法,需要大家自行搜索了解,下面给出关键代码。

在manifest.json里增加入口 all/vim_content.js入口

  "content_scripts": [
    {
      "js": [
        "all/vim_content.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]

在content.js里增加按键监听

//模拟vim的gg跳到开头,G跳到结尾
console.log("loading vim_content.js");

let lastKeyPressTime = 0;

document.addEventListener("keydown", function (event) {
  // 检查是否在输入框中
  if (
    event.target.tagName === "INPUT" ||
    event.target.tagName === "TEXTAREA" ||
    event.target.isContentEditable
  ) {
    return; // 如果在输入框中,则不执行任何操作
  }

  // 检查按键并执行操作
  if (event.key === "g") {
    // 捕捉连续按键
    if (event.repeat) return; // 忽略长按

    const currentTime = Date.now();
    if (lastKeyPressTime && currentTime - lastKeyPressTime < 200) {
      window.scrollTo(0, 0); // 立即跳转到页面顶部
    }
    lastKeyPressTime = currentTime;
  } else if (event.key === "G" && event.shiftKey) {
    window.scrollTo(0, document.body.scrollHeight); // 立即跳转到页面底部
  }
});