Skip to content

fell-lucas/chrome-extension-template-preact-vite

Repository files navigation

logo

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

GitHub action badge hits GitHub

Table of Contents

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: image

Features

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

Installation

Procedures

  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

New Tab

Popup

Dev Tools

Recommendations

VSCode Extensions

Inspired by

Jonghakseo @ Repo
and Vitesse Webext

License

Distributed under the MIT License.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published