A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3
, vue3
and vite
.
We're developing a new and improved browser extension template with exciting features like authentication, payment processing, and more. Your feedback is crucial to us!
Please take a moment to fill out our 3 question feedback form and let us know if you would be interested in purchasing template, along with any features you would like to see.
Thank you for your time and support!
Note: Your responses will help shape the future of this project and ensure we meet your needs better.
- Vue 3 - Composition API,
Script setup
and more! - Vue 3 app in Content Script too (template added)
- Vue devtools support
- HMR for extension pages and content scripts, with Firefox support
- Sample
onInstall
&onUpdate
pages Tailwind
css AnddaisyUI
- Tailwindcss plugins for Typography, forms, prettier and daisy ui
- Vue Router setup incuding
unplugin-vue-router
for automatic route registration - vscode recommended settings and extensions for extension/ plugin development
- Effortless communications - powered by
webext-bridge
- 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 Chrome, Firefox and Other Extensions with Vite
- Github build and release actions
Please create an issue if you feel some feature is missing or could be improved.
unplugin-vue-router
- 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
- Pinia - Intuitive, type safe, light and flexible Store for Vue
- VueUse - collection of useful composition APIs
- Marked - A markdown parser and compiler. Used for CHANGELOG.md to show in Update page
- tailwindcss - A utility-first CSS framework
- daisyUI - The most popular component library for Tailwind CSS
Tailwind css forms
and typography
plugins are enabled for default styling of form controls.
webext-bridge
- effortlessly communication between contexts
- Use Composition API with
<script setup>
SFC syntax - Use Composition API with
setup
SFC syntax in Pinia stores
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-browser-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
setup
- Page for Install and Update extension eventspages
- pages for install and update events
offscreen
- extension offscreen pages, can be used for audio, screen recording etcpages
- 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 fileschrome
- Chrome extension, can be publishd to Opera, Edge and toher chromium based browsers store etcfirefox
- Firefox extension
manifest.config.ts
- Base extension manifest with common configurationmanifest.chrome.config.ts
- Chrome/ chromium based browsers specific manifestmanifest.firefox.config.ts
- Firefox spefic manifestvite.config.ts
- Base vite configurationvite.chrome.config.ts
- Chrome/ chromium based browsers specific vite configurationvite.firefox.config.ts
- Firefox specific vite configuration
pnpm dev
- Start development serverpnpm build
- Build extensionpnpm lint
- Lint files
You can also use pnpm dev:chrome, pnpm dev:firefox, pnpm build:chrome, pnpm build:firefox, pnpm lint:fix
In src/background/index.ts you can find an example of chrome.runtime.onInstalled.addListener.
We add ?type
to the url to tell if it's update or install event. Then in src/setup/pages/index.ts we check for the type
and show the appropriate page.
pnpm dev
Then load extension in browser with the dist/
folder.
To build the extension, run
pnpm build
And then pack files under dist/chrome
or dist/firefox
, you can upload to appropriate extension store.
Muhammad Ubaid Raza |
Alexander |
Jihoon Yi |
Diego Ponciano |
Null |
This template is heavenly inspired by: https://github.com/antfu/vitesse-webext