DEV Community

Cover image for How to Build a Chrome Extension using React and Tailwindcss
Ibukun Folay
Ibukun Folay

Posted on • Updated on

How to Build a Chrome Extension using React and Tailwindcss

Here we would discuss how to create a basic chrome extension using React, Vite (bundler) and TailwindCss.

Things to look out for in this process

  1. What are extensions?
  2. Create react app
  3. Setup tailwindcss for styling
  4. Manifest.json
  5. Building the extension

What are browser extensions?

According to wikipedia, a browser extension is a small software module for customizing a web browser. Browsers typically allow a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.

Create React App

We can use the conventional create react app to setup our project folder, However, we would be using Vite.js to setup our project files.

Vite is a build tool created by Evan You, the creator of Vue. It allows for faster development thanks to super fast Hot Module Reload (HMR), fast cold start times, and CSS + JSX + TypeScript support out of the box. Click here to read more

We can run either of the following commands to setup our project folder:

Using create-react-app

npx create-react-app my-app --template chrome-extension-app 
Enter fullscreen mode Exit fullscreen mode

Using Vite

npm create vite@latest chrome-extension-app -- --template react
Enter fullscreen mode Exit fullscreen mode

After running the create vite command successfully, you should see a few commands as shown below:

vite setup instructions

Run the above commands to get your server started.

This is what your project folder should look like.

Vite Project folder

Set up Tailwind Css

Run the following commands in the root of the project folder:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

To get tailwind working we need to update the tailwind.config.js file in the root of the project folder

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  plugins: [],
Enter fullscreen mode Exit fullscreen mode

Tailwind config

Finally, add the following at the top of src/index.css file

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

Enter fullscreen mode Exit fullscreen mode

The Manifest.json

For our extension to work,we must update the manifest.json file. Vite does not come with a manifest.json file in the template, so we can create one in the public folder.

After creating the file, add the following lines of code:

  "name": "First Extensions",
  "description": "Basic Chrome Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "My first extension"
  "icons": {
    "16": "react.png",
    "48": "react.png",
    "128": "react.png"
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
Enter fullscreen mode Exit fullscreen mode

Default_popup: is the target file we want to render when our extension is loaded

Default_title: is the tooltip display that tells the user what we will see when the extensions opened

By default, Create React App will embed the runtime script into index.html during the production build. This is done to limit the number of http requests.
We will turn off this embedding behavior by adding:

INLINE_RUNTIME_CHUNK= false before the build script in our package.json.

CSP build script

Or as in our use case adding the line below to the manifest.json:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Building the extension

After updating our manifest.json, we can now run the build script using:

npm run build
Enter fullscreen mode Exit fullscreen mode

Once the build is finished we notice a new folder called "build" or "dist" in the root of our project. This is the folder we’ll load onto chrome as our extension.

To load our extension on chrome, you can enter the url below in the address bar:


chrome extension url

Click the load unpacked button at the top left corner and select the build/dist folder in the root folder of our extension.

build/dist folder location

Once you’re done you can click update to update all extensions and c'est fini.

extension upload

Just like that you can see your first chrome extension.

Extension preview

You can now load your extension in-browser and test it out or better still tweak it to suit a specific purpose.

To better explore possibilities with creating extensions, you can check out Artem Diashkin's post below


At the end of this tutorial, you should be able to create a basic chrome extension with react and tailwindcss.

Click here to see the full source code.

Happy coding ✨.

Top comments (2)

Sloan, the sloth mascot
Comment deleted
ibukunfolay profile image
Ibukun Folay

Thank you @nickap