vite-plugin-crx-mv3

使用 Vite 构建 Chrome 扩展

English | 简体中文

特性

• 支持Manifest V3
• 支持Typescript
• 支持在manifest.json中配置sass/less
• 支持多种框架或库，如vue，react等等
• Live Reload
• 上手简单

用法

安装

1# npm
2npm install vite-plugin-crx-mv3 -D
3# or yarn
4yarn add vite-plugin-crx-mv3 -D
5# or pnpm
6pnpm add vite-plugin-crx-mv3 -D

插件选项

port

• Type: number
• Default: 8181

建立一个websocket连接。在content_scripts和service_worker文件发生变化时，通知Chrome扩展客户端重载。

manifest

• Type: string
• Required : true

Chrome扩展的manifest.json文件路径。

reloadPage

• Type: blooen
• Default : true

控制dev环境下自动加载页面

配置

1import { defineConfig } from 'vite'
2import vue from '@vitejs/plugin-vue'
3import crx from 'vite-plugin-crx-mv3'
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    crx({
9      manifest: './src/manifest.json'
10    }),
11  ],
12})

运行

1# development
2npm run dev 
3# production
4npm run build

例子

在本仓库下的examples目录下：

• crx-basic
• crx-vue
• crx-vue-drawer
• crx-vue-multi-page
• crx-vue-antd-bookmarks
• crx-react
• crx-react-sandbox
• crx-solid
• crx-newtab
• crx-contentscript-sass-less
• crx-executescript-function
• crx-executescript-files
• crx-chrome.script
• crx-i18n
• crx-devtools
• crx-webAccessibleResources

预览

examples/crx-vue-drawer

注意事项

• 启动项目后，第一次需要手动刷新页面，这样客户端和服务端便建立了websocket连接。
• html文件需要放在src目录外层。