Chrome Extension Boilerplate React Vite：版本管理与自动更新

【免费下载链接】chrome-extension-boilerplate-react-vite Chrome Extension Boilerplate with React + Vite + Typescript 项目地址: https://gitcode.com/GitHub_Trending/ch/chrome-extension-boilerplate-react-vite

你是否还在手动修改Chrome扩展的版本号？是否为多个package.json文件的版本同步而烦恼？本文将详细介绍如何使用chrome-extension-boilerplate-react-vite项目中的版本管理工具，实现版本统一更新与自动构建，让你的扩展开发流程更高效。

版本管理核心工具

项目提供了完整的版本管理解决方案，核心工具位于bash脚本目录中：

版本更新脚本

bash-scripts/update_version.sh是版本管理的核心脚本，支持一键更新所有package.json文件的版本号。其工作原理是：

1. 验证输入版本号格式是否符合语义化版本规范（x.y.z）
2. 递归查找所有package.json文件（排除node_modules目录）
3. 使用perl命令替换文件中的版本号

使用示例：

# 正确格式示例
./update_version.sh 1.0.0

# 错误格式会提示
./update_version.sh 1.0

便捷命令封装

为简化使用，项目在根目录package.json中封装了快捷命令。通过UPDATE-PACKAGE-VERSIONS.md文档可知，推荐使用pnpm执行版本更新：

pnpm update-version <new_version>

该命令会自动调用上述bash脚本，并在成功时显示"Updated versions to <new_version>"确认信息。Windows用户需使用Git Bash或其他支持Unix命令的终端执行。

版本信息在扩展中的应用

版本号不仅存在于package.json中，还会被自动同步到扩展清单文件，成为扩展的标识信息。

清单文件版本同步

chrome-extension/manifest.ts是扩展的清单配置文件，它通过以下代码从package.json中读取版本号：

const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'));

const manifest = {
  // ...其他配置
  version: packageJson.version,
  // ...其他配置
} satisfies ManifestType;

这种设计确保了manifest.json中的版本号始终与package.json保持一致，避免手动修改可能导致的不一致问题。

扩展图标与版本标识

扩展使用的图标文件位于chrome-extension/public/目录下：

• icon-128.png：128x128像素的扩展图标，用于Chrome网上应用店和扩展管理页面
• icon-34.png：34x34像素的图标，用于浏览器工具栏

这些图标虽然不直接包含版本信息，但在版本更新时，保持图标设计的一致性有助于用户识别扩展的稳定性和更新状态。

版本更新工作流

完整的版本更新流程应包括以下步骤：

1. 使用pnpm命令更新版本号
2. 提交版本更新的代码变更
3. 构建扩展包
4. 发布更新

遵循这一流程可以确保版本信息在整个项目中保持一致，减少手动操作错误，提高发布效率。

总结与最佳实践

版本管理是Chrome扩展开发的重要环节，合理使用项目提供的工具可以显著提升开发效率：

• 始终使用bash-scripts/update_version.sh或其封装命令pnpm update-version更新版本
• 版本号应遵循语义化版本规范（Major.Minor.Patch）
• 每次版本更新都应同步更新CHANGELOG（项目中建议添加此文件）
• 版本更新后建议运行测试确保功能正常

通过这些工具和实践，你可以轻松管理扩展的版本生命周期，让用户始终使用到最新、最稳定的扩展功能。

提示：项目的更多高级功能和最佳实践，请参考README.md和其他文档文件。

【免费下载链接】chrome-extension-boilerplate-react-vite Chrome Extension Boilerplate with React + Vite + Typescript 项目地址: https://gitcode.com/GitHub_Trending/ch/chrome-extension-boilerplate-react-vite