找了半天如何結合vite進行chrome extension的開發(fā)。發(fā)現了npm有一些模版，不過感覺都不太好用，或者是基于webpack的。
因此順便在學習一下如何進行項目配置，著手自己搭一個開發(fā)環(huán)境。整體思路也很簡單，這種不涉及后端方法替換，只是生成多項目。
沿著這個思路（基于node7+開發(fā)）：
樣例項目 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 之類的東西。因此還要繼續(xù)改造一下。

增加 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 配置，再增加一個獨立的項目配置項即可。

參考完整項目地址