Vite Vue CRX

![封面_掘金.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f94cf7ce8d414edd8e28bc1003a6204d~tplv-k3u1fbpfcp-watermark.image?) ![原创声明-掘金.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ae6145822a74bd6bca71a3d025638b8~tplv-k3u1fbpfcp-watermark.image?) Chrome浏览器插件（Chrome Extension，简称CRX）大家已经非常熟悉了。目前的Chrome Extension开发应该按照Manifest V3的规范。按照谷歌官方的通知，2023年6月开始，将不允许发布Manifest V2的Chrome Extension，预计到2024年将全面下架Manifest V2的Chrome Extension。Manifest V2即将退出历史舞台，因此，本系列教程将不再提及Manifest V2，全部为Manifest V3（简称MV3）内容。我的主要技术栈是React，最近一次发表的关于Chrome插件开发教程是在2023年8月14日[《2023金秋版：基于Vite4+React的Chrome插件开发教程》,](https://mp.weixin.qq.com/s/l4G399Br4-AlwssshydWLA)这是React版本的。如果你也是React栈，欢迎去阅读这个React版本。由于很多人问我有没有Vue版本的Chrome开发教程，因此又同步新增了本教程。详细讲解如何基于Vite4+Vue3开发Chrome插件。希望能够帮助各位省去摸索的时间，少走弯路，快速完成项目开发。 ## 先睹为快先看下目录了解本教程都有哪些内容。强烈建议按照以下章节一步一步边学边做，可以快速掌握整个项目的原理和细节，在以后遇到新问题的时候，可以知道从哪个环节入手。 ### 章节目录 ``` 1 初始化项目 • 1.1 使用Vite新建项目 • 1.2 安装并运行项目 • 1.3 精简项目 2 Vite基础配置 • 2.1 配置国内镜像源 • 2.2 支持Sass/Scss/Less/Stylus • 2.3 设置dev环境的Server端口号 • 2.4 设置dev环境自动打开浏览器 • 2.5 设置路径别名 3 Chrome Extension基础 • 3.1 Manifest V3概述 • 3.2 Manifest V3 主要新特性 • 3.3 Chrome Extension的组成 • 3.4 规划build生成的目录结构 • 3.5 配置manifest.json 4 项目目录结构设计 5 针对Chrome Extension的Vite配置 • 5.1 设置全局配置 • 5.2 设置popup的build配置 • 5.3 设置content script的build配置 • 5.4 设置background script的build配置 • 5.5 通过补充脚本合并三个build 6 设置公用样式并集成Element Plus • 6.1 关于样式命名规范 • 6.2 设置全局公用样式 • 6.3 集成Element Plus • 6.4 设置Element Plus为中文语言 7 Popup开发 • 7.1 迁移main.js至popup目录 • 7.2 构建popup的Login页面 • 7.3 构建popup的Home页面 • 7.4 构建popup的Account页面 • 7.5 配置popup页面路由 • 7.6 构建Nav导航组件 • 7.7 构建Entry二级路由框架页面 • 7.8 调整popup入口页面，打通全部路由 • 7.9 完善Login页面的登录跳转 • 7.10 设置popup页面尺寸 8 build项目并载入插件 9 background script开发 • 9.1 设置允许运行popup的页面规则 • 9.2 为什么插件图标在禁用页面不变成灰色 10 content script开发 • 10.1 向目标页面注入悬浮球 • 10.2 在content script中集成Element Plus并解决样式污染 • 10.3 在content script中使用Element Plus 11 在开发环境中调试content script 12 API请求 • 12.1 background pages不支持XMLHttpRequest（axios） • 12.2 使用mock.js和mockjs-fetch模拟请求 • 12.3 封装API及fetch业务逻辑 • 12.4 委托background script完成API请求 • 12.5 实现popup的Login页面API请求 • 12.6 设置开发环境的反向代理请求 • 12.7 实现content script的API请求 • 12.8 关键知识点小结 13 其他说明 • 13.1 permission权限配置 • 13.2 以 ``` src/main.js： ``` import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` index.html： ``` Vite Vue CRX

``` 在上述index.html代码中，修改了网站图标，因此需要自行准备一个图标文件favicon.ico，存放在```/public```目录下。当然，也可以使用svg格式。这里你可能会问，为什么在index.html中的``````中引入图标的路径是"/favicon.ico"，而favicon.ico明明是放在/public目录下，却不是"/public/favicon.ico"呢？按照Vite官方说明：引入public中的资源永远应该使用根绝对路径，并且，public中的资源不应该被JavaScript文件引用。 > public目录Vite官方说明： > > https://cn.vitejs.dev/guide/assets.html#the-public-directory 执行yarn dev，运行效果如下： ![1.3_精简项目.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29bc69cb6e744e6e9b942f9fe4aceff4~tplv-k3u1fbpfcp-watermark.image?) ## 2 Vite基础配置 ### 2.1 配置国内镜像源 npm和yarn默认是从国外源站拉取依赖包的，为提高下载速度和稳定性，建议配置为国内镜像源。设置yarn registry国内镜像： ``` yarn config set registry https://registry.npmmirror.com ``` 设置npm registry国内镜像： ``` npm config set registry https://registry.npmmirror.com ``` 如果不清楚本地当前yarn或者npm的配置，可以执行以下命令查看： yarn查看方法： ``` yarn config list ``` npm查看方法： ``` npm config list ``` > ※注：本教程主要使用yarn，后续不再复述对应的npm命令。 ### 2.2 支持Sass/Scss/Less/Stylus Vite本身提供了对.scss/.sass/.less/.styl/.stylus文件的内置支持。无需再安装特定的Vite插件，但必须安装相应的预处理器依赖。支持Sass/Scss，执行以下命令安装： ``` yarn add -D sass ``` 支持Less，执行以下命令安装： ``` yarn add -D less ``` 支持Stylus，执行以下命令安装： ``` yarn add -D stylus ``` 安装后，就可以直接使用以上对应的CSS预处理语言了，非常方便。 > CSS预处理Vite官方说明： > > https://cn.vitejs.dev/guide/features.html#css-pre-processors ### 2.3 设置dev环境的Server端口号 dev server默认端口是5173，如果想修改为其他端口（例如使用3000端口），可以进行以下设置。修改vite.config.js： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ + server: { + // 指定dev sever的端口号，默认为5173 + port: 3000, + }, plugins: [vue()], }) ``` ### 2.4 设置dev环境自动打开浏览器基于Vite创建的工程默认情况并不会自动打开浏览器。如果想要自动打开浏览器，可进行以下设置。修改vite.config.js： ``` // https://vitejs.dev/config/ export default defineConfig({ server: { // 指定dev sever的端口号 port: 3000, + // 自动打开浏览器运行以下页面 + open: '/', }, ...（略） }) ``` open的"/"值，表示的是打开"localhost:3000/"。如果想直接打开其他页面，例如"localhost:3000/#/home"，open的值则设置为"/#/home"即可。 > ※注：open的值修改后，虽然已经生效，但不会直接触发打开浏览器的行为。这个行为只发生在通过命令启动项目的时候，也就是执行yarn dev的时候。 ### 2.5 设置路径别名为了避免使用相对路径的麻烦，可以设置路径别名。修改vite.config.js： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' + import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ server: { ...（略） }, + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + }, ...（略） }) ``` 这个配置里使用了path，不要忘记在代码头部要```import path from 'path'```哦。这样在js代码开头的import路径中，直接使用@表示“src根目录”，不用去自己去数有多少个"../"了。 ## 3 Chrome Extension基础本次教程基于目前最新的Chrome Extension Manifest V3进行。 ### 3.1 Manifest V3概述 Manifest V3（简称MV3）是2020年11月9日发布的，时隔MV2已经有很多年了。使用MV3的Chrome插件将有更好的隐私、安全和性能，还能使用很多新的Web技术。具体如下： **（1）隐私** 新版插件可以在不需要特殊权限的情况下正常运行，当运行到需要某个权限时再请求用户使用许可。 **（2）安全** 对插件访问外部资源做了限制，禁止引入外部js，但图片、视频等静态外部资源不受影响。 **（3）性能** 确保插件可以在各种设备良好运行，即使在安装了很多插件的情况下，也能流畅运行。 **（4）开发** 降低开发门槛，减少开发障碍，更快更好地开发插件。 **（5）能力** 持续提升插件的能力、丰富功能，充分发挥更大的价值作用。 ### 3.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/ ### 3.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外，还可以发起跨域请求。 ### 3.4 规划build生成的目录结构在了解Chrome Extension的基本组成后，需要按照Chrome Extension官方开发文档以及manifest.json的要求，按以下结构build最终的目录。 ``` ├─ /assets <--popup的静态资源目录 | ├─ index-xxxx.css <--popup的样式文件 | ├─ index-xxxx.js <--popup script | └─ xxxx.png <--popup的图片等文件（示例） ├─ /images <--公共图片资源目录 | └─ app.png <--插件的图标文件 ├─ background.js <--background script ├─ content.js <--content script ├─ content.css <--content script的css文件 ├─ favicon.ico <--这个没有也行，用不到 ├─ index.html <--popup入口页面 ├─ insert.js <--插入到目标页面执行的js（非必须，视业务需求而定） └─ manifest.json <--插件的配置文件 ``` 接下来就是如何实现build出这样的目录结构。 ### 3.5 配置manifest.json 在开发Chrome Extension之前，要先配置好manifest.json。新建public/manifest.json（请删除其中的注释代码）： ``` { "name": "Chrome插件V3", "version": "1.0", "description": "基于Vite的chrome插件V3 Demo", // Chrome Extension 版本号，3表示MV3 "manifest_version": 3, // background script配置（根目录为最终build生成的插件包目录） "background": { "service_worker": "background.js" }, // content script配置 "content_scripts": [ { // 应用于哪些页面地址（可以使用正则，表示匹配所有地址） "matches": [""], // 注入到目标页面的css，注意不要污染目标页面的样式 "css": ["content.css"], // 注入到目标页面js，这个js是在沙盒里运行，与目标页面是隔离的，没有污染问题。 "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": "Vue 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/ ## 4 项目目录结构设计本文将按照以下目录结构进行开发： ``` ├─ /.vscode ├─ /node_modules ├─ /public | ├─ /images <--图片目录 | | └─ app.png <--插件图标 | ├─ favicon.ico <--这个没有也行，用不到 | ├─ insert.js <--插入到目标页面执行的js（非必须，视业务需求而定） | └─ manifest.json <--插件的配置文件 ├─ /src | ├─ /api <-- api目录 | | └─ index.js <-- api库 | ├─ /background <--background script开发目录 | | └─ index.js <--background script主文件 | ├─ /common <-- 全局公用目录 | | ├─ /fonts <-- 字体文件目录 | | ├─ /images <-- 图片文件目录 | | ├─ /js <-- 公用js文件目录 | | └─ /styles <-- 公用样式文件目录 | ├─ /content <--content script开发目录 | | ├─ /components <--content 组件目录 | | ├─ /images <--content 图片目录 | | ├─ content.vue <--content script入口页面文件 | | ├─ element-plus.scss <-- 专为content script定制的特殊element-plus样式命名空间 | | └─ index.js <--content script主文件 | ├─ /popup <--popup开发目录 | | ├─ /components <--popup 组件目录 | | ├─ /router <--popup 路由配置目录 | | | └─ index.js <--popup 路由配置文件 | | ├─ /views <--popup 页面目录 | | ├─ main.js <--popup 主文件 | | └─ popup.vue <--popup 入口页面文件 | └─ mock.js <-- mock数据文件 ├─.gitignore ├─ build.js <-- 补充的build脚本文件 ├─ globalConfig.js <-- 全局配置文件 ├─ index.html <-- popup页面入口 ├─ package.json ├─ vite.popup.config.js <-- popup的Vite配置文件 ├─ vite.content.config.js <-- content的Vite配置文件 ├─ vite.background.config.js <-- background的Vite配置文件 └─ yarn.lock ``` 这种目录结构设计，将background script、content script、popup分别建立独立的目录，并且设置了api、common等公用目录，边界更加清晰，便于维护。 > 【说明】 > > 1. 由于content script是在目标页面上执行，并不是独立的页面，因此不能使用router，也无需pages目录。 > 2. popup是独立的页面，可以按照常规Vue项目设定相应的目录。以上项目结构已经没有src/App.vue了，现在先不用删除，随着后续章节的讲解再删除。接下来，就按照上面的目录结构设计开始构建项目。 ## 5 针对Chrome Extension的Vite配置按照Chrome Extension的规范要求，build出popup项目、content script、background script。 ### 5.1 设置全局配置在项目根目录下新建globalConfig.js： ``` // Chrome Extension 最终build目录 export const CRX_OUTDIR = 'build' // 临时build content script的目录 export const CRX_CONTENT_OUTDIR = '_build_content' // 临时build background script的目录 export const CRX_BACKGROUND_OUTDIR = '_build_background' ``` build目录是最终的成品。_build_content目录和_build_background目录只是过程产物，它俩在build结束后，会合并到build目录中，然后自动删除_build_content目录和_build_background目录。为什么要这么做？首先，popup项目是一个包括html、css、js等文件的完整小型网站，按照Vite的默认配置即可直接build生成。但是content script、background script是没有html的，build配置不一样，因此需要单独进行build。其次，content script、background script如果引入了共同的js模块（例如都import了自定义的api库文件），会被Vite将这些共同的js模块抽离成公共js文件。举个例子，content script中引入了A、B模块，background script中引入了B、C模块。我们期待打包成两个文件： - content.js (A+B) - background.js (B+C) 但实际上会打包成三个文件： - content.js (A) - background.js (C) - B.js (B) 而CRX的content script和background script不能再import或require其他文件。所以，只能将content script和background script分别通过不同的Vite配置文件进行打包，并生成在不同的目录下。 ### 5.2 设置popup的build配置将原vite.config.js更名为vite.popup.config.js。 ❤️❤️❤️------试读结束------❤️❤️❤️ ## 后续精彩章节 ``` • 5.3 设置content script的build配置 • 5.4 设置background script的build配置 • 5.5 通过补充脚本合并三个build 6 设置公用样式并集成Element Plus • 6.1 关于样式命名规范 • 6.2 设置全局公用样式 • 6.3 集成Element Plus • 6.4 设置Element Plus为中文语言 7 Popup开发 • 7.1 迁移main.js至popup目录 • 7.2 构建popup的Login页面 • 7.3 构建popup的Home页面 • 7.4 构建popup的Account页面 • 7.5 配置popup页面路由 • 7.6 构建Nav导航组件 • 7.7 构建Entry二级路由框架页面 • 7.8 调整popup入口页面，打通全部路由 • 7.9 完善Login页面的登录跳转 • 7.10 设置popup页面尺寸 8 build项目并载入插件 9 background script开发 • 9.1 设置允许运行popup的页面规则 • 9.2 为什么插件图标在禁用页面不变成灰色 10 content script开发 • 10.1 向目标页面注入悬浮球 • 10.2 在content script中集成Element Plus并解决样式污染 • 10.3 在content script中使用Element Plus 11 在开发环境中调试content script 12 API请求 • 12.1 background pages不支持XMLHttpRequest（axios） • 12.2 使用mock.js和mockjs-fetch模拟请求 • 12.3 封装API及fetch业务逻辑 • 12.4 委托background script完成API请求 • 12.5 实现popup的Login页面API请求 • 12.6 设置开发环境的反向代理请求 • 12.7 实现content script的API请求 • 12.8 关键知识点小结 13 其他说明 • 13.1 permission权限配置 • 13.2 以