Awesome

Table of Contents

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

Intro <a name="intro"></a>

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 <a name="features"></a>

• 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!

Installation <a name="installation"></a>

Procedures <a name="procedures"></a>

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.

Screenshots <a name="screenshots"></a>

New Tab <a name="newtab"></a>

Popup <a name="popup"></a>

Dev Tools <a name="devtools"></a>

Recommendations <a name="recommends"></a>

VSCode Extensions

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

Inspired by <br>

Jonghakseo @ Repo <br> and Vitesse Webext

License

Distributed under the MIT License.