如何编写浏览器扩展修改网站JS替换Vim模式hjkl按键映射？

方案一：编写浏览器扩展 #

这种方式适合长期使用，且能精准控制生效范围。

1. 扩展文件结构 #

vim-key-remap/
├─ manifest.json
└─ content.js

2. 配置manifest.json #

这个文件是浏览器扩展的核心配置，指定生效网站和脚本执行时机：

{
  "manifest_version": 3,
  "name": "Vim hjkl to jkl; Remap",
  "version": "1.0",
  "description": "Remap hjkl to jkl; in Vim mode for Compiler Explorer and HackerRank",
  "content_scripts": [
    {
      "matches": [
        "https://godbolt.org/*",
        "https://www.hackerrank.com/*"
      ],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

3. 编写content.js脚本 #

脚本会轮询等待monacoVim对象加载完成，再执行按键映射：

function remapVimKeys() {
  // 检查monacoVim对象是否已加载
  if (typeof monacoVim !== 'undefined' && monacoVim.VimMode?.Vim) {
    // 执行按键映射
    monacoVim.VimMode.Vim.noremap(';', 'l');
    monacoVim.VimMode.Vim.noremap('l', 'k');
    monacoVim.VimMode.Vim.noremap('k', 'j');
    monacoVim.VimMode.Vim.noremap('j', 'h');
    monacoVim.VimMode.Vim.noremap('h', ';');
    console.log('Vim按键映射已生效');
  } else {
    // 未加载则0.5秒后重试
    setTimeout(remapVimKeys, 500);
  }
}

// 启动映射逻辑
remapVimKeys();

4. 安装扩展 #

• 打开浏览器的扩展管理页面（比如Chrome的chrome://extensions/）
• 开启「开发者模式」
• 点击「加载已解压的扩展程序」，选择vim-key-remap文件夹即可

方案二：使用用户脚本（Tampermonkey/Greasemonkey） #

如果不想折腾扩展，用户脚本是更轻量的选择，只需安装Tampermonkey这类插件后添加脚本即可：

// ==UserScript==
// @name         Vim hjkl to jkl; Remap
// @version      0.1
// @description  自动替换Compiler Explorer和HackerRank的Vim模式按键
// @match        https://godbolt.org/*
// @match        https://www.hackerrank.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function remapVimKeys() {
      if (typeof monacoVim !== 'undefined' && monacoVim.VimMode?.Vim) {
        monacoVim.VimMode.Vim.noremap(';', 'l');
        monacoVim.VimMode.Vim.noremap('l', 'k');
        monacoVim.VimMode.Vim.noremap('k', 'j');
        monacoVim.VimMode.Vim.noremap('j', 'h');
        monacoVim.VimMode.Vim.noremap('h', ';');
        console.log('Vim按键映射已生效');
      } else {
        setTimeout(remapVimKeys, 500);
      }
    }

    remapVimKeys();
})();

注意事项 #

• 若后续网站更新编辑器实现，导致monacoVim对象路径变化，需重新通过浏览器开发者工具确认对象路径，调整脚本中的对应代码
• 部分网站可能有内容安全策略限制，但上述两种方式均运行在页面上下文，一般不会触发限制

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