【源码】基于 React 和 Ant Design 的 Chrome 扩展开发示例项目

项目简介

本项目是基于 React 和 Ant Design 开发的 Chrome Extension 项目 Demo，借助现代前端技术构建，展示了如何打造一个功能丰富、结构清晰的 Chrome 插件。

项目的主要特性和功能

1. 集成 Stylus，支持灵活的样式定制。
2. 集成 React 与 Ant Design，提供高效、直观的前端开发体验。
3. 集成 mock.js，方便进行前端开发时的模拟数据测试。
4. 解决 Ant Design 全局样式污染问题，并实现按需加载。
5. popup、content、background 目录相互独立，便于团队协作开发与维护。
6. 按照 Chrome Extension 最终生成目录要求配置 webpack。
7. 封装 axios，可将 API 请求委托给 background script 执行，实现跨域请求。
8. 可设置 .env.development 环境变量，便于在开发环境下禁止委托 background script 发起请求。
9. 包含 popup、content、background 的简单 Demo。

安装使用步骤

前提

假设用户已经下载了本项目的源码文件。

具体步骤

1. 复制项目：使用 git clone 命令将项目复制至本地。
2. 安装依赖：执行 npm install 或 cnpm install 安装项目所需依赖。
3. 开发调试：
   • 执行 yarn start 可在开发环境预览调试 popup 页面。
   • 若需在开发环境预览调试 content script，需修改 src/popup/index.js，引入 content script： javascript import React, { Fragment } from 'react' import { HashRouter, Route, Switch, Redirect } from 'react-router-dom' import Login from './pages/login' import Home from './pages/home' import './popup.styl' import '@/content'
4. 构建项目：执行 yarn build 生成最终的 Chrome Extension 文件。
5. 精简文件：可删除 build 生成的最终文件中不必要的文件，以减小插件体积，具体可删除的文件如下： ├─ /images ├─ /static | ├─ /css | | ├─ content.css | | ├─ content.css.map | | ├─ main.css | | └─ main.css.map | ├─ /js | | ├─ background.js | | ├─ background.js.LICENSE.txt | | ├─ background.js.map | | ├─ content.js | | ├─ content.js.LICENSE.txt | | ├─ content.js.map | | ├─ main.js | | ├─ main.js.LICENSE.txt | | └─ main.js.map | ├─ /media ├─ asset-manifest.json ├─ favicon.ico ├─ index.html ├─ insert.js ├─ manifest.json ├─ precache-manifest.xxxxxxx.js ├─ service-worker.js

请注意，使用该项目时需根据实际需求进行修改和扩展。此项目仅供学习和参考，用于实际项目时请自行评估并测试其适用性和稳定性。

下载地址

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