ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Vimium 贡献指南深度解读:设计原则、从源码构建扩展与测试工作流

Vimium 贡献指南深度解读:设计原则、从源码构建扩展与测试工作流 开发工具【免费下载链接】vimiumThe hackers browser.项目地址https://gitcode.com/gh_mirrors/vi/vimium点击查看免费下载本指南以 Vimium 仓库的 CONTRIBUTING.md 为骨架系统解读向这个键盘驱动的浏览器扩展项目The Hackers Browser贡献代码的全流程从理解六条设计原则、把握维护者的 PR 合并偏好到在 Chrome 与 Firefox 中从源码安装调试再到基于 Deno Puppeteer shoulda 的测试工作流与编码规范。读完本文你将掌握 Vimium 项目的准入门槛、构建与验证手段以及写出一份高质量 PR 的具体方法。一、先读懂 Vimium 的六条设计原则CONTRIBUTING.md 开篇强调在动手修 bug 或实现功能之前必须先理解 Vimium 的设计原则与维护者目标。这些原则不是空泛的口号而是直接决定 PR 能否被合并的标尺。Easy to understand易于理解即使不熟悉 Vim新手也能快速上手。项目的核心交互——按?弹出帮助对话框、查看所有快捷键——本身就是零文档上手的体现。Reliable可靠核心功能必须在绝大多数网站上正常工作。这反映在 manifest.json 中内容脚本对all_urls的匹配、all_frames: true与run_at: document_start的注入策略上即尽可能早地、在包括 iframe 在内的所有帧中注入 Vimium 前端。Immediately useful即时可用安装后无需配置即可使用用户可以零敲碎打地逐步采用而不必一次性全盘切换。Feels native原生手感不激进地改变 Chrome 的外观与行为而是作为浏览习惯的自然增强。Simple功能简单核心功能集绝不臃肿。文档特别警告这一原则在持续添加功能时最容易被侵蚀需要维护者主动捍卫。Code simplicity代码简单代码库相对简单、易于入手让更多人能参与修 bug 和实现功能。从仓库结构看核心逻辑被清晰拆分为 background_scripts后台、命令注册、content_scripts页面内的模式机normal / insert / find / visual与 lib工具库层次分明。这些原则相互支撑功能简单与代码简单共同保证了项目在浏览器与 Web 生态持续演进下仍可被少数维护者维持更新。二、什么样的 Pull Request 会被合并维护者带宽有限因此对 PR 有明确的取舍策略。大概率会被合并的 PR忠实体现全部设计原则、对大量用户有用、实现简单直白的代码、行数少。大概率会被拒绝的 PR违反任一设计原则、过于小众niche、实现复杂到代码量超过其价值。文档给出的两条实操建议非常具体先开 Issue 再动手如果要实现较大的功能先开一个 Issue 提出设想获取维护者是否值得合并的反馈避免做完被拒的返工。控制 PR 规模在 50 行左右更大的 PR 会给评审制造惰性Bigger PRs create inertia for review。背后的理由rationale值得每个贡献者细读Vimium 是志愿者项目代码库必须保持小而可维护如果维护者自己不用、大多数用户也不用的功能最终会被忽视每个功能尤其被忽视的都会增加代码库复杂度并降低协作愉悦度而且加功能只是工作的一半——上线之后它要被永久维护项目还受困于开源球场模型大量用户、极少维护者主仓库只养得起有限数量的功能。因此复杂或小众的功能被建议放在 fork 仓库而非主线。从源码看这种小而精的取向也体现在命令体系的约束上commands_test.js 中专门有一组数据校验测试逐一断言每个命令要么noRepeat要么repeatLimit但不能同时具备、必须含有desc与group描述属性且所有默认键位映射都必须指向真实存在的命令——从机制上阻止不规范、难维护的命令混入。三、从源码安装 VimiumChrome / ChromiumVimium 由 JavaScript 写成可直接以未打包扩展unpacked extension方式加载源码目录进行开发调试。在 Chrome / Chromium 上的步骤在地址栏进入chrome://extensions打开右上角的开发者模式Developer Mode点击加载已解压的扩展程序Load Unpacked Extension选择你从仓库克隆下来的 Vimium 目录即包含 manifest.json 的仓库根目录。加载后即可在本地改动源码、在chrome://extensions中点击刷新图标即时验证。注意当前仓库使用 Manifest V3manifest.json 中声明了minimum_chrome_version: 117.0后台采用模块化的service_worker: background_scripts/main.jstype: module并申请了tabs、bookmarks、history、storage、sessions、scripting、webNavigation、search等权限——这些是链接提示、书签/历史搜索、标签管理等功能的基础。开发中如需改动后台脚本可配合 pages/reload.html 相关的开发用重载机制manifest.json 中注释说明它仅在开发阶段启用。四、为 Firefox 生成专属 manifestFirefox 需要一份与 Chrome 不同的 manifest.json。仓库通过构建脚本自动生成./make.js write-firefox-manifest该命令会读取当前 manifest.json使用 JSON5 解析以兼容其中的注释生成 Firefox 兼容版本并写回覆盖 manifest.json。从 make.js 中createFirefoxManifest()的实现可以看清它做了哪些关键改造移除 Firefox 尚不支持的favicon权限并追加 Chrome 不需要的clipboardRead、clipboardWrite供copyCurrentUrl等命令使用删除background.service_worker改回background.scripts: [background_scripts/main.js]传统后台脚本方式增加action.default_area: navbar与browser_specific_settings.gecko含 Firefox 商店分配的应用 ID{d7742d87-e61d-4b78-b8a1-b469842139fa}和strict_min_version: 112.0图标换用 Firefox 支持的 SVGicons/icon.svg。生成后在 Firefox 中加载的步骤打开 Firefox在地址栏输入about:debugging点击左侧的This Firefox点击Load Temporary Add-on临时加载附加组件进入 Vimium 目录选择其中任意一个文件如 manifest.json。注意临时加载的扩展在 Firefox 重启后失效适合开发迭代而非日常使用。五、运行测试Deno Puppeteer shoulda 三层验证Vimium 的测试体系使用 shoulda.js测试框架且以 vendored 形式随仓库分发与 Puppeteer无头浏览器自动化。运行步骤安装 Deno要求 Deno 2.9安装 Puppeteer 的 Chromedeno run -A puppeteer browsers install chrome下载 Puppeteer 所需的 Chrome 浏览器跑全量测试./make.js test它会先构建代码再执行测试。从 make.js 可以看到test任务由test-unit与test-dom两个子任务组成单元测试test-unit动态导入 tests/unit_tests 下所有*_test.js文件如 commands_test.js、settings_test.js、completion/ranking_test.js 等 20 余个在 Deno 环境中通过 test_helper.js 用 jsdom 伪造window、document等 DOM 全局对象并配合 test_chrome_stubs.js 伪造 Chrome 扩展 API最后交由shoulda.run()判定。以 commands_test.js 为例测试覆盖了按键映射解析器的各种边界map/unmap/mapkey/unmapAll语句、未知命令与未知选项的拒绝、带引号的选项值、URL 参数与选项的混排、修饰键的解析与规范化以及语法错误的校验错误计数——这些正是自定义按键映射功能commands.js 中的KeyMappingsParser正确性的保障。DOM 测试test-dom在 7000–65535 间随机挑选一个可用端口getAvailablePort()启动本地 HTTP 文件服务器用 Puppeteer 启动真实 Chrome 访问 tests/dom_tests/dom_tests.html在真实 DOM 环境下执行 dom_utils_test.js 等测试同时通过console、pageerror、requestfailed事件捕获页面错误任何 404 或页面级错误都会导致任务失败。这也解释了为什么 shoulda 要 vendored 进仓库tests/vendor/shoulda.js——DOM 测试页面由 Puppeteer 加载无法访问 Deno 的模块系统。除测试外make.js 还提供几个与开发、发布相关的任务make.js check运行deno fmt --check与deno lint检查格式和 lint、make.js write-command-listing生成静态版命令清单页、make.js package打包提交 Chrome/Firefox 商店的 zip产物在dist/以及make.js fetch-tlds抓取 IANA 顶级域名列表。package前还会执行发布前检查make.js校验版本号格式为\d.\d.\d并确认 lib/utils.js 中debug: false禁止调试日志进入商店版本。六、编码规范与代码风格格式化在项目根目录运行deno fmt。仓库的 deno.json 配置了格式化细节lineWidth: 100并排除icons/*.svg与所有**/*.html。风格基准总体遵循 Airbnb JavaScript 风格指南的建议行宽限制在 100 字符。注释习惯注释句首字母大写句尾加句号。语言特性当前代码只使用 ES2018 及更早的 JavaScript 特性如需使用更新语法必须同步更新所要求的最低 Chrome / Firefox 版本目前 manifest.json 中为 Chrome 117Firefox 112。结合前述测试体系一套完整的贡献闭环是deno fmt格式化 → 本地./make.js test全量验证 → 提交符合风格、控制在 50 行左右的 PR。若改动涉及命令与按键映射commands_test.js 中的解析器测试与命令结构校验测试会帮你守住简单、可靠、可维护的底线。结语Vimium 的贡献流程本质上是一套以简单换可持续的工程哲学六条设计原则界定产品气质维护者的 PR 取舍维护代码库的轻量从源码安装与双浏览器构建脚本降低参与门槛而 Deno 驱动的双层测试体系jsdom 单元测试 Puppeteer 真实 DOM 测试保证改动不破坏在绝大多数网站可靠工作的核心承诺。无论你是想修一个滚动或链接提示的 bug还是希望新增一个实用命令沿着本文梳理的路径都能以最低的沟通成本获得高效的评审反馈。赞分享开发工具【免费下载链接】vimiumThe hackers browser.项目地址https://gitcode.com/gh_mirrors/vi/vimium点击查看免费下载相关推荐为 TensorRT 开源生态贡献代码Polygraphy 贡献指南、弃用方案与设计原则深度解读为 TensorRT 开源生态贡献代码Polygraphy 贡献指南、弃用方案与设计原则深度解读 Polygraphy 是 NVIDIA TensorRT 生人工智能推理引擎深度学习本地部署模型优化tsx 贡献指南解读工程原则、Issue 协作与开发测试流程tsx 贡献指南解读工程原则、Issue 协作与开发测试流程 tsxTypeScript Execute是一个基于 Node.js 与 esbuild 的CLI开发工具语言运行时Reason 项目完全指南基于 esy 的构建、测试与贡献工作流README 深度解读Reason 项目完全指南基于 esy 的构建、测试与贡献工作流README 深度解读 Reason 是一个为 OCaml 提供类 JavaScript编程语言编译器上一篇如何完整备份QQ空间历史说说GetQzonehistory 快速上手指南下一篇OmniAuth社区贡献指南如何为开源认证框架提交代码创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表