A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.
- Vue 3 - Composition API,
Script setup
and more! - Vue 3 app in Content Script too (template added)
- HMR for extension pages and content scripts
- Tailwind css for UI
- Vue Router setup incuding
vite-plugin-pages
for automatic route registration - Effortless communications - powered by
webext-bridge
and VueUse storage - Components auto importing
- Icons - Access to icons from any iconset directly
- By default Material Design Icons set is enabled
- TypeScript - type safe
Eslint
&Prettier
configured forvue
,javascript
,typescript
- CRXJS Vite Plugin Build a Chrome Extension with Vite
Please create an issue if you feel some feature is missing or could be improved.
webext-bridge
- effortlessly communication between contexts
vite-plugin-pages
- File system based route generator for Viteunplugin-auto-import
- Directly usebrowser
and Vue Composition API without importingunplugin-vue-components
- components auto importunplugin-icons
- icons as components- Material Design Icons - Material Design Icons
- VueUse - collection of useful composition APIs
- tailwindcss - A utility-first CSS framework
- Use Composition API with
<script setup>
SFC syntax
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
If you don't have pnpm installed, run: npm install -g pnpm
pnpx degit mubaidr/vite-vue3-chrome-extension-v3 my-webext
cd my-webext
pnpm i
src
- main source.content-script
- scripts and components to be injected ascontent_script
iframe
content script iframe vue3 app which will be injected into page
background
- scripts for background.popup
- popup vuejs application rootpages
- popup pages
options
- options vuejs application rootpages
- options pages
pages
- application pages, common to all views (About, Contact, Authentication etc)components
- auto-imported Vue components that are shared in popup and options page.assets
- assets used in Vue components
dist
- built files, also serve stub entry for Vite on development.
pnpm dev
Then load extension in browser with the dist/
folder.
To build the extension, run
pnpm build
And then pack files under dist
, you can upload dist.crx
or dist.xpi
to appropriate extension store.
This template is heavenly inspired by: https://github.com/antfu/vitesse-webext