Tutorial: Chrome Extension Starter Template | Vite, React, TS, Tailwind

In this blog post, I'm going to show you how I install and use the Chrome Extension Starter Template that I recently created. This template is designed to simplify building modern Chrome extensions using Vite, React, TypeScript, and Tailwind CSS.

What’s included in the template?

• Hot-reload: Local host view of popup and options page
• Dist: Easily upload to web store
• Vite: For fast bundling and development
• React: For building interactive UI components
• TypeScript: For type-safe JavaScript development
• Tailwind CSS: For easy and responsive styling
• chrome-types: Chrome’s API TypeScript files for smooth auto-completion

In this guide, I’ll walk you through how to:

1. Install the template locally
2. Upload the extension to Chrome
3. Make changes and develop your extension

Let’s get started!

1. Installing the Template

To get started, follow these steps:

• Clone the Repository
  First, navigate to the folder where you want to install the project, then run:

git clone https://github.com/omribarmats/chrome-extension-starter.git new-project

Be sure to replace new-project with your desired project name. For this example, I’ll name mine extension-one.

• Navigate to the Project Folder
  Once cloned, move into the project directory:

cd extension-one

Again, Be sure to replace new-project with your project name.

• Install Dependencies
  Next, install the necessary dependencies by running:
  

npm install

• Start the Development Server
  Now, to view your extension locally with hot-reload functionality, run:

npm run dev

At this point, you can preview both the popup and options page of your extension.