Goyslop/web-extension-starter

Template

Fork 0

mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2026-01-30 09:48:12 +01:00

Abhijith Vijayan [FLUXON] 85de99675f docs: update readme

2026-01-03 21:11:44 +05:30

7.7 KiB

Raw Blame History

🚀 web-extension-starter

Web Extension starter to build "Write Once Run on Any Browser" extension

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

Like it? Star it on GitHub or Tweet about it.

Features

Cross Browser Support (Web-Extensions API)
Browser Tailored Manifest generation
Vite for fast builds and HMR
Automatic build on code changes
Auto packs browser specific build files
SASS/SCSS styling with CSS Modules
TypeScript by default
ES6 modules support
React 19 with automatic JSX runtime
ESLint 9 flat config with Prettier

Tech Stack

Bundler: Vite 7
UI: React 19
Language: TypeScript 5.9
Styling: SCSS with CSS Modules
Linting: ESLint 9 (flat config) + Prettier
Manifest: vite-plugin-wext-manifest

Browser Support


88 & later	109 & later	36 & later	88 & later	Latest

Quick Start

Ensure you have Node.js 20 or later installed.

# Clone the repository
git clone https://github.com/abhijithvijayan/web-extension-starter.git
cd web-extension-starter

# Install dependencies
npm install

# Start development server
npm run dev:chrome    # For Chrome
npm run dev:firefox   # For Firefox

# Build for production
npm run build:chrome  # Build Chrome extension
npm run build:firefox # Build Firefox addon
npm run build         # Build for all browsers

Project Structure

source/
├── Background/        # Service worker (Chrome MV3) / Background script (Firefox)
├── ContentScript/     # Content scripts (injected into web pages)
├── Popup/             # Extension popup UI
├── Options/           # Options page UI
├── components/        # Shared React components
├── styles/            # Global styles and variables
├── types/             # TypeScript type definitions
├── utils/             # Utility functions
├── public/            # Static assets (icons, etc.)
└── manifest.json      # Extension manifest template

Development

Loading the Extension

Chrome

Navigate to chrome://extensions
Enable "Developer mode"
Click "Load unpacked"
Select extension/chrome directory

Firefox

Navigate to about:debugging
Click "This Firefox"
Click "Load Temporary Add-on"
Select extension/firefox/manifest.json

Content Scripts

Content scripts are automatically bundled as IIFE (Immediately Invoked Function Expression) to ensure compatibility with the browser's content script execution environment, which doesn't support ES modules.

Browser-Specific Manifest

The manifest uses vendor prefixes to generate browser-specific configurations:

{
  "__chrome__name": "My Chrome Extension",
  "__firefox__name": "My Firefox Addon",
  "__chrome|firefox__description": "Works on both!"
}

See vite-plugin-wext-manifest for more details.

Scripts

Script	Description
`npm run dev:chrome`	Start dev server for Chrome
`npm run dev:firefox`	Start dev server for Firefox
`npm run build:chrome`	Build production Chrome extension
`npm run build:firefox`	Build production Firefox addon
`npm run build`	Build for all browsers
`npm run lint`	Run ESLint
`npm run lint:fix`	Run ESLint with auto-fix

Linting & TypeScript Config

Shared ESLint & Prettier Configuration - @abhijithvijayan/eslint-config
Shared TypeScript Configuration - @abhijithvijayan/tsconfig

Used in Production

Extensions built with this starter that have 100,000+ users:

Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

7.7 KiB Raw Blame History