https://github.com/fell-lucas/chrome-extension-template-preact-vite

https://github.com/fell-lucas/chrome-extension-template-preact-vite

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/fell-lucas/chrome-extension-template-preact-vite
• Owner: fell-lucas
• License: mit
• Created: 2022-04-15T01:00:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-31T19:20:15.000Z (3 months ago)
• Last Synced: 2024-08-04T12:01:17.015Z (3 months ago)
• Language: TypeScript
• Size: 393 KB
• Stars: 77
• Watchers: 3
• Forks: 6
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

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

  

![](https://badges.aleen42.com/src/chrome_extensions.svg)


![](https://badges.aleen42.com/src/preact.svg)

![](https://badges.aleen42.com/src/tailwindcss.svg)

![](https://badges.aleen42.com/src/jest_1.svg)

![](https://badges.aleen42.com/src/vitejs.svg)

![](https://badges.aleen42.com/src/typescript.svg)

![](https://badges.aleen42.com/src/eslint.svg)

![GitHub action badge](https://github.com/fell-lucas/chrome-ext-template-preact-windi-vite/actions/workflows/build.yml/badge.svg)

[![hits](https://hits.deltapapa.io/github/fell-lucas/chrome-ext-template-preact-windi-vite.svg)](https://hits.deltapapa.io)

![GitHub](https://img.shields.io/github/license/fell-lucas/chrome-ext-template-preact-windi-vite)



## Table of Contents

- [Intro](#intro)

- [Features](#features)

- [Installation](#installation)

  - [Procedures](#procedures)

- [Screenshots](#screenshots)

  - [NewTab](#newtab)

  - [Popup](#popup)

  - [DevTools](#devtools)

- [Recommendations](#recommends)

## 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](https://user-images.githubusercontent.com/47724710/163683695-693f233c-8730-4830-b26d-782a293a0835.png)

## Features 

- [Preact](https://preactjs.com/)

- [TypeScript](https://www.typescriptlang.org/)

- [Vite](https://vitejs.dev/)

- [Tailwind CSS](https://tailwindcss.com/)

- [ESLint](https://eslint.org/)

- [Prettier](https://prettier.io/)

- [Jest](https://jestjs.io/)

- [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)

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

- [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

- [prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

- [vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

- [vscode-coverage-gutters](https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters)

- [vscode-jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)

- [vscode-jest-runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)

## Inspired by 


[Jonghakseo](https://nookpi.tistory.com/) @ [Repo](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite) 


and [Vitesse Webext](https://github.com/antfu/vitesse-webext)

## License

Distributed under the [MIT License](https://github.com/fell-lucas/chrome-extension-template-preact-vite/blob/main/LICENSE).