<a href="#" target="_blank" rel="noopener noreferrer">
    <img width="180" src="https://github.com/StarkShang/vite-plugin-chrome-extension/raw/main/docs/icons/logo.png" alt="Vite logo">
</a>

vite-plugin-chrome-extension

fork from rollup-plugin-chrome-extension and evolve for vite and Chrome Extension Manifest V3

Table of Contents

• Installation
• Usage

Installation

npm install -D vite-plugin-chrome-extension

Usage

In vite.config.ts,

// vite.config.ts
import { resolve } from "path";
import { defineConfig } from "vite";
import { chromeExtension } from "vite-plugin-chrome-extension";

export default defineConfig({
    resolve: {
        alias: {
            "@": resolve(__dirname, "src"),
        },
    },
    build: {
        rollupOptions: {
            input: "src/manifest.json"
        }
    },
    plugins: [
        chromeExtension()
    ],
})

TODO

• support sass/less in manifest.json

How does this plugin work

See Work flow

Examples

• [X] Background

Examples from chrome-extensions-samples are test

• [X] Hello World
• [X] Page Redder
• [X] Cookie Clearer
• [X] Omnibox - New Tab Search
• [X] Web Accessible Resources

Examples with Vue

• [X] Vue in Content Scripts
• [X] Vue in Full Options Page
• [X] Vue in Embedded Options Page

Examples with Svelte

• [X] Svelte

Feedback

If you have problems using this plugin, welcome to let us know.

Known problems

Change logs

see CHANGELOG.md