Home

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

build release

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3, vue3 and vite.

Features

Please create an issue if you feel some feature is missing or could be improved.

Pre-packed

Vite Plugins

Vue Plugins

Plugins

UI Frameworks

Tailwind css forms and typography plugins are enabled for default styling of form controls.

WebExtension Libraries

Coding Style

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

Browser Related Configurations

Scripts

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.

Contributors

<!-- readme: collaborators,contributors -start --> <table> <tbody> <tr> <td align="center"> <a href="https://github.com/mubaidr"> <img src="https://avatars.githubusercontent.com/u/2222702?v=4" width="100;" alt="mubaidr"/> <br /> <sub><b>Muhammad Ubaid Raza</b></sub> </a> </td> <td align="center"> <a href="https://github.com/ultimateshadsform"> <img src="https://avatars.githubusercontent.com/u/151234273?v=4" width="100;" alt="ultimateshadsform"/> <br /> <sub><b>Alexander</b></sub> </a> </td> <td align="center"> <a href="https://github.com/baramofme"> <img src="https://avatars.githubusercontent.com/u/44565599?v=4" width="100;" alt="baramofme"/> <br /> <sub><b>Jihoon Yi</b></sub> </a> </td> <td align="center"> <a href="https://github.com/poncianodiego"> <img src="https://avatars.githubusercontent.com/u/20716004?v=4" width="100;" alt="poncianodiego"/> <br /> <sub><b>Diego Ponciano</b></sub> </a> </td> <td align="center"> <a href="https://github.com/IgorFZ"> <img src="https://avatars.githubusercontent.com/u/85708187?v=4" width="100;" alt="IgorFZ"/> <br /> <sub><b>igorfz</b></sub> </a> </td> <td align="center"> <a href="https://github.com/hi2code"> <img src="https://avatars.githubusercontent.com/u/51270649?v=4" width="100;" alt="hi2code"/> <br /> <sub><b>hi2code</b></sub> </a> </td> </tr> <tr> <td align="center"> <a href="https://github.com/justorez"> <img src="https://avatars.githubusercontent.com/u/17308328?v=4" width="100;" alt="justorez"/> <br /> <sub><b>Null</b></sub> </a> </td> </tr> <tbody> </table> <!-- readme: collaborators,contributors -end -->