2022新春版：React+Antd开发Chrome插件教程（Manifest V3）
为什么是免费试读版？
付费阅读的大环境，一方面很好保护了创作者的知识产权，另一方面提高了创作者的写作动力和内容质量。 本人的文章分为「免费版」和「付费版」。
「免费版」主要为短平快的日常经验技巧技术分享，「付费版」篇幅较长，编排更加系统化，内容更加详实。 无论「免费版」和「付费版」，本人都是精心准备，反复验证校对，保证内容质量，坚持做好原创。
欢迎关注作者微信公众号「卧梅又闻花」，阅读该文章完整版。
❤️ 原创写作不易，您的支持是对作者最大的支持鼓励 ❤️
------试读开始------
Chrome浏览器插件众所周知了，我们在使用chrome的时候，或多或少都会安装一些插件以便更高效地开展工作。Chrome Extension经过了十几年的发展，其技术模式已经非常成熟了。在2020年5月6日，我发布过一篇关于Chrome插件开发的教程《React+Antd开发chrome插件教程》。当时的Chrome插件是基于manifest V2版本规范开发的。而在2020年11月9日，谷歌正式发布了manifest V3（简称MV3），在提供了更优质更安全的性能同时，开发规范也发生了一些小变化。到编写本教程时。又过了一年多的时间，MV3也相对更加稳定成熟了，教程中涉及的其他一些依赖包也经历了很多版本更新。因此，再次编写新版教程，希望能够帮助各位省去摸索的时间，少走弯路，快速启动项目开发。
本次分享Demo的主要依赖包版本：
Node.js 16.13.2
create-react-app 5.0.0
react 17.0.2
react-router-dom 6.2.1
antd 4.18.4
node-sass 7.0.1
sass-loader 12.3.0
less 4.1.2
less-loader 10.2.0
stylus 0.56.0
stylus-loader 6.2.0
http-proxy-middleware 2.0.1
先睹为快
先看下目录了解本教程都有哪些内容，是不是也有你在摸索中遇到的问题呢？由于篇幅过长，本教程分为【上篇】和【下篇】两部分。强烈建议按照以下章节一步一步搭建，大约30分钟的时间，就可以快速掌握整个项目的原理和细节。这样在以后遇到新问题的时候，可以知道从哪个环节入手。
【上篇】
1 初始化项目
• 1.1 使用create-react-app 5.0新建项目
• 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 开发结构设计及build配置
• 3.1 开发架构设计
• 3.2 配置webpack
• 3.2.1 暴露webpack
• 3.2.2 支持Sass/Scss
• 3.2.3 支持Less
• 3.2.4 支持Stylus
• 3.2.5 设置路径别名
• 3.2.6 禁止build项目生成map文件
• 3.2.7 设置多入口
• 3.2.8 固定build生成的文件名
• 3.2.9 设置popup只引入自己的index.js
• 3.2.10 初始化项目架构文件
4 引入Ant Design
• 4.1 安装Ant Design
• 4.2 实现按需加载
• 4.3 自定义Antd主题颜色（非必须）
5 Popup开发
• 5.1 安装react-router-dom
• 5.2 页面构建
• 5.2.1 popup入口文件代码
• 5.2.2 popup总路由页面代码
• 5.2.3 popup全局样式代码
• 5.2.4 popup login页面代码
• 5.2.5 popup home页面代码
• 5.3 查看popup效果
6 build项目并载入插件
7 background script开发
• 7.1 设置允许运行popup的页面规则
• 7.2 为什么插件图标在禁用页面不变成灰色
【下篇】
8 content script开发
• 8.1 向目标页面注入悬浮球
• 8.2 使用Ant Design开发content script
• 8.3 查看content组件效果
• 8.4 加载插件自身的静态图片资源（选读）
9 解决Ant Design样式对目标页面的污染问题
• 9.1 抽离antd全局reset样式
• 9.2 content引入抽离的antd-diy样式
• 9.3 单独引用Ant Design组件的js和css
10 在开发环境调试content script
11 API请求
• 11.1 background pages不支持XMLHttpRequest（axios）
• 11.2 使用mock.js和mockjs-fetch模拟请求（选读）
• 11.3 设置开发环境的反向代理请求
• 11.4 封装API及fetch业务逻辑
• 11.5 取消mock.js模拟请求
• 11.6 委托background script完成API请求
• 11.7 实现popup页面的API请求
• 11.8 实现content script的API请求
• 11.9 关键知识点小结
12 其他说明
• 12.1 permission权限配置
• 12.2 插入目标页面的js
• 12.3 Service Worker调试
• 12.4 popup页面调试
• 12.5 精简最终build文件
• 12.6 本教程代码GitHub地址
13 结语
1 初始化项目
1.1 使用create-react-app 5.0新建项目
找个合适的目录，执行：
npx create-react-app react-crx-v3命令最后的react-crx-v3是项目的名称，可以自行更改。
编写教程时，create-react-app已经发布了5.0.0，如果一直报错：
you are running create-react-app 4.0.3 which is behind the latest release (5.0.0)说明你还在使用旧版本的create-react-app，需要先清除npx缓存，执行：
npx clear-npx-cache然后再执行npx create-react-app react-crx-v3创建项目。
稍等片刻即可完成安装。安装完成后，可以使用npm或者yarn启动项目。
进入项目目录，并启动项目：
cd react-crx-v3
yarn start （或者使用npm start）如果没有安装yarn，可以前往yarn中文网站安装：
如果没有安装yarn，可以前往yarn中文网站安装：
https://yarn.bootcss.com/
启动后，可以通过以下地址访问项目：
http://localhost:3000/
1.2 精简项目
接下来，删除一般项目中用不到的文件，最简化项目。
├─ /node_modules
├─ /public
| ├─ favicon.ico
| ├─ index.html
- | ├─ logo192.png
- | ├─ logo512.png
| ├─ mainfest.json
- | └─ robots.txt
├─ /src
- | ├─ App.css
| ├─ App.js
- | ├─ App.test.js
- | ├─ index.css
| ├─ index.js
- | ├─ logo.svg
- | ├─ reportWebVitals.js
- | └─ setupTests.js
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock现在目录结构如下，清爽许多：
├─ /node_modules
├─ /public
| ├─ favicon.ico
| ├─ index.html
| └─ mainfest.json
├─ /src
| ├─ App.js
| └─ index.js
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock以上文件删除后，页面会报错。这是因为相应的文件引用已不存在。需要继续修改代码，先让项目正常运行起来。
逐个修改以下文件：
src/App.js：
function App() {
return React-CRX-v3
}
export default App
src/index.js：
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(public/index.html：
React App
运行效果如下：
2 Chrome Extension基础
本次教程基于目前最新的Chrome Extension Manifest V3进行，也是再次重新编写本教程的主要目的。
2.1 Manifest V3概述
Manifest V3（简称MV3） 是2020年11月9日发布的，时隔MV2已经有很多年了。使用MV3的Chrome插件将有更好的隐私、安全和性能，还能使用很多新的Web技术。具体如下：
1.隐私
新版插件可以在不需要特殊权限的情况下正常运行，当运行到需要某个权限时再请求用户使用许可。
2.安全
对插件访问外部资源做了限制，禁止引入外部js，但图片、视频等静态外部资源不受影响。
3.性能
确保插件可以在各种设备良好运行，即使在安装了很多插件的情况下，也能流畅运行。
4.开发
降低开发门槛，减少开发障碍，更快更好地开发插件。
5.能力
持续提升插件的能力、丰富功能，充分发挥更大的价值作用。
2.2 Manifest V3 主要新特性
1.Service Workers取代background pages
使用Service Workers，可以对资源进行缓存，从而实现离线访问。打开chrome://extensions/，可以看到MV3插件和MV2插件底部分别显示的是Service Worker和背景页。
2.网络请求调整 新增了一个declarativeNetRequestAPI，允许插件修改及阻断网络请求。
3.远程资源访问限制 禁止访问外部的JavaScript及Wasm文件，图片、音视频文件不受影响。
4.Promises使用 可以愉快地使用promise了，包括async/await。
除此之外，还有一些其他的变化。未来，MV3还会引入更多的新特性。
了解更多可参阅官网说明：
https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/
2.3 Chrome Extension的组成
主要由以下部分组成：
- manifest.json （插件配置文件）
- popup (点击插件图标弹出的页面)
- content script (插入到目标页面中执行的js)
- background script (在chrome后台Service Workers中运行的程序)
【manifest.json】
manifest.json必须放在插件项目根目录，里面包含了插件的各种配置信息，其中也包括了popup、content script、background script等路径。
【popup】
作为一个独立的弹出页面，有自己的html、css、js，可以按照常规项目来开发。
【content script】
content script是注入到目标页面中执行的js脚本，可以获取目标页面的Dom并进行修改。但是，content script的JavaScript与目标页面是互相隔离的。也就是说，content script与目标页面的JavaScript不会出现互相污染的问题，同时，也不能调用对方的方法。
注意，以上只是js作用域的隔离，通过content script向目标页面加入的DOM是可以应用目标页面的css，从而造成css互相污染。
【background script】
background script 常驻在浏览器后台Service Workers运行，没有实际页面。一般把全局的、需要一直运行的代码放在这里。重要的是，background script的权限非常高，除了可以调用几乎所有Chrome Extension API外，还可以发起跨域请求。
2.4 规划build生成的目录结构
在了解Chrome Extension的基本组成后，需要按照Chrome Extension官方开发文档以及manifest.json的要求，按以下结构build最终的目录。
├─ favicon.ico <--这个没有也行，用不到
├─ index.html <--popup入口页面
├─ insert.js <--插入到目标页面执行的js（非必须，视业务需求而定）
├─ manifest.json <--插件的配置文件
└─ /static
├─ /css
| ├─ content.css <--content页面样式（会与目标页面互相污染）
| └─ main.css <--popup页面样式（不会与目标页面互相污染）
├─ /js
| ├─ background.js <--background script
| ├─ content.js <--content script
| └─ main.js <--popup script
└─ /media <--项目的图片资源存放目录接下来就是如何实现build出这样的目录结构。
2.5 配置manifest.json
在开发Chrome Extension之前，要先配置好manifest.json。
修改public/manifest.json（请删除其中的注释代码）：
{
"name": "Chrome插件V3",
"version": "1.0",
"description": "React开发chrome插件V3 Demo。",
// Chrome Extension 版本号，3表示MV3
"manifest_version": 3,
// background script配置（根目录为最终build生成的插件包目录）
"background": {
"service_worker": "static/js/background.js"
},
// content script配置
"content_scripts": [
{
// 应用于哪些页面地址（可以使用正则，表示匹配所有地址）
"matches": [""],
// 注入到目标页面的css，注意不要污染目标页面的样式
"css": ["static/css/content.css"],
// 注入到目标页面js，这个js是在沙盒里运行，与目标页面是隔离的，没有污染问题。
"js": ["static/js/content.js"],
// 代码注入的时机，可选document_start、document_end、document_idle（默认）
"run_at": "document_end"
}
],
// 申请chrome extension API权限
"permissions": ["storage","declarativeContent"],
// 插件涉及的外部请求地址，暂未发现影响跨域请求，猜测是用于上架商店时方便审核人员查阅
"host_permissions":[],
// 如果向目标页面插入图片或者js，需要在这里授权插件本地资源（以下仅为示例）。
"web_accessible_resources": [
{
"resources": [ "/images/app.png" ],
"matches": [""]
},
{
"resources": [ "insert.js" ],
"matches": [""]
}
],
// popup页面配置
"action": {
// popup页面的路径（根目录为最终build生成的插件包目录）
"default_popup": "index.html",
// 浏览器插件按钮的图标
"default_icon": {
"16": "/images/app.png",
"32": "/images/app.png",
"48": "/images/app.png",
"128": "/images/app.png"
},
// 浏览器插件按钮hover显示的文字
"default_title": "React CRX MV3"
},
// 插件图标，图省事的话，所有尺寸都用一个图也行
"icons": {
"16": "/images/app.png",
"32": "/images/app.png",
"48": "/images/app.png",
"128": "/images/app.png"
}
} manifest的配置项还有很多，可前往官网查阅：
manifest：
https://developer.chrome.com/docs/extensions/mv3/manifest/manifest_version：
https://developer.chrome.com/docs/extensions/mv3/manifest/manifest_version/content script：
https://developer.chrome.com/docs/extensions/mv3/content_scripts/permissions：
https://developer.chrome.com/docs/extensions/mv3/declare_permissions/
------试读结束------
如果您对本次分享感兴趣，请关注我的微信公众号「卧梅又闻花」，继续阅读完整版：
2022新春版：React+Antd开发Chrome插件教程（Manifest V3）上篇
https://mp.weixin.qq.com/s/5D_6dqz4qI61Ln4oOo1O3A2022新春版：React+Antd开发Chrome插件教程（Manifest V3）下篇https://mp.weixin.qq.com/s/kkS9ODEDe-64BCGqr88RPw
后续内容
【上篇】
3 开发结构设计及build配置
• 3.1 开发架构设计
• 3.2 配置webpack
• 3.2.1 暴露webpack
• 3.2.2 支持Sass/Scss
• 3.2.3 支持Less
• 3.2.4 支持Stylus
• 3.2.5 设置路径别名
• 3.2.6 禁止build项目生成map文件
• 3.2.7 设置多入口
• 3.2.8 固定build生成的文件名
• 3.2.9 设置popup只引入自己的index.js
• 3.2.10 初始化项目架构文件
4 引入Ant Design
• 4.1 安装Ant Design
• 4.2 实现按需加载
• 4.3 自定义Antd主题颜色（非必须）
5 Popup开发
• 5.1 安装react-router-dom
• 5.2 页面构建
• 5.2.1 popup入口文件代码
• 5.2.2 popup总路由页面代码
• 5.2.3 popup全局样式代码
• 5.2.4 popup login页面代码
• 5.2.5 popup home页面代码
• 5.3 查看popup效果
6 build项目并载入插件
7 background script开发
• 7.1 设置允许运行popup的页面规则
• 7.2 为什么插件图标在禁用页面不变成灰色
【下篇】
8 content script开发
• 8.1 向目标页面注入悬浮球
• 8.2 使用Ant Design开发content script
• 8.3 查看content组件效果
• 8.4 加载插件自身的静态图片资源（选读）
9 解决Ant Design样式对目标页面的污染问题
• 9.1 抽离antd全局reset样式
• 9.2 content引入抽离的antd-diy样式
• 9.3 单独引用Ant Design组件的js和css
10 在开发环境调试content script
11 API请求
• 11.1 background pages不支持XMLHttpRequest（axios）
• 11.2 使用mock.js和mockjs-fetch模拟请求（选读）
• 11.3 设置开发环境的反向代理请求
• 11.4 封装API及fetch业务逻辑
• 11.5 取消mock.js模拟请求
• 11.6 委托background script完成API请求
• 11.7 实现popup页面的API请求
• 11.8 实现content script的API请求
• 11.9 关键知识点小结
12 其他说明
• 12.1 permission权限配置
• 12.2 插入目标页面的js
• 12.3 Service Worker调试
• 12.4 popup页面调试
• 12.5 精简最终build文件
• 12.6 本教程代码GitHub地址
13 结语
推荐阅读
2022新春版：React+Antd开发Chrome插件教程（Manifest V3）上篇https://mp.weixin.qq.com/s/5D_6dqz4qI61Ln4oOo1O3A2022新春版：React+Antd开发Chrome插件教程（Manifest V3）下篇https://mp.weixin.qq.com/s/kkS9ODEDe-64BCGqr88RPw
2022新春版：手把手教你搭建Electron17+React17+Antd架构工程https://mp.weixin.qq.com/s/OTbIduwYl31oJmLgTR-SIg
一张刮刮卡竟包含这么多前端知识点https://mp.weixin.qq.com/s/UVWmUwwrH5uVonRgAVtZww
React+Antd开发chrome插件教程https://mp.weixin.qq.com/s/cq-nOlTJfqXcn-LHS4_JKw
超详实！带你一步步搭建Electron10+React16+Antd4架构工程https://mp.weixin.qq.com/s/24SiiGZQSlFQKkYMLTX9dg