Awesome
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.
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! 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.
vite-vue3-browser-extension-v3
A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3
, vue3
and vite
.
Features
- 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.
Pre-packed
Vite Plugins
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
Vue Plugins
- Pinia - Intuitive, type safe, light and flexible Store for Vue
- VueUse - collection of useful composition APIs
Plugins
- Marked - A markdown parser and compiler. Used for CHANGELOG.md to show in Update page
UI Frameworks
- 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.
WebExtension Libraries
webext-bridge
- effortlessly communication between contexts
Coding Style
- Use Composition API with
<script setup>
SFC syntax - Use Composition API with
setup
SFC syntax in Pinia stores
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
pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm i
Usage
Project Structure
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
Browser Related Configurations
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
Scripts
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
Extra info
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.
Development
pnpm dev
Then load extension in browser with the dist/
folder.
Build
To build the extension, run
pnpm build
And then pack files under dist/chrome
or dist/firefox
, you can upload to appropriate extension store.