React Hello World Chrome Extension
Are you ready to build your first Chrome Extension using React in just 5 minutes? This article will walk you through the process of creating a simple “Hello World” Chrome Extension using React. Let’s get started!
Step 1: Set up your development environment
Make sure you have Node.js and npm installed on your computer. You will also need to have the latest version of Google Chrome installed. Once you have these prerequisites, you’re ready to move on to the next step.
Step 2: Create a new React app
Open your terminal and run the following command to create a new React app:
npx create-react-app hello-world-extension
This command will create a new directory called “hello-world-extension” with all the necessary files and configurations for a React app.
Step 3: Add a manifest file
Create a new file called “manifest.json” in the public folder of your React app. This file will contain the necessary configurations for your Chrome Extension.
{
"manifest_version": 2,
"name": "Hello World Extension",
"version": "1.0",
"browser_action": {
"default_popup": "index.html"
},
"permissions": ["activeTab"]
}
Step 4: Build your Chrome Extension
Create a new file called “index.html” in the public folder of your React app. This will be the popup that appears when the user clicks on your Chrome Extension icon. You can add your React code here to display the “Hello World” message.
<!DOCTYPE html>
<html>
<head>
<title>Hello World Extension</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Step 5: Test your Chrome Extension
Open your terminal and run the following command to build your React app:
npm run build
This will create a new build folder with all the necessary files for your Chrome Extension. Now, open Google Chrome and go to chrome://extensions/. Enable Developer mode and click on “Load unpacked”. Select the build folder of your React app and click on “Select Folder”. Your Chrome Extension should now be installed and ready to use!
Congratulations! You have successfully created your first Chrome Extension using React in just 5 minutes. Stay tuned for more tutorials in our “App in a week” series!
