Chrome扩展React模板快速入门指南

岑晔含Dora

于 2024-06-11 09:44:44 发布

阅读量294

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00082/article/details/139589004

版权

此教程基于lxieyang/chrome-extension-boilerplate-react，一个利用React 18和Webpack 5构建的Chrome扩展基础框架。本指南旨在帮助开发者理解该项目的基本结构、启动流程及核心配置。

该模板的目录结构精心设计以支持Chrome扩展的典型需求：

src: 扩展的所有源代码存放处。
- manifest.json: 扩展的核心配置文件，定义权限、页面路径等。
- pages: 包含扩展的不同界面，如弹窗、选项页、背景页和新标签页。
- components: 共享组件存放地。
- styles: 样式文件夹。
- utils: 辅助函数或工具类。
.babelrc, .eslintrc, prettierrc: 代码风格和转换规则配置文件。
package.json: 项目元数据和脚本命令。
webpack.config.js: Webpack打包配置，负责构建过程。
tsconfig.json: 若启用TypeScript，其类型检查和编译设置。
gitignore: 忽略的文件列表。

npm start 是主要的启动命令。它利用Webpack Dev Server进行实时编译并自动刷新浏览器，使开发周期更为高效。无需手动加载更新，编辑保存后即可在扩展中看到变动。

Entry Points: 定义不同功能模块的入口，包括可能的内容脚本。
Output: 输出编译后的文件到指定目录（通常是build）。
Plugins: 包括react-refresh-webpack-plugin以实现热更新，以及其它用于优化和处理特定任务的插件。
Loaders: 处理.js, .jsx, .tsx等文件，确保它们被正确编译和加载。
Chrome Extension Boilerplate配置: 配置不参与热重载的入口点（如内容脚本），通过chromeExtensionBoilerplate.notHotReload属性。