vite chrome extension 制作流程

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

参考完整项目地址