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

• <input checked="" disabled="" type="checkbox"> Background

Examples from chrome-extensions-samples are test

• <input checked="" disabled="" type="checkbox"> Hello World
• <input checked="" disabled="" type="checkbox"> Page Redder
• <input checked="" disabled="" type="checkbox"> Cookie Clearer
• <input checked="" disabled="" type="checkbox"> Omnibox - New Tab Search
• <input checked="" disabled="" type="checkbox"> Web Accessible Resources

Examples with Vue

• <input checked="" disabled="" type="checkbox"> Vue in Content Scripts
• <input checked="" disabled="" type="checkbox"> Vue in Full Options Page
• <input checked="" disabled="" type="checkbox"> Vue in Embedded Options Page

Examples with Svelte

• <input checked="" disabled="" type="checkbox"> Svelte

Feedback

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

Known problems

Change logs

see CHANGELOG.md

CHANGELOGS

0.0.7

• fix: process scripts dynamically imported by chrome.scripting.executeScript;
• fix: process styles dynamically imported by chrome.scripting.insertCSS;

0.0.6

• fix: tracking assets in css (such as font files, images)
• feat: add svelte example: Svelte

0.0.5

• fix: fix error script paths in options html files
• feat: add vue examples: Vue in Full Options Page and Vue in Embedded Options Page

0.0.4

• feat: upgrade bundle architecture to solve es6 import problem
• feat: add a vue example: Vue in Content Scripts

0.0.3

• feat: add examples from chrome-extensions-samples
• fix: fix some bugs to make examples work

0.0.2

• feat: initial release

0.0.1

• chore: create project