mubaidr / vite-chrome-extension

A simple vite based chrome extension starter

vite-chrome-extension

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

Features

• HMR for extension pages and content scripts
• Sample onInstall & onUpdate pages
• Tailwind css And daisyUI
• 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 for javascript, 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.

Pre-packed

Vite Plugins

• unplugin-auto-import
• unplugin-icons - icons as components
  • Material Design Icons - Material Design Icons

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.

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-chrome-extension my-webext
cd my-webext
pnpm i

Usage

Project Structure

• src - main source.
  • content-script - scripts and components to be injected as content_script
    • iframe content script iframe app which will be injected into page
  • background - scripts for background.
  • popup - popup application root
    • pages - popup pages
  • options - options application root
    • pages - options pages
  • setup - Page for Install and Update chrome extension events
    • pages - pages for install and update events
  • offscreen - Chrome extension offscreen pages, can be used for audio, screen recording
  • pages - application pages, common to all views (About, Contact, Authentication etc)
  • assets - assets
• dist - built files, also serve stub entry for Vite on development.

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, you can upload dist.crx or dist.xpi to appropriate extension store.

Contributors

Muhammad Ubaid Raza