DEV Community

Alok Kumar
Alok Kumar

Posted on

How to create an Extension using react

Hey All 👋

At work, I always have to create a new meet or a new sheet, and it was a hassle every time to do that. Then I found out about some shortcuts like that opens a new meet tab with the currently signed-in user. But it was still a hassle to open a new tab and type these shortcuts, then I thought why not create a small extension for the same. And in this article, we are going to see how I created a chrome extension using react to open some G services.

Project Setup

Firstly, create a new CRA project :-

npx create-react-app google-shortcuts
Enter fullscreen mode Exit fullscreen mode

Now let's do some cleaning :-

  • In public folder delete everything except index.html and favicon.ico.

  • In src folder delete everything except App.js, index.js and index.css.


Let's do some changes in these files :-

public/index.html :-

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
      content="Web site created using create-react-app"
    <title>Google Shortcuts</title>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

Enter fullscreen mode Exit fullscreen mode

src/index.js :-

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

    <App />

Enter fullscreen mode Exit fullscreen mode

src/index.css :-

body {
  height: 60px;
  width: 200px;

body {
  margin: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.App {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  border: 1px solid black;

Enter fullscreen mode Exit fullscreen mode


This file will contain the code of the content which will be shown in the extension's pop-up.

import React from "react";

import meet from "./meet.png";
import docs from "./docs.png";
import slides from "./slides.png";
import sheets from "./sheets.png";

function App() {
  return (
    <div className="App">
        <a href="" target="_blank" rel="noreferrer">
          <img src={meet} alt="meet" />
        <a href="" target="_blank" rel="noreferrer">
          <img src={sheets} alt="sheets" />
        <a href="" target="_blank" rel="noreferrer">
          <img src={docs} alt="docs" />
        <a href="" target="_blank" rel="noreferrer">
          <img src={slides} alt="slides" />

export default App;

Enter fullscreen mode Exit fullscreen mode

This file contains a parent div with four child divs which contains an image anchor to the respective shortcuts.


Now let's create a manifest.json file which will contain all the configurations of the extension :-

  "name": "Google Shortcuts",
  "offline_enabled": true,
  "short_name": "Google Shortcuts",
  "description": "Google Shortcuts",
  "version": "1.0.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open a new Google Service"
  "permissions": ["storage", "tabs", "activeTab", "http://*/*", "https://*/*"]

Enter fullscreen mode Exit fullscreen mode

Here we can see that we have provided some basic info like name, description, etc. For the extension's pop-up window we are pointing to the index.html file. Also, we are giving some permissions to the extension.

Wrapping Up

Now we are all done with the coding it's time for testing the extension. Firstly we'll need a build of our project. We can create one by simply executing :-

npm run build
Enter fullscreen mode Exit fullscreen mode

Now we can see that we have a build folder in the project directory. Now we have to copy the manifest.json file we just created into this folder. And we are done!

Let's test this :-

  • Open Chrome/Brave.
  • Go to chrome://extensions/ and enable Developer mode.
  • Now click on the Load unpacked Button and point to the build folder we just created.

And it's done!!! Congrats you just created a chrome extension 👏

Here's a small video of the same :-

extension demo

If you want to check the code here's the link to the repo.

I have tried to keep it simple and precise, and if you find any typo/error please report it to me so that I can correct it 🙂

Thanks for reading it till last 🙏

If you find this useful then you can share it with others :)

Let's Connect, drop a Hi and let's chat 👋👋👋

Top comments (0)