Modernized Chrome Extension Vite Starter

A Vite Powered Modernized Chrome Extension Manifest V3 (Chrome) Starter Template.

Page Type	Light Mode	Dark Mode
Popup Page
Options Page

Features

⚡️ Instant HMR - use Vite on dev (no more refresh!)
🥝 Vue 3 - Composition API, <script setup> syntax and more!
💬 Effortless communications - powered by webext-bridge and VueUse storage
🍃 Windi CSS - on-demand CSS utilities
🦾 TypeScript - type safe
📦 Components auto importing
🌟 Icons - Access to icons from any iconset directly
🌍 I18N ready
🌛 Dark Mode - support toggle dark mode
📃 Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

webextension-polyfill-ts - WebExtension browser API Polyfill with types
webext-bridge - effortlessly communication between contexts

Vite Plugins

vite-plugin-components - components auto import
vite-plugin-windicss - WindiCSS support
@intlify/vite-plugin-vue-i18n - i18n support

Vue Plugins

vue-global-api - use Vue Composition API globally
VueUse - collection of useful composition APIs

UI Frameworks

Windi CSS - next generation utility-first CSS framework

Icons

Iconify - use icons from any icon sets 🔍Icônes
vite-plugin-icons - icons as Vue components

Coding Style

Use Composition API with <script setup> SFC syntax
ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

TypeScript
pnpm - fast, disk space efficient package manager
tsup - Zero config TypeScript bundler powered by esbuild
esno - TypeScript / ESNext node runtime powered by esbuild
npm-run-all - Run multiple npm-scripts in parallel or sequential

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

npx degit xiaoluoboding/chrome-ext-mv3-starter my-extension
cd my-extension
pnpm i

Usage

Folders

src - background scripts and content scripts & frontend for the extension (popup and options).
- manifest.ts - manifest for the extension.
extension - extension package root, also holds assets.
scripts - development helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder,

Build

To build the extension, run

pnpm build

And then pack files under extension.

Credits

This is a template derive from antfu/vitesse-webext

Who is using this template?

chrome-web-bookmark - A Chrome extension can turn a link as a visual bookmark.

License

MIT - @xiaoluoboding

chounvwudi/chrome-ext-mv3-starter