Build and use your own Reactjs extension in Chrome.

Overview

Chrome extensions are sort of "browser boosters" which are still underrated by many people. As a developer, you can easily create your own booster and it's much simpler than you might think! In this tutorial, I will show you how I built my custom extension which opens on every "new tab" in Chrome. 

Here you can see the final result of my extension which has the following features: 

  • Personalized greeting based on time of the day
  • The latest news from Kazakhstan
  • A featured picture from Unsplash with #kazakhstan
  • An inspirational quote from Abay K. (famous Kazakh writer)
  • Exchange rates to EUR and USD
  • Current time/weather in my hometown
  • Google search bar


Let's get started

1. Create your application as a regular React App with all the features you need and your desired UI. The front-end will be deployed to google chrome so if your app has a backend, make sure to deploy it. I used Heroku in order to deploy my NodeJS server. 

2. Create manifest.json. We use this file to tell Chrome what exactly our extension is.  Sort of a config file to our app. React already comes with an existing manifest.json file in the public folder so we just need to tweak it for our needs. Depending on your app you might have more fields than this example, for the full list refer to dev docs available here.

Example of manifest.json

{
  "manifest_version": 2,
  "name": "Kazakhstan right now",
  "author": "Ildana Ruzybayeva",
  "version": "1.0.1",
  "description": "Replace new tab with latest updates from Kazakhstan",
  "icons": {
    "16": "16.png",
    "32": "32.png",
    "64": "64.png"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "permissions": [
    "storage"
  ]
}

3. Add three sizes of your icon in the public folder. In my case, I had 16x16 , 32x32 and 64x64.

4. Delete favicon. Create React App comes with a default favicon.ico in the public folder. We do not want to have any favicons for the new tab, so we remove it from the public folder and also disconnect it from index.html

5. Test it locally in Chrome. Execute npm run build and you will get your build folder which we will upload locally to chrome://extensions/

Make sure Developer mode is ON and click on "Load unpacked". Navigate and choose your build folder

You should now see your extension in the list. Make sure it's toggled on. It will also let you know if you have any errors to fix. Also make sure other extensions which override "new tab" are off. Once you are ready, click the "new tab" and be amazed by your work! If you wish to update the extension, you will need to change the code, run npm run build again, and click the “Refresh” button.

Congratulations, this was easy, right? That's the power of being a developer - making tools that make your life easier. I hope you enjoyed this tutorial. 

Ildana