找了半天如何结合vite进行chrome extension的开发。发现了npm有一些模版，不过感觉都不太好用，或者是基于webpack的。
因此顺便在学习一下如何进行项目配置，着手自己搭一个开发环境。整体思路也很简单，这种不涉及后端方法替换，只是生成多项目。
沿着这个思路（基于node7+开发）：
样例项目 github
安装vite项目
npm create vite@latest extension -- --template vue
cd extension
npm install
npm run build
增加Chrome extension支持
dist 文件内部会编译出一个网页，接下来要让chrome能够加载这个网页。
在dist文件夹内部增加 manifest.json 即可。文档地址
manifest.json 文件如下：
{
"name": "vite",
"version": "1.0.0",
"manifest_version": 3,
"description": "vite chrome extension tempalte",
"icons": {
"16": "assets/vue.svg",
"48": "assets/vue.svg",
"128": "assets/vue.svg"
},
"options_ui": {
"page": "index.html",
"open_in_tab": false
}
}
之后在dist文件夹内放点icons，这样基本东西就齐了。如果没有其他的需求，目前这种基本上就能完事了。
但是一般来说还想加点 background service worker, override page 之类的东西。因此还要继续改造一下。
增加 background service worker
再增加一个独立的项目生成 background.js
增加一个 vite.config.background.js。
顺便整理一下当前的项目文件组织方式。
- src
- background # background 项目
- popup # popup 项目
- manifest.json # manifest.json
- assets # manifest.json 中的 logo
dist 打包的目录的结构如下：
- dist
- background # background 项目
- popup # popup 项目
- manifest.json # manifest.json
- assets # manifest.json 中的 logo
这样需要增加两个编译项目：
- vite.config.popup.js
- vite.confg.background.js
vite.confg.background.js 项目配置
类似的配置修改到 vite.config.popup.js 上。
import { defineConfig } from 'vite'
import { resolve } from "path"
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'src/background/background.js'),
},
output: {
dir: "dist/background",
entryFileNames: "background.js"
}
}
}
})
manifest.json 中增加background配置
"options_ui": {
"page": "popup/index.html", // 对应的popup项目
"open_in_tab": false
},
"background": {
"service_worker": "background/background.js"
}
进而需要修改一下 package.json
"scripts": {
"build": "vite build -c vite.config.popup.js && vite build -c vite.config.background.js",
// "build": "bash build.sh", // 或者增加脚本bash.sh
},
bash.sh脚本如下：
vite build -c vite.config.popup.js &&\
vite build -c vite.config.override.js
不过其中有一个public产出物无法自动拷贝到dist文件中，因此需要在脚本中增加一些拷贝命令。
完整bash.sh如下：
mkdir dist
rm -rf dist/* &&\
vite build -c vite.config.popup.js &&\
vite build -c vite.config.background.js &&\
cp -r src/assets dist &&\
cp src/manifest.json dist/manifest.json &&\
# copy public
mv src/popup/dist/popup/* dist/popup/ &&\
rm -rf src/popup/dist
基本上到此就能够支持extension跑起来了。
如果需要 override 配置，再增加一个独立的项目配置项即可。
