How to create an Extension using react
Tags: javascript, webdev, react, 100daysofcode
Published: 2022-02-26 18:53:59

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 meet.new 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
```

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_**.

---

## Code

Let's do some changes in these files :-

### public/index.html :-

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <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" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Google Shortcuts</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

```

### src/index.js :-

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

```

### src/index.css :-

```css
html,
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",
    sans-serif;
  -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;
}

```

### src/App.js

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

```jsx
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">
      <div>
        <a href="https://meet.new" target="_blank" rel="noreferrer">
          <img src={meet} alt="meet" />
        </a>
      </div>
      <div>
        <a href="https://sheets.new" target="_blank" rel="noreferrer">
          <img src={sheets} alt="sheets" />
        </a>
      </div>
      <div>
        <a href="https://docs.new" target="_blank" rel="noreferrer">
          <img src={docs} alt="docs" />
        </a>
      </div>
      <div>
        <a href="https://slides.new" target="_blank" rel="noreferrer">
          <img src={slides} alt="slides" />
        </a>
      </div>
    </div>
  );
}

export default App;

```

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

### manifest.json

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

```json
{
  "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://*/*"]
}

```

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

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

If you want to check the code here's the link to the [repo](https://github.com/alok182011/chrome-extension).

---

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 👋👋👋](https://twitter.com/thecoollearner)