Tutorial: Chrome Extension Starter Template With React

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

Omri BarmatsOmri Barmats
 | 1 year ago

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 [object Object] , [object Object] , [object Object] , and [object Object] .

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.