Chrome Extension “New Tab” React Application In 3 Easy Steps

Hello World! Recently, I started to work on a chrome extension project that runs a web application when openning a new tab and I want to share the steps I got through to make it work!

Step 1

Creating a React application using create-react-app.

$ npx create-react-app my-app
$ cd my-app
$ npm start

You should be able to see the default create-react-app launching page at http://localhost:3000.

Launching page of create-react-app

Step 2

Changing the public/manifest.json config file, to make the application ready to be used as a chrome extension.

manifest.json config file

The icons you want to use can be placed in the public folder and the respective names must match what is used in the file icons property.

More information about the manifest.json file format can be found here.

Step 3

Testing the extension application in Chrome.

$ npm run build

After building the application, all you need to do is loading it from chrome://extensions.

And that’s it!

Following these steps, when openning a new tab, you should be able to see the default create-react-app application running.

React application running when openning a new chrome tab

The next steps within the react application, are up to you!
In case of any doubt feel free to get in touch with me!

Thank you for your reading time.