Chrome extension template with
Preact, Tailwind CSS, Jest, Vite and TypeScript

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

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:

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

All dependencies are constantly reviewed and updated to ensure the template is always using the latest and greatest features!

1. Run npx degit fell-lucas/chrome-extension-template-preact-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.

VSCode Extensions

• vscode-eslint
• prettier-vscode
• vscode-tailwindcss
• vscode-coverage-gutters
• vscode-jest
• vscode-jest-runner

Jonghakseo @ Repo
and Vitesse Webext

Distributed under the MIT License.