Chrome extension template with
Preact, Windi CSS, Vite and TypeScript

Table of Contents

• Intro
• Features
• Installation
  • Procedures
• Screenshots
  • NewTab
  • Popup
  • DevTools
• Recommendations

Intro

This template was made with a goal to reduce as much as possible the extension's bundle size, while also having a blazing fast build speed and overall great developer experience with Vite.

The chunk sizes when cloning and building the template:

Features

• Preact 10
• TypeScript
• Vite
• Windi CSS
• ESLint
• Prettier
• Jest
• Chrome Extension Manifest Version 3

Installation

Procedures

1. Run npx degit fell-lucas/chrome-ext-template-preact-windi-vite my-project or click Use this template on GitHub.
2. Change name and description in package.json => Auto synchronize with manifest
3. Run pnpm i, yarn or npm i (check your node version >= 16)
4. Run pnpm dev, yarn dev or npm run dev to watch files and rebuild with any changes
5. Load Extension on Chrome
   1. Open - Chrome browser
   2. Access - chrome://extensions
   3. Check - Developer mode
   4. Find - Load unpacked extension
   5. Select - dist folder in this project (after dev or build)
6. If you want to build without watching, run pnpm build, yarn build or npm run build.

Screenshots

New Tab

Popup

Dev Tools

Recommendations

VSCode Extensions

• vscode-eslint
• prettier-vscode
• windicss-intellisense
• vscode-coverage-gutters
• vscode-jest
• vscode-jest-runner

Inspired by

Jonghakseo @ Repo
and Vitesse Webext

License

Distributed under the MIT License.