vite-plugin-crx-mv3

Build a Chrome Extension with Vite.

English | 简体中文

Features

• Chrome extension pages and content scripts supporting the use of vue, react, etc..
• content_scripts css configuration item supports .scss or .less files; js configuration item supports .js(x) or .ts(x) files.
• background.service_worker configuration item supports .js or .ts files.
• In development environments, content_scripts injected pages and Chrome extensions are automatically reloaded after content_scripts and background.service_worker are modified.

Usage

Install

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

Plugin options

port

• Type: number
• Default: 8181

Create a websocket connection. Notify Chrome extension clients to reload when changes are made to the content_scripts and service_worker files.

manifest

• Type: string
• Required : true

Path to the chrome extension's manifest.json

Configuration

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})

Run

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

Examples

Check out the examples in this repo.

• crx-basic
• crx-react
• crx-solid
• crx-jquery
• crx-vue
• crx-vue-drawer
• crx-vue-multi-page
• crx-contentscript-sass-less
• crx-executescript-function
• crx-executescript-files
• crx-insertcss-files
• crx-vue-newtab-AntdUI

Check out this GIF preview.

Notes

• After starting the project, you need to refresh the page manually for the first time, so that the client and the server can establish a websocket connection.
• You need to restart the project after modifying manifest.json.
• The html file needs to be placed outside the src directory.