Skip to content

Commit d61c7bd

Browse files
abckhushabckhush
committed
updated codes
1 parent 75fc1eb commit d61c7bd

File tree

1 file changed

+92
-50
lines changed

1 file changed

+92
-50
lines changed

‎blog/reactjs-mongodb-chrome-extension.md

+92-50
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,142 @@
11
---
2-
title: 'Chrome Extension Using ReactJS and MongoDB'
3-
sidebar_label: Chrome Extension Using ReactJS and MongoDB
2+
title: 'Chrome Extension Using MERN'
3+
sidebar_label: Chrome Extension Using MERN
44
authors: [khushi-kalra]
5-
tags: [chrome extension, ReactJS, MongoDB]
5+
tags: [chrome extension, web dev, React, Express, MongoDB, Node, UI]
66
date: 2024-06-13 23:23:23
77
hide_table_of_contents: true
88
---
99

10-
# Chrome Extension Using ReactJS and MongoDB
10+
# Chrome Extension Using MERN
1111

1212
Creating a Chrome extension can seem like a daunting task, especially when you're trying to combine it with technologies like ReactJS and MongoDB. When I first set out to build my extension, I found it challenging to find a perfect YouTube tutorial or blog post that covered everything I needed. So, I turned to StackOverflow and other resources to piece together my project.
1313

14+
You can always take help from my github repository: https://github.com/abckhush/Basic-Chrome-Extension
15+
1416
Here's a step-by-step guide based on my experience:
1517

16-
## Step 1: Create a React App
18+
## Creating Frontend of the Extension
19+
20+
### Step 1: Create a React App
1721
First, you'll need to set up a basic React application. You can do this using Create React App:
18-
``bash
22+
23+
```bash
1924
npx create-react-app my-chrome-extension
2025
cd my-chrome-extension
2126
```
22-
Step 2: Change the Manifest JSON File
23-
The manifest.json file is crucial for Chrome extensions as it contains metadata about your extension. Create a manifest.json file in the public folder with the following content:
27+
28+
### Step 2: Change the Manifest JSON File
29+
The manifest.json file is crucial for Chrome extensions as it contains metadata about your extension. Update the manifest.json file in the public folder with the following content:
2430

2531
```json
2632
{
27-
"manifest_version": 3,
28-
"name": "My Chrome Extension",
29-
"version": "1.0",
30-
"description": "A simple Chrome extension built with React.",
33+
"manifest_version":3,
34+
"name":"Chrome Extension",
35+
"version":"1.0.0",
36+
"description":"My First Chrome Extension Using MERN",
3137
"action": {
3238
"default_popup": "index.html",
33-
"default_icon": "icon.png"
39+
"default_title": "Open"
3440
},
35-
"permissions": []
41+
"permissions":[
42+
"scripting"
43+
]
3644
}
3745
```
38-
Step 3: Add Height and Width to index.css
39-
To ensure your extension has the proper dimensions, update the index.css file in the src folder:
46+
47+
### Step 3: Add Height and Width
48+
To ensure your extension has the proper dimensions, update the index.css file in the src folder and add height and width:
4049

4150
```css
42-
html, body, #root {
43-
height: 600px;
44-
width: 400px;
45-
margin: 0;
46-
padding: 0;
51+
body {
52+
min-width: 300px;
53+
min-height: 200px;
4754
}
4855
```
49-
Step 4: Change Rendering to BrowserRoute in App.js and Add Routes
50-
To manage different views in your extension, you can use React Router. Install React Router:
56+
57+
### Check Point
58+
To check if you have followed all the steps properly. You can go try to run the extension in browser.
59+
1. Run `npm build` in the terminal.
60+
2. Open Chrome and go to chrome://extensions/.
61+
3. Enable "Developer mode" in the top right corner.
62+
4. Click "Load unpacked" and select the build folder from your React app.
63+
5. See if can see the default React page in the height and width you gave.
64+
65+
### Step 4: Change Rendering to MemoryRouter
66+
This is the most crucial step. BrowserRouter is not supported for the Chrome Extensions, which is default in React applications. We are going to change that too MemoryRouter.
67+
1. Install React Router:
5168

