Inject Vue App into the Content Script
<script setup>syntax and more!
webext-bridgeand VueUse storage
manifest.jsonwith full type support
webextension-polyfill- WebExtension browser API Polyfill with types
webext-bridge- effortlessly communication between contexts
unplugin-auto-import- Directly use
browserand Vue Composition API without importing
unplugin-vue-components- components auto import
unplugin-icons- icons as components
vite-plugin-windicss- WindiCSS support
<script setup>SFC syntax
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 antfu/vitesse-webext my-webext cd my-webext pnpm i
src- main source.
contentScript- scripts and components to be injected as
background- scripts for background.
components- auto-imported Vue components that are shared in popup and options page.
styles- styles shared in popup and options page
assets- assets used in Vue components
manifest.ts- manifest for the extension.
extension- extension package root.
assets- static assets (mainly for
dist- built files, also serve stub entry for Vite on development.
scripts- development and bundling helper scripts.
Then load extension in browser with the
For Firefox developers, you can run the following command instead:
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
And then pack files under
extension, you can upload
extension.xpi to appropriate extension store.
This template is originally made for the volta.net browser extension.