How to Build a Chrome Extension using React and Tailwindcss
Tags: react, javascript, tailwindcss, webdev
Published: 2023-04-11 15:37:06

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](https://g.co/kgs/fVnDVU), 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 ](https://vitejs.dev/)is a build tool created by Evan You, the creator of Vue. It allows for faster development thanks to super fast [Hot Module Reload](https://webpack.js.org/concepts/hot-module-replacement/) (HMR), fast cold start times, and CSS + JSX + TypeScript support out of the box. [Click here to read more](https://www.gpmd.co.uk/blog/what-is-vite-and-why-do-you-need-it)

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: 


![vite setup instructions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaauqp9u2a8qus2apf10.jpg)

Run the above commands to get your server started.

This is what your project folder should look like.

![Vite Project folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt9znx3zer5icsug437r.jpg)

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


![Tailwind config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdritvnr0g1qwo3miyoi.jpg)
 
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. 


![CSP build script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yu7vttt9qt63cal1209.jpg)

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/`


![chrome extension url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuf1ush0nhsrh5lbasz2.jpg)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg7e2r8ew3lg2tobifqe.jpg)

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



![extension upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4bg6x1jwe0mi7tu7q0u.jpg)

Just like that you can see your first chrome extension.


![Extension preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uyqq3q3jtl17pjfgi4o.jpg)
 
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](https://medium.com/@artem-diashkin) post below

{% embed https://medium.com/litslink/how-to-create-google-chrome-extension-using-react-js-5c9e343323ff %}

**Conclusion**

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

[Click here](https://github.com/ibukunfolay/chrome-extension-app) to see the full source code.

Happy coding ✨.