Vite Web Extension

Overview

This product is a boilerplate template for creating Chrome extensions using React, Typescript, and Tailwind CSS. It is built for improved developer experience and rapid building, utilizing Vite and Nodemon. The template is designed for Chrome manifest version 3, as manifest v2 extensions are no longer accepted since Jan 2022. While Firefox and other browsers do not yet support manifest v3, cross-browser usage is not encouraged. The template also includes a Chrome local/sync storage hook for React.

Features

• React 18
• TypeScript
• Tailwind CSS
• ESLint
• Chrome Extension Manifest Version 3
• Github Action to build and zip the extension

Installation

To install the template, follow these steps:

1. Clone this repository.
2. Change the name and description in the manifest.json file.
3. Run yarn or npm i to install dependencies. Make sure your node version is >= 16.
4. Run yarn dev or npm run dev to start the development server.
5. Load the extension in Chrome by opening the Chrome browser, accessing chrome://extensions, enabling “Developer mode”, clicking “Load unpacked extension”, and selecting the dist folder in the project after running dev or build.
6. If you want to build in production, run yarn build or npm run build.

Summary

This product is a minimal boilerplate template for creating Chrome extensions using React, Typescript, and Tailwind CSS. It offers features such as React 18, TypeScript, Tailwind CSS, and Chrome Extension Manifest Version 3 support. The installation process involves cloning the repository, customizing the manifest.json file, installing dependencies, and loading the extension in Chrome. With its focus on simplicity and ease of use, this boilerplate aims to provide a quick start for developers looking to create Chrome extensions.