【源码】基于React 17和Webpack 5的Chrome插件开发模板

项目简介

本项目是一个基于React 17和Webpack 5构建的Chrome插件开发模板，为开发者提供了现代化的开发环境，能够帮助开发者快速构建和测试Chrome插件。

项目的主要特性和功能

技术栈

• 采用React 17构建用户界面。
• 使用Webpack 5进行模块打包与代码优化。
• 借助Webpack Dev Server实现实时重载，提升开发效率。
• 可选TypeScript进行静态类型检查，提高代码质量。
• 运用ESLint和Prettier规范和格式化代码。
• 以Sass作为样式预处理器。
• 引入Ant Design 4.x这个丰富的React UI库。

功能特点

• 支持Chrome插件Manifest V3规范。
• 具备React Hot Loader，可实现实时组件更新。
• 开发环境配置完善，有代码热更新、自动刷新浏览器等功能。
• 代码结构清晰，方便开发者快速上手。
• 提供TypeScript示例代码，便于学习使用。
• 支持内容脚本，方便编写与网页交互的插件功能。
• 支持智能代码补全，提高开发效率。
• 提供打包命令，便于将插件提交到Chrome Web Store。
• 支持秘密管理，保护API密钥等敏感信息。

安装使用步骤

前提条件

确保Node.js版本 >= 14。

操作步骤

1. 复制项目仓库。
2. 在package.json中修改项目的名称、描述和仓库字段。
3. 在src/manifest.json中更改插件名称。
4. 运行npm install安装项目依赖。
5. 运行npm start启动开发服务器。
6. 在Chrome浏览器中加载插件：访问chrome://extensions/，开启开发者模式，点击“加载解压缩的扩展程序”，选择build文件夹。
7. 开始插件开发工作。

下载地址

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