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": []
}
7. Create a Popup Component
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 thedist
folder in your project directory