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

Create and Initialize a new React app

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

Install & Configure Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Generate Tailwind Config Files:

npx tailwindcss init -p

Update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
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;

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 { resolve } from 'path'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        popup: resolve(__dirname, 'index.html'),
        background: resolve(__dirname, 'src/background.ts'),
        content: resolve(__dirname, 'src/content.ts')
      },
      output: {
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
})

Create manifest.json

Create a manifest.json file in the root directory:

{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0.0",
"description": "A Chrome extension built with React, Vite, TypeScript, and Tailwind",
"action": {
  "default_popup": "index.html",
  "default_icon": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
},
"permissions": [],
"background": {
  "service_worker": "assets/background.js",
  "type": "module"
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["assets/content.js"]
  }
],
"icons": {
  "16": "icons/icon16.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}
}

Create a background.js file

Create a new file src/background.ts:

console.log('Background script running');

// Listen for messages from the popup or content scripts
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log('Received message:', message);
  sendResponse({ status: 'Message received' });
  return true;
});

Create a content.js file

Create a new file src/content.ts:

console.log('Content script loaded');

// Example: Send a message to the background script
chrome.runtime.sendMessage({ action: 'contentScriptLoaded' }, (response) => {
  console.log('Response:', response);
});

Create a new file src/Popup.tsx:

import React from 'react'

export default function Popup() {

  const sendMessageToBackground = () => {
    chrome.runtime.sendMessage({ action: 'popupAction', data: 'Hello from popup!' }, 
      (response) => {
        console.log('Response from background:', response);
      }
    );
  };

  return (
    <div className="p-4 bg-white shadow rounded-lg">
      <h1 className="text-xl font-bold">Hello, Chrome Extension!</h1>
      <button 
        className="mt-2 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600"
        onClick={sendMessageToBackground}
      >
        Send Message
      </button>
    </div>
  )
}

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'))

Use `chrome.storage`

Create a new file src/storage.ts:

export const Storage = {
  async set<T>(key: string, value: T): Promise<void> {
    const data = JSON.stringify(value);
    if (chrome.storage) {
      await chrome.storage.local.set({ [key]: data });
    } else {
      localStorage.setItem(key, data);
    }
  },

  async get<T>(key: string, defaultValue: T): Promise<T> {
    if (chrome.storage) {
      return new Promise<T>((resolve) => {
        chrome.storage.local.get([key], (result) => {
          resolve(result[key] ? JSON.parse(result[key]) : defaultValue);
        });
      });
    } else {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    }
  },

  async remove(key: string): Promise<void> {
    if (chrome.storage) {
      await chrome.storage.local.remove(key);
    } else {
      localStorage.removeItem(key);
    }
  },

  async clear(): Promise<void> {
    if (chrome.storage) {
      await chrome.storage.local.clear();
    } else {
      localStorage.clear();
    }
  },
};

Example of usage:

import { Storage } from './storage';

Storage.set('myKey', { name: 'John' });
const data = await Storage.get('myKey', { name: 'John' });

Install crx-js Vite Plugin (Optional)

CRX is a Vite plugin that allows you to build Chrome extensions. Install it using npm:

npm install --save-dev @crxjs/vite-plugin@beta

Build the Chrome Extension

Run the following command to build the Chrome Extension:

npm run build

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

Publish the Chrome Extension

Go to the Chrome Web Store Developer Dashboard
Click "Create new item" and select "Chrome extension"
Fill in the required information
Upload the extension files
Click "Publish"