# vite-plugin-chrome-extension-vue

**Repository Path**: qinjunbang/vite-plugin-chrome-extension-vue

## Basic Information

- **Project Name**: vite-plugin-chrome-extension-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-30
- **Last Updated**: 2024-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-plugin-vue-chrome-extension

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

### Install

```sh
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`后面。

```js
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 文件内容

```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`也是可以的，此时项目入口目录是`src/pages`,使用浏览器直接访问`http://localhost:5173/popup/index.html`可以访问到入口页面。`service_worker`的路径也是可以修改。

### Build

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