5269
```bash
5370
npm install react-router-dom
5471
```
55-
Then, update App.js to include routes:
72+
73+
2. Update index.js to include routes:
5674

5775
```jsx
5876
import React from 'react';
59-
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
60-
import Home from './Home';
61-
import About from './About';
77+
import ReactDOM from 'react-dom';
78+
import App from './App';
79+
80+
import { MemoryRouter as Router } from 'react-router-dom';
81+
82+
ReactDOM.render(
83+
<React.StrictMode>
84+
<Router>
85+
<App />
86+
</Router>
87+
</React.StrictMode>,
88+
document.querySelector('#root')
89+
);
90+
```
91+
92+
### Step 5: Adding Routing
93+
1. We will make a "Components" folder in src and a Home.jsx.
94+
```jsx
95+
import React from 'react';
96+
97+
function Home() {
98+
return (
99+
<div>
100+
<h1>Welcome to My Home Page</h1>
101+
<p>This is a simple home page.</p>
102+
</div>
103+
);
104+
}
105+
106+
export default Home;
107+
```
108+
109+
2. We will update our App.js as:
110+
```js
111+
import React from 'react';
112+
import { Routes, Route } from 'react-router-dom';
113+
import Home from './Components/Home.jsx';
62114

63115
function App() {
64116
return (
65-
<Router>
117+
<div>
66118
<Routes>
67119
<Route path="/" element={<Home />} />
68-
<Route path="/about" element={<About />} />
69120
</Routes>
70-
</Router>
121+
</div>
71122
);
72123
}
73124

74125
export default App;
75126
```
76-
Step 5: Run npm build and Load the Build Folder in Chrome Extensions
77-
Finally, build your React app:
127+
**Note: You can run "npm build" again and reload the build folder to see the changes made.**
128+
129+
## Adding Backend to the Extension
78130

79-
```bash
80-
npm run build
81-
```
82-
Load the build folder as an unpacked extension in Chrome:
83-
84-
Open Chrome and go to chrome://extensions/.
85-
Enable "Developer mode" in the top right corner.
86-
Click "Load unpacked" and select the build folder from your React app.
87-
Adding a Backend
88-
If you want to add a backend using Node.js and MongoDB, follow these steps:
89-
90-
Step 1: Create a Backend Folder Within the App
131+
### Step 1: Create a Backend Folder
91132
In your project root, create a new folder called backend:
92133

93134
```bash
94135
mkdir backend
95136
cd backend
96137
```
97-
Step 2: Add server.js
138+
139+
### Step 2: Add server.js
98140
Create a server.js file in the backend folder:
99141

100142
```javascript
@@ -103,7 +145,6 @@ const mongoose = require('mongoose');
103145
const cors = require('cors');
104146

105147
const app = express();
106-
const PORT = process.env.PORT || 5000;
107148

108149
app.use(cors());
109150
app.use(express.json());
@@ -116,17 +157,18 @@ app.get('/', (req, res) => {
116157
res.send('Hello, world!');
117158
});
118159

160+
const PORT = process.env.PORT || 5000;
119161
app.listen(PORT, () => {
120162
console.log(`Server is running on port ${PORT}`);
121163
});
122164
```
123-
Add a .env file in the backend folder with your MongoDB connection string:
165+
### Step 3: Add a .env file
124166

125167
```env
126-
MONGO_URI=your_mongodb_connection_string
168+
MONGO_URI= your_mongodb_connection_string
169+
PORT= 5000
127170
```
128171

129-
## Final Thoughts
130172
Building a Chrome extension with ReactJS and MongoDB was a learning experience filled with challenges and triumphs. While finding the perfect tutorial was tough, the process of solving problems using StackOverflow and other resources was incredibly rewarding. I hope this guide helps you in your journey to create your own Chrome extension.
131173

132-
Feel free to leave any questions or comments below, and happy coding!
174+
Feel free to connect on github, and happy coding!

0 commit comments

Comments
 (0)