找了半天如何结合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 配置，再增加一个独立的项目配置项即可。

参考完整项目地址