多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Return YouTube Dislike 贡献者开发指南:环境搭建、扩展构建与 Pull Request 提交流程

Return YouTube Dislike 贡献者开发指南:环境搭建、扩展构建与 Pull Request 提交流程 Return YouTube Dislike 贡献者开发指南环境搭建、扩展构建与 Pull Request 提交流程【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislike本文以 Return YouTube Dislike 仓库的 CONTRIBUTINGpl.md波兰语贡献指南为核心骨架结合仓库中的package.json、webpack.config.js、各浏览器 manifest 清单与源码目录系统讲解从零搭建本地开发环境、编译扩展、运行测试到提交 Issue 与 Pull Request 的完整贡献流程。读完本文你将掌握该开源扩展的构建原理webpack 如何产出各浏览器分发包、代码格式化规范以及项目维护者接受的 PR 类型与协作惯例能够直接上手参与开发。环境准备Node 与 npm 版本要求在开始贡献之前需要先在本地安装 Node.js 与 npm因为扩展的“打包版本”bundled version必须通过 Node 工具链编译生成。贡献指南记录的搭建时使用版本为node12.18.4npm6.14.6需要说明的是这两个版本是文档撰写时的搭建环境记录。当前仓库的package.json已升级到 webpack 5、jest 28、prettier 3 等较新的开发依赖从源码结构看这些工具链通常需要更高版本的 Node.js 才能正常运行因此建议在本地安装较新的 LTS 版本 Node并以node -v、npm -v确认环境可用。除构建工具外项目还要求代码格式化统一使用Prettier且采用默认配置。仓库根目录 package.json 中已经内置了 Prettier 的全局配置printWidth: 120并通过 husky lint-staged 在提交前自动对所有变更文件执行prettier --write --ignore-unknown这意味着只要遵循仓库现有格式风格提交阶段会自动完成格式化矫正。构建流程从依赖安装到产出打包文件第一步安装依赖进入仓库根目录执行npm install该命令会根据根目录 package.json 安装全部依赖。其中dependencies包含扩展运行期用到的库如country-code-lookup、echarts、topojson-client、world-atlas、us-atlas等用于高级统计图表devDependencies则包含构建与测试工具链webpack、babel、jest、prettier、husky、lint-staged 等。安装完成后即可进行编译。第二步编译构建贡献指南给出了两种构建方式npm start // 创建构建文件并启动文件监听器保存后热重载 // 或 npm run build // 一次性创建构建文件需要特别注意当前仓库的实际脚本映射。根目录 package.json 中的start脚本目前仅输出提示信息真正承担“开发监听模式”与“生产构建”职责的是以下两个脚本npm run dev执行webpack --modedevelopment --watch以开发模式编译并持续监听文件变化保存源码后自动重新打包适合日常开发调试npm run build执行webpack --modeproduction一次性产出生产构建适合发布前生成最终分发包。因此在当今版本中开发调试请使用npm run dev发布构建请使用npm run build。这与 Extensions/combined/readme.md 中“Compiling to Development / Compiling to Production”两节的说明一致。构建产物与 webpack 配置解析扩展的核心业务逻辑大部分位于bundled-content-script.js即被各浏览器manifest.json引用的打包内容脚本。当前版本中webpack 实际打包的入口与产物由 webpack.config.js 定义const entries [ryd.content-script, ryd.background, popup, ryd.changelog];即四个入口分别对应ryd.content-script注入 YouTube 页面、负责点赞/点踩数据渲染的内容脚本ryd.background后台脚本Chrome 中作为 service workerFirefox 中作为背景页popup扩展弹窗界面ryd.changelog更新日志页面。所有产物输出到Extensions/combined/dist目录文件名保持[name].js结构如ryd.content-script.js。构建同时通过CopyPlugin将Extensions/combined下的静态资源分别复制为chrome、firefox、safari三个子目录并执行两项关键转换manifest 转换manifestTransform剔除 manifest 文件中的//注释后解析 JSON并把manifestData.version替换为package.json中的版本号process.env.npm_package_version其中的-会被替换为.i18n 转换i18nTransform将各语言messages.json中的__RYD_VERSION__占位符替换为真实版本号。此外MirrorJsOutputsPlugin会在编译完成后把打包出的 JS 文件镜像复制到 chrome、firefox、safari 三个子目录确保每个浏览器分发包都包含最新的内容脚本与后台脚本。各浏览器 manifest 的差异构建产物中三个子目录分别使用对应的 manifest 清单便于理解扩展在各平台的权限模型差异ChromeMV3manifest-chrome.json 采用manifest_version: 3后台使用service_worker: ryd.background.js通过host_permissions声明对*.youtube.com与returnyoutubedislikeapi.com的访问content_scripts匹配youtube.com域名并排除music.youtube.comFirefoxMV2manifest-firefox.json 采用manifest_version: 2后台使用脚本数组ryd.background.js权限中直接包含activeTab、identity与两个主机权限web_accessible_resources暴露menu-fixer.jsSafarimanifest-safari.json 供 macOS Safari 转换使用package.json中提供了npm run build:safari脚本可在生产构建后调用xcrun safari-web-extension-converter生成 Safari 工程该命令依赖 macOS 的 Xcode 环境。在本地调试时可直接在浏览器扩展管理页“加载已解压的扩展”选择Extensions/combined/dist/chromeChrome或Extensions/combined/dist/firefoxFirefox目录即可。测试与代码质量保障仓库通过 jest.config.js 配置了 Jest 测试框架resetMocks: true测试覆盖范围包括Extensions/combined/src/**/*.js与Extensions/combined/*.js。运行全部测试使用npm test从源码目录结构看测试文件与源码同目录放置例如 Extensions/combined/src/utils.spec.js、Extensions/combined/src/bar.js 对应的功能均有.spec.js测试文件。若你新增或修改了核心逻辑如点赞数格式化、按钮渲染、配置读取等建议同步补充或更新对应的 spec 测试并确保npm test全部通过后再提交。代码风格方面Prettier 承担统一格式化的职责其默认配置以仓库根 package.json 的prettier字段为准。提交前 lint-staged 会自动格式化暂存文件无需手工逐文件调整。提交 Issue 的规范如果使用扩展时遇到了问题贡献指南要求遵循以下流程先搜索在 Issues 列表中检索确认该问题尚未被他人报告再提交若确实无人报告再新建 Issue。推荐使用 Issue 表单form填写但并非强制。如果你发现了一个自己有能力修复的 Issue不必拘谨——直接打开一个带有修复内容的 Pull Request并在 PR 描述中注明你所修复的 Issue方便维护者关联追踪。提交功能请求Feature Request的规范功能请求与 Bug 报告的流程类似先搜索提交前先检索仓库确认该功能想法尚未被建议过再提交若确属新想法再打开功能请求推荐使用功能表单填写但非强制。如果你找到了一个认为自己能够实现的功能想法同样可以直接提交 PR并在 PR 描述中说明你实现的具体功能以便维护者评估。项目接受哪些 Pull Request贡献指南明确了维护者欢迎的 PR 类型主要包括四类Bug 修复Issue fixes解决已报告问题的补丁功能实现Feature implementation落实功能请求的新能力文字改进Typos or better words修正拼写错误或改用更准确、更易理解的措辞网站贡献Website contributions对 Website 目录下的官方站点Nuxt 项目含多语言_locales翻译文件与各页面 Vue 组件的改进。这意味着除了扩展本身的代码官方文档与网站本地化如Website/_locales/*.ts翻译文件、Docs/下的多语言 FAQ同样欢迎贡献者参与。开发提交前的自检清单综合贡献指南与仓库实际配置提交代码前建议逐项确认格式代码已由 Prettier 默认配置格式化lint-staged 会在git commit阶段自动处理构建npm run build可成功产出Extensions/combined/dist下的 chrome、firefox、safari 分发包且版本号正确注入 manifest 与messages.json测试npm test全部通过新增逻辑有对应 spec 覆盖PR 描述明确说明修复的 Issue 编号或实现的功能便于维护者审查与关联。遵循上述流程你的改动将随下一个版本的扩展或官方站点一同发布这正是 Return YouTube Dislike 作为开源项目持续演进的协作方式。【免费下载链接】return-youtube-dislikeChrome extension to return youtube dislikes项目地址: https://gitcode.com/gh_mirrors/re/return-youtube-dislike创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表