A Vite powered WebExtension (Chrome, FireFox, etc.) starter template based on manifest 3
, Tailwind
, daisyUI
.
Please check: vite-vue3-chrome-extension-v3 for a more advance template based on Vuejs
Looking for more simple solution? Look no further simple-vite-chrome-extension
- HMR for extension pages and content scripts
- Sample
onInstall
&onUpdate
pages Tailwind
css AnddaisyUI
- Tailwindcss plugins for Typography, forms, prettier and daisy ui
- vscode recommended settings and extensions for chrome plugin development
- Icons - Access to icons from any iconset directly
- By default Material Design Icons set is enabled
- TypeScript - type safe
Eslint
&Prettier
configured forjavascript
,TypeScript
- CRXJS Vite Plugin Build a Chrome Extension with Vite
- Github build and release actions
Please create an issue if you feel some feature is missing or could be improved.
unplugin-auto-import
unplugin-icons
- icons as components- Material Design Icons - Material Design Icons
- 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.
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-chrome-extension my-webext
cd my-webext
pnpm i
src
- main source.content-script
- scripts and components to be injected ascontent_script
iframe
content script iframe app which will be injected into page
background
- scripts for background.popup
- popup application rootpages
- popup pages
options
- options application rootpages
- options pages
setup
- Page for Install and Update chrome extension eventspages
- pages for install and update events
offscreen
- Chrome extension offscreen pages, can be used for audio, screen recordingpages
- application pages, common to all views (About, Contact, Authentication etc)assets
- assets
dist
- built files, also serve stub entry for Vite on development.
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
, you can upload dist.crx
or dist.xpi
to appropriate extension store.
Muhammad Ubaid Raza |