【源码】基于React和Ant Design的Chrome扩展插件开发Demo

项目简介

本项目是一个基于React和Ant Design开发的Chrome扩展插件Demo。借助此项目，开发者能快速掌握使用React和Ant Design构建Chrome扩展插件的方法，实现丰富的用户交互功能。项目集成了Stylus、mock.js、react-router-dom等工具，支持Ant Design按需加载，还通过webpack配置满足了Chrome扩展插件最终生成目录的要求。

项目的主要特性和功能

1. React + Ant Design：运用React和Ant Design构建用户界面，带来丰富的交互体验。
2. Content Script：可对网页进行操作和修改，如修改DOM元素、注入JavaScript、添加CSS等。
3. Background Script：在后台进行浏览器管理和高级操作，如监听地址变化、处理请求、管理本地存储等。
4. 跨域请求：封装axios，委托background script执行API请求，实现跨域请求。
5. 模块化开发：popup、content、background目录相互独立，便于团队协作开发与维护。
6. 环境变量配置：通过.env.development文件配置开发环境变量，可在开发环境禁止委托background script发起请求。
7. SVG组件支持：支持使用@svgr/webpack加载SVG组件，并在React组件中使用。

安装使用步骤

安装依赖

在项目根目录下执行以下命令安装项目依赖： bash npm install 或使用cnpm： bash cnpm install

开发调试

执行以下命令启动开发环境，预览调试popup页面： bash npm run start 若需调试content script，可在src/popup/index.js中引入content script： javascript import '@/content'

构建项目

执行以下命令生成最终的Chrome Extension文件： bash npm run build

加载插件

在Chrome浏览器中打开扩展程序管理页面，加载生成的插件文件即可使用。

简化build文件

可手动删除以下文件简化build文件，但删除前需了解各文件作用，避免误删重要文件： - 删除images文件夹 - 删除static文件夹及其下的所有文件（除manifest.json和insert.js） - 删除asset-manifest.json、favicon.ico、precache-manifest.xxxxxxx.js、service-worker.js文件

下载地址

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