From 75fc1eb65d5d1a8dc41ba30e387ea7ac7206c14b Mon Sep 17 00:00:00 2001 From: Khushi Kalra Date: Thu, 13 Jun 2024 22:54:58 +0530 Subject: [PATCH 1/2] added blog: chrome extension --- blog/authors.yml | 6 ++ blog/reactjs-mongodb-chrome-extension.md | 132 +++++++++++++++++++++++ 2 files changed, 138 insertions(+) create mode 100644 blog/reactjs-mongodb-chrome-extension.md diff --git a/blog/authors.yml b/blog/authors.yml index f8c4f7fc9..d1eacc89e 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -26,3 +26,9 @@ abhijith-m-s: title: Full Stack Developer url: https://github.com/AMS003010 image_url: https://avatars.githubusercontent.com/u/111883236?v=4 + +khushi-kalra: + name: Khushi Kalra + title: Full Stack Developer + url: "https://github.com/abckhush" + image_url: "https://yt3.googleusercontent.com/BpaBYEiGibr8uiNMCWytJ5BdKbPtpqTJAuA5Ida5rXAe8Zfvr8keZSPXYSqGasjGo7OunF2w=s176-c-k-c0x00ffffff-no-rj" \ No newline at end of file diff --git a/blog/reactjs-mongodb-chrome-extension.md b/blog/reactjs-mongodb-chrome-extension.md new file mode 100644 index 000000000..d52d19f14 --- /dev/null +++ b/blog/reactjs-mongodb-chrome-extension.md @@ -0,0 +1,132 @@ +--- +title: 'Chrome Extension Using ReactJS and MongoDB' +sidebar_label: Chrome Extension Using ReactJS and MongoDB +authors: [khushi-kalra] +tags: [chrome extension, ReactJS, MongoDB] +date: 2024-06-13 23:23:23 +hide_table_of_contents: true +--- + +# Chrome Extension Using ReactJS and MongoDB + +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. + +Here's a step-by-step guide based on my experience: + +## Step 1: Create a React App +First, you'll need to set up a basic React application. You can do this using Create React App: +``bash +npx create-react-app my-chrome-extension +cd my-chrome-extension +``` +Step 2: Change the Manifest JSON File +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: + +```json +{ + "manifest_version": 3, + "name": "My Chrome Extension", + "version": "1.0", + "description": "A simple Chrome extension built with React.", + "action": { + "default_popup": "index.html", + "default_icon": "icon.png" + }, + "permissions": [] +} +``` +Step 3: Add Height and Width to index.css +To ensure your extension has the proper dimensions, update the index.css file in the src folder: + +```css +html, body, #root { + height: 600px; + width: 400px; + margin: 0; + padding: 0; +} +``` +Step 4: Change Rendering to BrowserRoute in App.js and Add Routes +To manage different views in your extension, you can use React Router. Install React Router: + +```bash +npm install react-router-dom +``` +Then, update App.js to include routes: + +```jsx +import React from 'react'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; +import Home from './Home'; +import About from './About'; + +function App() { + return ( + + + } /> + } /> + + + ); +} + +export default App; +``` +Step 5: Run npm build and Load the Build Folder in Chrome Extensions +Finally, build your React app: + +```bash +npm run build +``` +Load the build folder as an unpacked extension in Chrome: + +Open Chrome and go to chrome://extensions/. +Enable "Developer mode" in the top right corner. +Click "Load unpacked" and select the build folder from your React app. +Adding a Backend +If you want to add a backend using Node.js and MongoDB, follow these steps: + +Step 1: Create a Backend Folder Within the App +In your project root, create a new folder called backend: + +```bash +mkdir backend +cd backend +``` +Step 2: Add server.js +Create a server.js file in the backend folder: + +```javascript +const express = require('express'); +const mongoose = require('mongoose'); +const cors = require('cors'); + +const app = express(); +const PORT = process.env.PORT || 5000; + +app.use(cors()); +app.use(express.json()); + +mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true }) + .then(() => console.log('MongoDB connected')) + .catch(err => console.log(err)); + +app.get('/', (req, res) => { + res.send('Hello, world!'); +}); + +app.listen(PORT, () => { + console.log(`Server is running on port ${PORT}`); +}); +``` +Add a .env file in the backend folder with your MongoDB connection string: + +```env +MONGO_URI=your_mongodb_connection_string +``` + +## Final Thoughts +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. + +Feel free to leave any questions or comments below, and happy coding! \ No newline at end of file From d61c7bd9653433824f4dd5943feef1eb133a19db Mon Sep 17 00:00:00 2001 From: Khushi Kalra Date: Thu, 13 Jun 2024 23:40:45 +0530 Subject: [PATCH 2/2] updated codes --- blog/reactjs-mongodb-chrome-extension.md | 142 +++++++++++++++-------- 1 file changed, 92 insertions(+), 50 deletions(-) diff --git a/blog/reactjs-mongodb-chrome-extension.md b/blog/reactjs-mongodb-chrome-extension.md index d52d19f14..f02fd048e 100644 --- a/blog/reactjs-mongodb-chrome-extension.md +++ b/blog/reactjs-mongodb-chrome-extension.md @@ -1,100 +1,142 @@ --- -title: 'Chrome Extension Using ReactJS and MongoDB' -sidebar_label: Chrome Extension Using ReactJS and MongoDB +title: 'Chrome Extension Using MERN' +sidebar_label: Chrome Extension Using MERN authors: [khushi-kalra] -tags: [chrome extension, ReactJS, MongoDB] +tags: [chrome extension, web dev, React, Express, MongoDB, Node, UI] date: 2024-06-13 23:23:23 hide_table_of_contents: true --- -# Chrome Extension Using ReactJS and MongoDB +# Chrome Extension Using MERN 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. +You can always take help from my github repository: https://github.com/abckhush/Basic-Chrome-Extension + Here's a step-by-step guide based on my experience: -## Step 1: Create a React App +## Creating Frontend of the Extension + +### Step 1: Create a React App First, you'll need to set up a basic React application. You can do this using Create React App: -``bash + +```bash npx create-react-app my-chrome-extension cd my-chrome-extension ``` -Step 2: Change the Manifest JSON File -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: + +### Step 2: Change the Manifest JSON File +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: ```json { - "manifest_version": 3, - "name": "My Chrome Extension", - "version": "1.0", - "description": "A simple Chrome extension built with React.", + "manifest_version":3, + "name":"Chrome Extension", + "version":"1.0.0", + "description":"My First Chrome Extension Using MERN", "action": { "default_popup": "index.html", - "default_icon": "icon.png" + "default_title": "Open" }, - "permissions": [] + "permissions":[ + "scripting" + ] } ``` -Step 3: Add Height and Width to index.css -To ensure your extension has the proper dimensions, update the index.css file in the src folder: + +### Step 3: Add Height and Width +To ensure your extension has the proper dimensions, update the index.css file in the src folder and add height and width: ```css -html, body, #root { - height: 600px; - width: 400px; - margin: 0; - padding: 0; +body { + min-width: 300px; + min-height: 200px; } ``` -Step 4: Change Rendering to BrowserRoute in App.js and Add Routes -To manage different views in your extension, you can use React Router. Install React Router: + +### Check Point +To check if you have followed all the steps properly. You can go try to run the extension in browser. +1. Run `npm build` in the terminal. +2. Open Chrome and go to chrome://extensions/. +3. Enable "Developer mode" in the top right corner. +4. Click "Load unpacked" and select the build folder from your React app. +5. See if can see the default React page in the height and width you gave. + +### Step 4: Change Rendering to MemoryRouter +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. +1. Install React Router: ```bash npm install react-router-dom ``` -Then, update App.js to include routes: + +2. Update index.js to include routes: ```jsx import React from 'react'; -import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import Home from './Home'; -import About from './About'; +import ReactDOM from 'react-dom'; +import App from './App'; + +import { MemoryRouter as Router } from 'react-router-dom'; + +ReactDOM.render( + + + + + , + document.querySelector('#root') +); +``` + +### Step 5: Adding Routing +1. We will make a "Components" folder in src and a Home.jsx. +```jsx +import React from 'react'; + +function Home() { + return ( +
+

