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中文网站安装：

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(, document.getElementById('root'))

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 结语