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

• Background

Examples from chrome-extensions-samples are test

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

Examples with Vue

• Vue in Content Scripts
• Vue in Full Options Page
• Vue in Embedded Options Page

Examples with Svelte

• Svelte

Feedback

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

Known problems

Change logs

see CHANGELOG.md