Make A Chrome Extension with React

We can find an extension for almost anything, but how about writing our own? In this article, we will create our own chrome extension and deploy it locally.

While developing our chrome extension, we will use React and try to develop a simple to-do application.

First of all, we will start with our react application running in our local. I will show you how to add it as a chrome extension after making sure it works.

Making a To-Do App

I will proceed by using the codes of this example. You can use your own CSS or whatever you want. End of the day, the To-Do app look like this,

I tried to write our application as simple as possible, I only used 2 components. The first one of these is Form component with input in it. The second one is List component which includes a to-do list and a footer.
Instead of using more complex structures like Redux, I used Context.

Run this command to create a React application named todos :

npx create-react-app todos

After creating our application, I created two files named Form and List and added index.js files to them. My file directory structure is as in the picture.

It will be sufficient to keep the content and checked information in the todos variable.
I will keep todos values with Local Storage so users can access the information when chrome is reopened. The final version of the index.js was as follows :

In the Form component, I added Input values to an array and the storage.

I used the List component to show the todos array. I edited the CSS file to show completed and incompleted data differently from each other. I added a simple footer element.

In its final form, the application was as follows :

Making a Chrome Extension

Now that we are sure that our application is running locally, now it’s time to make this application a chrome extension.

Go to the public/manifest.json file and change it like following:

Open your index.css file and add width and height to the body section.

Run npm run build command. After the build is successful open Chrome and go to chrome://extensions. Toggle developer mode and click “Load unpacked”.

Select your build folder. Your extension will show up on your chrome://extensions page.

Let's try our own extension 🚀🚀

After changing the files, you don’t like or want to update, run the npm run build command again. Go to the chrome://extensions path and click reload, all your files will be updated.

Conclusion

We learned how to make a chrome extension of our own without pushing our React knowledge too much. You can do spicier and funnier extensions.

Thanks for reading 🤘