【源码】基于React和Webpack的Chrome扩展（MV3）样板项目

项目简介

这是一个基于React和Webpack的Chrome扩展程序样板项目，专为现代前端开发工作流程设计。项目通过模块化代码结构、高效构建流程以及强大开发工具，简化Chrome扩展开发过程，提高开发效率与代码质量。

项目的主要特性和功能

• 支持Chrome Extension Manifest V3，遵循最新规范保障扩展安全性和性能。
• 集成React 18，利用并发模式和Suspense for Data Fetching特性优化用户体验。
• 使用Webpack 5构建工具，借助其高效构建流程和模块捆绑特性加快开发速度。
• 支持TypeScript，通过静态类型检查和面向对象编程特性提升代码质量和可维护性。
• 具备热模块替换（HMR）功能，借助Webpack Dev Server实现代码保存时自动刷新浏览器。
• 支持内容脚本，可在特定网页中注入内容脚本以扩展网页功能。
• 提供智能代码补全，通过@types/chrome提高开发效率。

安装使用步骤

安装依赖

1. 确保Node.js版本 >= 18。
2. 复制此仓库。
3. 在package.json中更改项目的名称、描述和仓库字段。
4. 在src/manifest.json中更改扩展名称。
5. 运行npm install安装依赖。

启动开发服务器

运行npm start启动开发服务器。

加载扩展到Chrome浏览器

访问chrome://extensions/，勾选Developer mode，点击Load unpacked extension，选择build文件夹。

项目结构

所有扩展代码存于src文件夹，样板项目已准备好popup、options、background和new tab页面，可自由定制。

TypeScript使用示例

该样板项目支持TypeScript，如Options页面使用TypeScript编写，可参考src/pages/Options/。

打包扩展

完成扩展开发后，运行NODE_ENV=production npm run build命令进行构建，构建后的build文件夹中的内容可直接提交到Chrome Web Store。

参考文档

• Webpack文档
• Chrome扩展文档

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】