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 

Using Vite

npm create vite@latest chrome-extension-app -- --template react

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

Run the above commands to get your server started.

This is what your project folder should look like.

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

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: [],
};

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

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

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'"
}

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.

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

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://extensions/

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

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

Just like that you can see your first chrome extension.

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

How To Create A Google Chrome Extension With React | by Artem Diashkin | LITSLINK | Medium

Artem Diashkin ・ Jul 16, 2021 ・

Medium

Conclusion

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 ✨.