2023新春版:React+Antd开发Chrome插件教程(Manifest V3)

2023新春版:React+Antd开发Chrome插件教程(Manifest V3)_第1张图片
在这里插入图片描述
Chrome浏览器插件(Chrome Extension)大家已经非常熟悉了。Chrome Extension经过了十几年的发展,其技术模式已经非常成熟了。目前的Chrome Extension开发应该按照Manifest V3的规范。按照谷歌官方的通知,2023年6月开始,将不允许发布Manifest V2的Chrome Extension,预计到2024年将全面下架Manifest V2的Chrome Extension。Manifest V2即将退出历史舞台,因此,本系列教程将不再提及Manifest V2,全部为Manifest V3(简称MV3)内容。

在2022年1月23日,我发布了《2022新春版:React+Antd开发chrome插件教程(Manifest V3)》。到再次更新本教程的这一年的时间,Chrome Extension官方开发指南也陆陆续续有一些小更新,对日常的开发需求来说,没有什么影响。但这一年里,本教程所涉及的React、Antd等前端库都发生了较大变化,因此2023新春版将按照当前最新的技术栈再次更新讲解。希望能够帮助各位省去摸索的时间,少走弯路,快速完成项目开发。

先睹为快

先看下目录了解本教程都有哪些内容。强烈建议按照以下章节一步一步边学边做,大约40分钟的时间,就可以快速掌握整个项目的原理和细节。这样在以后遇到新问题的时候,可以知道从哪个环节入手。

1 初始化项目
• 1.1 使用create-react-app新建项目
• 1.2 精简项目
2 Chrome Extension基础
• 2.1 Manifest V3概述
• 2.2 Manifest V3 主要新特性
• 2.3 Chrome Extension的组成
• 2.4 规划build生成的目录结构
• 2.5 配置manifest.json
3 项目目录结构设计
4 Webpack配置
• 4.1 配置国内镜像源
• 4.2 暴露Webpack
• 4.3 支持Sass/Scss
• 4.4 支持Less
• 4.5 支持Stylus
• 4.6 设置路径别名
• 4.7 禁止build项目生成map文件
• 4.8 设置多入口
• 4.9 固定build生成的文件名
• 4.10 设置popup只引入自己的index.js
• 4.11 设置全局公用样式
• 4.12 初始化项目架构文件
5 引入Ant Design 5.x
• 5.1 安装Ant Design
• 5.2 设置Antd为中文语言
6 Popup开发
• 6.1 引入popup页面
• 6.2 构建popup的Login页面
• 6.3 构建popup的Home页面
• 6.4 构建popup的Account页面
• 6.5 配置popup页面路由
• 6.6 构建Nav导航组件
• 6.7 构建Entry二级路由框架页面
• 6.8 调整popup入口页面,打通全部路由
• 6.9 完善Login页面的登录跳转
• 6.10 设置popup页面尺寸
7 build项目并载入插件
8 background script开发
• 8.1 设置允许运行popup的页面规则
• 8.2 为什么插件图标在禁用页面不变成灰色
9 content script开发
• 9.1 向目标页面注入悬浮球
• 9.2 在content script中使用Antd
• 9.3 加载插件自身的静态图片资源(选读)
10 在开发环境中调试content script
11 API请求
• 11.1 background pages不支持XMLHttpRequest(axios)
• 11.2 使用mock.js和mockjs-fetch模拟请求
• 11.3 封装API及fetch业务逻辑
• 11.4 委托background script完成API请求
• 11.5 实现popup的Login页面API请求
• 11.6 设置开发环境的反向代理请求
• 11.7 实现content script的API请求
• 11.8 关键知识点小结
12 其他说明
• 12.1 permission权限配置
• 12.2 以
                    
                    

你可能感兴趣的:(chrome,react.js,javascript)