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 :-
<!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 :-
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 :-
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.
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 :-
{
"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 :-
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)