vitesse-webext

⚡️ WebExtension Vite Starter Template

2,843

218

2,843

View on GitHub

Top Related Projects

chrome-extension-boilerplate-react-vite

2,166

Chrome Extension Boilerplate with React + Vite + Typescript

Quick Overview

Vitesse-webext is a template for quickly bootstrapping browser extension projects using Vue 3, Vite, and TypeScript. It provides a modern development setup with hot module replacement (HMR) and a streamlined build process, making it easier to create and maintain browser extensions.

Pros

Fast development experience with Vite and HMR support
TypeScript integration for improved type safety and developer experience
Pre-configured with popular tools like Vue 3, Pinia for state management, and Vue Router
Cross-browser compatibility with support for Chrome, Firefox, and Safari

Cons

Steeper learning curve for developers not familiar with Vue 3 or TypeScript
May be overkill for simple extensions that don't require a full-fledged framework
Limited documentation and examples compared to more established extension boilerplates

Code Examples

Defining a Vue component for the popup:

<script setup lang="ts">
import { useStorage } from '@vueuse/core'

const count = useStorage('counter', 0)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

Using Pinia for state management:

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isLoggedIn: false,
  }),
  actions: {
    login(username: string) {
      this.name = username
      this.isLoggedIn = true
    },
    logout() {
      this.name = ''
      this.isLoggedIn = false
    },
  },
})

Sending a message from content script to background script:

// In content script
chrome.runtime.sendMessage({ action: 'getData' }, (response) => {
  console.log('Received data:', response)
})

// In background script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'getData') {
    sendResponse({ data: 'Some data from background' })
  }
})

Getting Started

Clone the repository:

npx degit antfu/vitesse-webext my-webext
cd my-webext
npm i

Develop the extension:
```
npm run dev
```
Build for production:
```
npm run build
```
Load the extension folder in your browser's extension page to test the extension.

Competitor Comparisons

chrome-extension-boilerplate-react-vite

2,166

Chrome Extension Boilerplate with React + Vite + Typescript

Pros of chrome-extension-boilerplate-react-vite

Uses React, a widely adopted and well-documented library for building user interfaces
Includes HMR (Hot Module Replacement) for faster development
Provides a more comprehensive set of features out-of-the-box, including content scripts and background workers

Cons of chrome-extension-boilerplate-react-vite

Larger bundle size due to React dependencies
Less focus on performance optimization compared to vitesse-webext
May have a steeper learning curve for developers not familiar with React

Code Comparison

vitesse-webext:

// Popup.vue
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
const count = useStorage('counter', 0)
</script>

chrome-extension-boilerplate-react-vite:

// Popup.tsx
import React, { useState, useEffect } from 'react'
import { Storage } from '@plasmohq/storage'

const storage = new Storage()
const [count, setCount] = useState(0)

useEffect(() => {
  storage.get('counter').then(setCount)
}, [])

Both examples demonstrate state management, but vitesse-webext uses Vue's Composition API with vueuse, while chrome-extension-boilerplate-react-vite uses React hooks and a custom storage solution.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

WebExtension Vite Starter

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

_Popup

_{Options Page}

_{Inject Vue App into the Content Script}

Features

â¡ï¸ Instant HMR - use Vite on dev (no more refresh!)
ð¥ Vue 3 - Composition API, <script setup> syntax and more!
ð¬ Effortless communications - powered by webext-bridge and VueUse storage
ð UnoCSS - The instant on-demand Atomic CSS engine.
ð¦¾ TypeScript - type safe
ð¦ Components auto importing
ð Icons - Access to icons from any iconset directly
ð¥ Content Script - Use Vue even in content script
ð WebExtension - isomorphic extension for Chrome, Firefox, and others
ð Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

webextension-polyfill - WebExtension browser API Polyfill with types
webext-bridge - effortlessly communication between contexts

Vite Plugins

unplugin-auto-import - Directly use browser and Vue Composition API without importing
unplugin-vue-components - components auto import
unplugin-icons - icons as components
- Iconify - use icons from any icon sets ðIcÃ´nes

Vue Plugins

VueUse - collection of useful composition APIs

UI Frameworks

UnoCSS - the instant on-demand Atomic CSS engine

Coding Style

Use Composition API with <script setup> SFC syntax
ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

TypeScript
pnpm - fast, disk space efficient package manager
esno - TypeScript / ESNext node runtime powered by esbuild
npm-run-all - Run multiple npm-scripts in parallel or sequential
web-ext - Streamlined experience for developing web extensions

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

npx degit antfu/vitesse-webext my-webext
cd my-webext
pnpm i

Usage

Folders

src - main source.
- contentScript - scripts and components to be injected as content_script
- background - scripts for background.
- components - auto-imported Vue components that are shared in popup and options page.
- styles - styles shared in popup and options page
- assets - assets used in Vue components
- manifest.ts - manifest for the extension.
extension - extension package root.
- assets - static assets (mainly for manifest.json).
- dist - built files, also serve stub entry for Vite on development.
scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

For Firefox developers, you can run the following command instead:

pnpm start:firefox

web-ext auto reload the extension when extension/ files changed.

While Vite handles HMR automatically in the most of the case, Extensions Reloader is still recommended for cleaner hard reloading.

Using Gitpod

If you have a web browser, you can get a fully pre-configured development environment with one click:

Build

To build the extension, run

pnpm build

And then pack files under extension, you can upload extension.crx or extension.xpi to appropriate extension store.

Credits

This template is originally made for the volta.net browser extension.

Variations

This is a variant of Vitesse, check out the full variations list.

Top Related Projects

chrome-extension-boilerplate-react-vite

2,166

Chrome Extension Boilerplate with React + Vite + Typescript

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot