• 💬 Effortless communications - powered by webext-bridge and VueUse storage
• 📦 Components auto importing
• 🌟 Icons - Access to icons from any iconset directly
• 🖥 Content Script - Use Vue even in content script
• 📃 Dynamic manifest.json with full type support

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

• unplugin-auto-import - Directly use browser and Vue Composition API without importing
• unplugin-vue-components - components auto import
• unplugin-icons - icons as components
  • Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-windicss - WindiCSS support

• VueUse - collection of useful composition APIs

• Windi CSS - next generation utility-first CSS framework

• pnpm - fast, disk space efficient package manager
• esno - TypeScript / ESNext node runtime powered by esbuild
• npm-run-all - Run multiple npm-scripts in parallel or sequential
• web-ext - Streamlined experience for developing web extensions

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - auto-imported Vue components that shared in popup and options page.
  • manifest.ts - manifest for the extension.
  • ui - Scripts for ui
    • popup popup view
    • options options view
    • styles - styles shared in popup and options page
• extension - extension package root.
  • assets - static assets.
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommanded for cleaner hard reloading.

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.