Welcome to My Home Page

+

This is a simple home page.

+
+ ); +} + +export default Home; +``` + +2. We will update our App.js as: +```js +import React from 'react'; +import { Routes, Route } from 'react-router-dom'; +import Home from './Components/Home.jsx'; function App() { return ( - +
} /> - } /> - +
); } export default App; ``` -Step 5: Run npm build and Load the Build Folder in Chrome Extensions -Finally, build your React app: +**Note: You can run "npm build" again and reload the build folder to see the changes made.** + +## Adding Backend to the Extension -```bash -npm run build -``` -Load the build folder as an unpacked extension in Chrome: - -Open Chrome and go to chrome://extensions/. -Enable "Developer mode" in the top right corner. -Click "Load unpacked" and select the build folder from your React app. -Adding a Backend -If you want to add a backend using Node.js and MongoDB, follow these steps: - -Step 1: Create a Backend Folder Within the App +### Step 1: Create a Backend Folder In your project root, create a new folder called backend: ```bash mkdir backend cd backend ``` -Step 2: Add server.js + +### Step 2: Add server.js Create a server.js file in the backend folder: ```javascript @@ -103,7 +145,6 @@ const mongoose = require('mongoose'); const cors = require('cors'); const app = express(); -const PORT = process.env.PORT || 5000; app.use(cors()); app.use(express.json()); @@ -116,17 +157,18 @@ app.get('/', (req, res) => { res.send('Hello, world!'); }); +const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); ``` -Add a .env file in the backend folder with your MongoDB connection string: +### Step 3: Add a .env file ```env -MONGO_URI=your_mongodb_connection_string +MONGO_URI= your_mongodb_connection_string +PORT= 5000 ``` -## Final Thoughts 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. -Feel free to leave any questions or comments below, and happy coding! \ No newline at end of file +Feel free to connect on github, and happy coding! \ No newline at end of file