2023新春版：React+Antd开发Chrome插件教程（Manifest V3） |
您所在的位置：网站首页 › stylus教程 › 2023新春版：React+Antd开发Chrome插件教程（Manifest V3） |
2023新春版：React+Antd开发Chrome插件教程（Manifest V3）
 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 以方式向目标页面插入js • 12.3 Service Worker调试 • 12.4 popup页面调试 • 12.5 精简最终build文件 13 项目Git源码 结束语本次分享Demo的主要依赖包版本： Node.js 18.14.0create-react-app 5.0.1react 18.2.0react-router-dom 6.8.0antd 5.1.7node-sass 8.0.0sass-loader 12.3.0less 4.1.3less-loader 11.1.0stylus 0.59.0stylus-loader 7.1.0mockjs 1.1.0mockjs-fetch 2.0.0http-proxy-middleware 2.0.6※注： 代码区域每行开头的："+" 表示新增"-" 表示删除"M" 表示修改1 初始化项目1.1 使用create-react-app新建项目找个合适的目录，执行： npx create-react-app react-crx-2023命令最后的react-crx-2023是项目的名称，可以自行更改。 编写教程时，create-react-app已经发布了5.0.1，如果一直报错： you are running create-react-app 4.0.3 which is behind the latest release (5.0.1)说明你还在使用旧版本的create-react-app，需要先清除npx缓存，执行： npx clear-npx-cache然后再执行之前的命令创建项目： npx create-react-app react-crx-2023稍等片刻即可完成安装。安装完成后，可以使用npm或者yarn启动项目。 进入项目目录，并启动项目： cd react-crx-2023 yarn start （或者使用npm start）如果没有安装yarn，可执行以下命令全局安装： npm install --global 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-lock.json ├─ package.json └─ README.md现在目录结构如下，清爽许多： ├─ /node_modules ├─ /public | ├─ favicon.ico | ├─ index.html | └─ mainfest.json ├─ /src | ├─ App.js | └─ index.js ├─ .gitignore ├─ package-lock.json ├─ package.json └─ README.md以上文件删除后，页面会报错。这是因为相应的文件引用已不存在。需要继续修改代码，先让项目正常运行起来。 逐个修改以下文件，最终精简代码依次如下： src/App.js： function App() { return React-CRX-2023 } export default Appsrc/index.js： import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' const root = ReactDOM.createRoot(document.getElementById('root')) root.render()public/index.html： React-CRX-2023 You need to enable JavaScript to run this 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，可以对资源进行缓存，从而实现离线访问。 （2）网络请求调整 新增了一个```declarativeNetRequest```API，允许插件修改及阻断网络请求。 （3）远程资源访问限制 禁止访问外部的JavaScript及Wasm文件，但图片、音视频文件不受影响。 （4）Promises使用 可以愉快地使用promise了，包括async/await。 除此之外，还有一些其他的变化。未来，MV3还会引入更多的新特性。 了解更多可参阅官网说明： https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/2.3 Chrome Extension的组成主要由以下部分组成： 1. manifest.json （插件配置文件） 2. popup (点击插件图标弹出的页面) 3. content script (插入到目标页面中执行的js) 4. 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 |
【本文地址】