vite-plugin-vue-chrome-extension

一个 vite 插件，用于辅助 vite + vue 开发 chrome extension.

Install

npm i -D vite-plugin-vue-chrome-extension
yarn add -D vite-plugin-vue-chrome-extension
pnpm add -D vite-plugin-vue-chrome-extension

Usage

把vite-plugin-vue-chrome-extension放到@vitejs/plugin-vue后面。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import chromeVue from "vite-plugin-chrome-extension-vue";

export default defineConfig({
  plugins: [vue(), chromeVue()],
});

Options

options 没有，使用到vite.config.js的两个配置。

• outDir 打包的文件路径默认还是dist,想改这个在vite.config.js中修改。
• cacheDir 开发时文件缓存路径默认还是node_modules/.vite,想改这个在vite.config.js中修改。

Serve

开发时，文件被缓存到node_modules/.vite目录下，同时会拷贝项目根目录下的manifest.json文件到.vite/manifest.json,使用谷歌浏览器加载已解压扩展程序并选择.vite文件夹就可以打开。

manifest.json中的 popup 使用的index.html会被当作项目的入口文件，当然这个文件的路径中和名称都是可以修改的。一般使用vite + vue创建的index.html就可以了。

server_worker.js也就是 background.js 会被自动拷贝到.vite下。

多入口文件需要指定写在src/pages中以每个 page 中的index.html为入口文件。

1. 项目文件目录结构

└── public
    │
    src
    ├── assets
    ├── components
    ├── pages
    │    ├── pageA
    │    │   ├── App.vue
    │    │   ├── index.html
    │    │   ├── main.ts
    │    └── pageB
    │        ├── App.vue
    │        ├── index.html
    │        └── main.ts
    ├── App.vue
    ├── main.js
    ├── server_worker.js
    │
    index.html
    │
    manifest.json
    │
    vite.config.js

2. manifest.json 文件内容

{
  "manifest_version": 3,
  "name": "chrome test by vite",
  "version": "1.0.0",
  "description": "chrome test by vite",
  "background": {
    "service_worker": "src/service-worker.js",
    "type": "module"
  },
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "src/assets/icons/logo.png",
      "32": "src/assets/icons/logo.png",
      "36": "src/assets/icons/logo.png",
      "48": "src/assets/icons/logo.png",
      "128": "src/assets/icons/logo.png"
    }
  },
  "permissions": ["tabs", "storage"],
  "host_permissions": ["<all_urls>"]
}

其中default_popup也可以写成src/pages/popup/index.html，不使用项目根目录下的index.html也是可以的。service_worker的路径也是可以修改。

Build

打包项目时，会根据manifest.json中的default_popup当作入口文件打包，同时还会看项目中的src有没有pages其他入口。文件会被打包到项目根目录下的dist. 使用谷歌浏览器加载已解压扩展程序并选择dist文件夹就可以打开。