How to Develop Chrome Extension with React Technology?

The trendy and most famous web browsers Firefox and Chrome support extensions. A bunch of small apps are called extensions and are not included in your browser, but if you want to use its functionalities, you can add them to your browser. This feature makes extending browser functionality simple. Every user can use these extensions, for this first of all we have to select the apps from the online stores like the Firefox store or chrome store then after clicking on add button we can simply add that extension.

We can use CSS, HTML, as well as JavaScript to develop our extensions. The browser extensions are also made up of HTML apps packaged precisely. The chrome extensions have become a trendy way to expand the functionality of many web apps by making them simple to utilize as well as more accessible. Although, the designing of browser extensions is not so easy, mainly when you are using a more difficult stack with modern web frameworks like React.

Structure of Chrome Extensions

First of all, we need to grab the typical structure of a Chrome extension to know how to do chrome extension development with React (mainly CRA). An extension includes all these elements like manifest.json, popup (Html + js), background script and content scripts.

We are describing each element specifically in detail. The complete information is given below:

Manifest.json

This is one of the main files of the browser, With the support of manifest.json, we can give the specifications of our extension such as icon, name, version, etc according to our choice. We can also specify the feature of our extension and can write the paths for our background scripts, content scripts as well as browser actions but the main problem with React and CRA occurs.

Popup.html

When you click on the extension’s icon or button then this Html file is opened by default in the popup window. The JavaScript and CSS may be attached to it like other Html files.

Content Scripts

The content scripts are a file that runs in the context of web pages. We can do changes according to us like we can inject Html, change the styles send requests, etc because they are written in JavaScript. We can manage it whether they run on all websites you visit, or only on particular URLs.

Background Script

It is the script that operates in its environment (or ‘context’). It will be active as well as running until your browser is open and the extension is enabled.

Step By Step Procedure for Chrome Extension Development

1.  Create React App

First of all, we have to design our React app. We have to Create a new folder — you can call it somewhat a cool extension and you can open it in VS Code or whatever IDE you prefer utilizing. You have to open up a terminal (keep in mind that you should stay in your folder), and enter the following command:

npx create-react-app

This command will construct a fresh React application in your folder.

2.  Create a Manifest.json File

At Earlier times, it was necessary to create a manifest.json if you are developing a Chrome extension, but now it has been modified, and Create React App automatically creates a manifest.json file by default — you will be able to find it in your public folder.

You have to delete everything in this file, and paste this code:

{
"short_name": "Your Extension Name",
"name": "Your Extension Name",
"icons": {
"16": "favicon.ico",
"48": "logo192.png",
"128": "logo512.png"
},
"permissions": [],
"manifest_version": 2,
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "Your Extension Name"
}
}

To get the main information of your extension this file is generally used by Chrome: What is the name? What icon should I confirm? What permissions are necessary from the user to operate this extension? And so on.

I will look over the manifest.json real fast, but if you want to have a search please look at the docs.

Name as well as Short_name should be self-explanatory — those take the name of your extension.

Icons: The icons show in your chrome head bar.

Permissions: You can’t do anything here according to your choice on another user’s machine because they need to permit it first and this thing makes it more interesting. So if you want to do changes to your user’s Chrome storage then first of all you will need to set this in the permissions array. It shows something like this: “permissions”: [“storage”]. But for this lesson, we currently don’t need it.

The version represented as your release version —when you upgrade your application on the Chrome store then it will be necessary to change the version.

default_title, browser_action as well as default_popup are needed to identify what your extension will do. default_popup defines the page you want your extension to give (in our case, that’s index.html) and default_title is the kind of title that appears when you hover over the extension icon.

There are so many more manifest properties that also exist, but you’ll have to discover those for yourself. For now, they’re not important.

Normally we’d be done now. Your React extension is completely functional, but as I mentioned earlier, we will need to work around the utilization of in-line scripts.

3. Create a .env File

In your main folder (cool-extension), you will need to generate a file called .env this file will hold your environment variables. You have to add this command of code:

INLINE_RUNTIME_CHUNK=false

This will assure that there are no issues with Chrome.

This was the last step of extension designing. Now we can fire up our extension.

4. Build Your Extension

You have to add this command to your command line

npm run build

With the support of this command, the system will create a build folder in your cool-extension folder.

5. Open Your Extension in Chrome

Enter this given below command into your Chrome search bar:

chrome://extensions/

Then you have to turn on developer mode which exists in the top-right corner. This will then provide two buttons in the top-left corner. Load the packed extension as well as the unpacked extension.

Then you have to Click on “Load unpacked extension,” and choose your build folder.

Your extension will now display in your browser and it will update routinely every time you use npm run build.

 

6. Add Some CSS (Optional):

After all of these processes, our extension works smoothly but it looks kind of small. For changes, we need to add some CSS.

You have to go to your App.css file and add this:

.App{
text-align: center;
min-width: 300px;
max-width: 300px;
min-height: 300px;
max-height: 300px;
}

Then you have to run npm run build again wait for it to finish after then open your extension.

Conclusion

It may be complicated and hard to debug and chrome extension develop with React but we have solved the major problems successfully. We have managed to build using React by doing one major thing: We are ejecting out of CRA as well as changing the webpack configuration. However, the explanation given here is just one of many – you’re welcome to go ahead and change it to suit your needs particularly.

After successfully testing and building your application, you can publish your extension on Chrome Web Store, where it will go through an official review before going live. Groovy Web has a team of dedicated and experienced people known for their proficiency in Chrome extension development. If you are also looking for an ultimate and productive google chrome extension then you should hire these professionals.