前言
写了个vite插件,用于构建Chrome Extension MV3项目。项目已放在github,详情请查看: vite-plugin-crx-mv3
如果对您有帮助,star支持一下,谢谢~
特性
- 支持Manifest V3
- 支持Typescript
- 支持在manifest.json中配置sass/less
- 支持多种框架或库,如vue,react等等
- Live Reload
- 上手简单
使用
安装
# pnpm
pnpm add vite-plugin-crx-mv3 -D
# or npm
npm install vite-plugin-crx-mv3 -D
# or yarn
yarn add vite-plugin-crx-mv3 -D
vite配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' //如果是使用vue开发的,引入相关的插件
import crx from 'vite-plugin-crx-mv3'
export default defineConfig({
plugins: [
vue(),
crx({
manifest: './src/manifest.json'
}),
],
})
实现的整体思路
先回顾一下,一个基本的Chrome插件项目一般有哪些内容:
目录结构
├─assets //静态资源目录,存放icon,css等等
├─content.js //content_scripts,这是运行在页面中的内容脚本
├─sw.js //service_worker, 这是个运行在后台的脚本。也可以根据自己习惯命名为background.js
├─popup.html //popup弹框
├─menifest.json //清单文件
menifest.json
{
"name": "chrome-extension-demo",
"description": "A Chrome extension demo.",
"version": "1.0.0",
"icons": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
},
"action": {
"default_title": "Hello World",
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": [ "<all_urls>" ],
"js": ["content.js"]
}],
"background": {
"service_worker": "sw.js"
},
"manifest_version": 3
}
这其中version
, manifest_version
,name
为必填项。
好了,现在我们都清楚项目需要有什么了。这个vite插件就是以manifest.json作为一个入口文件,解析出里面的内容,比如service_worker
、content_scripts
、popup.html
等等的路径。再通过这些得到的内容,利用构建工具打包出我们想要的最终的文件。因此,配合上这个vite插件,原本只能配置原生js,css后缀的manifest.json支持了配置.ts(x)、.scss、.less这样格式的文件了,因为这些都会在插件内部作解析的。这样,content_scripts也实现了使用vue、react等等这样的技术栈开发了。
例如,配置了tsx文件:
...
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.tsx"],
}]
...
打包后是这样。产生的css文件会自动写入到配置:
...
"content_scripts": [{
"matches": [ "<all_urls>" ],
"js": ["content.js"],
"css": ["content.hashxxxx.css"],
}]
...
自动刷新功能详解
画了一个简单的流程图
先从开始的vite build --watch
说起,为什么开发环境也要build呢?还是得解释一下,避免刚入门的小伙伴不理解。
开发步骤是这样的,首先打开chrome://extensions/
, 右上角勾选“开发者模式”,然后点击“加载已解压的扩展程序”,加载项目。
但是,使用构建工具搭建的项目,都是初始文件,并没打包,这样是不能加载进去的。平常我们开发其它项目的时候,npm run dev
运行后,并不会产生实体文件的,而是在内存里。所以在开发Chrome插件项目时就需要build,生成dist目录,再点击“加载已解压的扩展程序”加载这个dist目录。vite还提供了watch这个参数,修改文件后,会自动重新打包。如果你是用webpack
搭建,想达到相同的效果,需要把devServer.writeToDisk
设置为true,writeToDisk意为写入到磁盘。
到了这步,尽管watch到文件修改,会重新打包。但是Chrome插件并不会感知到文件已发生变化。content_scripts和service_worker是不会自动更新的。通常都需要手动到后台刷新一下。这很不方便,于是实现了修改文件,自动重载的功能。Chrome提供了chrome.runtime.reload
方法,可以利用这个做文章。
首先我们需要知道,content_scripts、service_worker、popup这三者是可以互相通信的。插件利用了content_scripts和service_worker之间的消息传递,从而达到刷新的目的。
//content_scripts发送消息
chrome.runtime.sendMessage({ msg: 'RELOAD' }, () => {
window.location.reload() //service_worker回传消息给content_scripts的回调
})
//service_worker接收消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.msg == 'RELOAD') {
chrome.runtime.reload() //重载Chrome插件
sendResponse() //回传消息给content_scripts
}
})
vite-plugin-crx-mv3插件,在开发环境会把上述代码分别写入到content-dev.js和sw-dev.js(如果用户没配置service_worker才会生成sw-dev.js。如果配了,就把chrome.runtime.onMessage.addListener那段代码,插入到原有的sw.js)。同时这个*-dev.js路径也会写入到manifest.json配置文件。
...
"content_scripts": [{
"matches": ["<all_urls>"], //设置为<all_urls>,这样所有页面都会加载到
"js": ["content-dev.js"],
}]
"background": {
"service_worker": "sw-dev.js"
},
...
到这步已经准备得差不多了。我们的最终目的是,修改文件后,重新打包产出新的文件,然后Chrome插件可以自动刷新。vite build --watch
已经实现一部分了。完整的刷新功能还需要使用websocket协助实现的,修改文件每次重新打包后,发送socket消息通知客户端(content-dev.js),然后客户端再传递消息给service_worker执行chrome.runtime.reload方法。
在vite插件的writeBundle阶段发送socket消息(其实是rollup的钩子),在这阶段表示已经构建完成,文件写入完成。
writeBundle(){
//发送消息给客户端(content-dev.js)
//content-dev.js里面接收到消息后,就走上面和service_worker通信的流程了。
if(socket){
socket.send('something')
}
}
附上一个GIF预览图:
写在最后
这个vite插件基本满足自己现阶段的开发需求,其实开发Chrome插件的经验并不是很多,可能有些场景还没覆盖,请多多包涵。如果使用过程有什么问题,可以告知我,谢谢~