Return YouTube Dislike 扩展开发贡献指南：从环境搭建、构建流程到提交 PR 的完整实战

Return YouTube Dislike 扩展开发贡献指南从环境搭建、构建流程到提交 PR 的完整实战【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislike导读本篇文章以仓库根目录下的 CONTRIBUTINGgr.md贡献指南希腊语版与 CONTRIBUTING.md 英文版内容一致为骨架面向想要为 Return YouTube Dislike 开源扩展贡献代码的开发者。文章完整继承了原指南中的环境要求Node/npm 版本、依赖安装与两种构建模式npm start与npm run build、Issue 与功能请求提交流程、PR 验收标准并结合仓库内的 package.json、webpack.config.js 与 Extensions/combined/manifest-chrome.json 等源码级证据深入讲解构建产物bundled-content-script.js即现在的ryd.content-script.js是如何被编译、分发并注入 manifest 的。读完本文你将掌握该扩展从零开始编译源码、调试开发、提交 Bug 修复与功能实现的完整链路。一、贡献前的准备仓库结构与核心产物Return YouTube Dislike 是一个开源浏览器扩展用于在 YouTube 网页端恢复显示点踩dislike数量。贡献者所做的任何改动都会体现在扩展的下一个版本中部分改动会同步到官方网站。在动手前建议先了解仓库的关键目录Extensions/combined/扩展源码的聚合目录包含ryd.content-script.js内容脚本入口、ryd.background.js后台脚本、popup.html/popup.js弹窗界面以及 src/ 下的模块化源码如buttons.js、state.js、events.js、utils.js等Extensions/combined/manifest-chrome.jsonChrome 清单文件模板构建时会自动注入版本号Website/基于 Nuxt.js 构建的官方网站源码见 Website/package.json是网站贡献类 PR 的落点Extensions/UserScript/Return Youtube Dislike.user.js面向其他浏览器的用户脚本版本。原指南明确指出要生成包含扩展大部分业务逻辑的bundled-content-script.js必须先安装全部依赖。需要说明的是随着仓库演进这个构建产物在 webpack.config.js 中对应的入口文件现在名为ryd.content-script.js它正是 manifest-chrome.json 中content_scripts.js数组所引用的文件。二、环境要求Node 与 npm 版本根据原指南搭建构建环境需要预先安装 Node.js 与 npm。指南给出的参考版本为工具版本node12.18.4npm6.14.6版本说明以上是贡献指南撰写时使用的版本属于参考而非强制的推荐配置。当前仓库的 package.json 中engines字段未做硬性限制但构建脚本依赖 webpack 5、Babel 7 等现代工具链如果本机 Node 版本过旧建议优先使用 LTS 版本或通过 nvm 切换版本后再执行构建。同时原指南要求代码格式化统一使用Prettier 的默认设置。仓库在 package.json 中内置了prettier: { printWidth: 120 }配置并通过lint-staged见 package.json在提交时自动对暂存文件执行prettier --write --ignore-unknown也就是说只要安装了依赖保存与提交阶段就能自动完成格式化校验。三、安装依赖与两种构建模式3.1 安装依赖在仓库根目录执行npm install这一步会依据 package.json 安装运行时依赖如country-code-lookup、echarts、topojson-client等用于网站侧地图与统计功能以及开发依赖webpack、jest、prettier、husky 等。3.2 构建命令npm start与npm run build原指南给出了两条核心命令npm start # 创建构建文件并启动一个文件监视器watcher在保存文件时热重载 # 或 npm run build # 一次性生成构建文件需要特别指出的是在当前版本的 package.json 中npm start的行为已经演进为一条提示信息——它建议开发者改用以下两个脚本npm run dev等价于webpack --modedevelopment --watch即开发模式 文件监视保存时自动增量重编译对应原指南中npm start的热重载语义npm run build等价于webpack --modeproduction一次性生成生产构建产物与原指南一致。也就是说原指南中npm start创建构建文件并热重载、npm run build一次性构建的意图如今分别由npm run dev与npm run build承接语义完全对应。开发时若想获得改完即生效的体验直接运行npm run dev3.3 构建背后的实现webpack 配置解析构建流程由 webpack.config.js 驱动理解它有助于你判断改哪个文件、构建出什么。核心要点如下入口entry构建入口共四个——ryd.content-script、ryd.background、popup、ryd.changelog对应 Extensions/combined/ 下的同名.js文件输出output产物统一输出到Extensions/combined/dist目录多目标分发CopyPlugin构建完成后通过 copy-webpack-plugin 将Extensions/combined复制为chrome、firefox、safari三个分发目录并分别套用对应的 manifest 模板manifest-chrome.json、manifest-firefox.json、manifest-safari.json清单变换manifestTransform构建时会剥掉 manifest 模板中//开头的注释行并把__RYD_VERSION__占位符替换为 package.json 中的真实版本号见 webpack.config.js产物镜像MirrorJsOutputsPlugin把编译出的.js文件同步复制到chrome、firefox、safari三个目标目录保证各分发版本使用同一份逻辑。从源码结构看内容脚本的注入链路为webpack 编译 Extensions/combined/ryd.content-script.js → 产出ryd.content-script.js→ 被 manifest-chrome.json 的content_scripts声明引用 → 在*://youtube.com/*、*://www.youtube.com/*、*://m.youtube.com/*页面排除 YouTube Music自动执行并同时注入content-style.css样式。四、验证构建结果manifest 与测试4.1 在 manifest 中核对产物构建完成后打开Extensions/combined/dist/chrome/manifest.json应能看到content_scripts[0].js中引用了ryd.content-script.js且version字段已被替换为真实版本号模板中写作__RYD_VERSION__见 manifest-chrome.json。这与原指南运行命令以创建bundled-content-script.js该文件用于manifest.json的说明一脉相承——产物文件名随版本演进但构建产物被 manifest 引用的关系不变。4.2 运行测试仓库配有基于 Jest 的单元测试套件配置见 jest.config.js覆盖范围包括Extensions/combined/src/**/*.js与Extensions/combined/*.js例如src/utils.spec.js、src/state.spec.js等。提交 PR 前建议运行npm test保证改动不破坏既有逻辑这也是 CI 会执行的基础校验。五、Issue报告问题与解决问题5.1 开启一个新 Issue如果你在使用扩展时遇到问题请先搜索确认该问题尚未被报告过避免重复。若确认是新的问题再通过 Issue 表单创建表单为推荐用法非强制。创建时应尽量描述清楚复现步骤与期望行为/实际行为浏览器类型与版本、扩展版本号出错页面普通视频页、Shorts 短视频页等与相关报错信息。5.2 解决一个 Issue如果你觉得某个 Issue 自己有能力修复不要犹豫直接开一个 PR 提交修复代码并在 PR 描述中关联你所修复的 Issue 编号。修复类 PR 是仓库最欢迎的贡献类型之一改动通常落在 Extensions/combined/src/ 下的模块文件中例如src/buttons.js查找与渲染点赞/点踩按钮src/state.js扩展配置状态管理如extConfig的读取src/events.js监听 YouTube 页面导航事件与 MutationObserver 逻辑src/utils.js视频 ID 解析、选择器匹配、数字格式化等通用工具。六、功能请求Feature Request6.1 开启新功能请求如果你对扩展有新想法欢迎开启功能请求。同样地先搜索以确保该功能尚未被提出使用功能请求表单是推荐做法但不强制。6.2 实现一个功能请求找到自己感兴趣且有能力实现的功能后直接提交 PR并在 PR 中明确提及你实现的是哪个功能请求。从源码结构看新功能通常需要同时涉及前端逻辑实现修改或新增 src/ 下的模块并在 ryd.content-script.js 入口中接入初始化调用若涉及用户偏好设置还需要同步popup.html/popup.js的选项 UI国际化文案见 Extensions/combined/_locales/ 下各语言的messages.json配套单元测试对应模块的*.spec.js文件。七、仓库接受哪些 PR原指南明确列出了四类会被接受的 PRIssue 修复Issue fixes修复已报告的缺陷功能实现Feature implementation落地已提出的新功能请求拼写错误或更易读的措辞改进Typos or better and easier words to use包括代码注释、文档与界面文案层面的润色网站贡献Website contributions对 Website/ 目录下官方网站源码的改进该目录基于 Nuxt.js 2 Vuetify 构建见 Website/package.json页面代码位于 Website/pages/。无论哪类 PR都应遵守第三节提到的 Prettier 格式化规范并尽量附带必要的单元测试。八、快速上手总结给新贡献者的最小可行路径如下# 1. 安装依赖 npm install # 2. 开发模式保存即热重载对应原指南 npm start 的语义 npm run dev # 3. 或一次性生产构建 npm run build # 4. 运行测试 npm test构建产物位于Extensions/combined/dist/下的chrome、firefox、safari三个目录中可加载到对应浏览器进行验证。之后即可按搜索已有 Issue/功能请求 → 认领或新建 → 修改源码 → 本地验证 → 提交 PR 并关联编号的流程贡献代码。所有贡献都将随下一个扩展版本发布感谢每一位投入时间的贡献者。【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislike创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考