How to build a Chrome Extension using React, Tailwind and Vite

In this article, we will learn how to build a Chrome Extension using React, Tailwind CSS and Vite.

Prerequisites

Before we start building the Chrome Extension, make sure you have the following tools installed on your machine:

Node.js
npm or yarn

1. Create a new React app

npm create vite@latest my-chrome-extension -- --template react-ts
cd my-chrome-extension

2. Install Dependencies

npm install
npm install -D tailwindcss postcss autoprefixer
npm install @crxjs/vite-plugin

4. Configure Tailwind CSS

npx tailwindcss init -p

Update tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Configure Vite for Chrome extension

Create a vite.config.ts file in the root directory:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default defineConfig({
  plugins: [react(), crx({ manifest })],
})

6. Create manifest.json

Create a manifest.json file in the root directory:

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": []
}

Create a new file src/Popup.tsx:

import React from 'react'

export default function Popup() {
  return (
    <div className="p-4 bg-white shadow rounded-lg">
      <h1 className="text-xl font-bold">Hello, Chrome Extension!</h1>
    </div>
  )
}

8. Update index.tsx

Update src/index.tsx to render the Popup component:


import React from 'react'
import ReactDOM from 'react-dom'
import Popup from './Popup'

ReactDOM.render(<Popup />, document.getElementById('root'))

9. Build the Chrome Extension

Run the following command to build the Chrome Extension:

npm run build

10. Load the Chrome Extension

Load the extension in Chrome:

Open Chrome and go to chrome://extensions/
Enable "Developer mode"
Click "Load unpacked" and select the dist folder in your project directory