How to create a chrome extension using react.js ?

Introduction :

Chrome Extension :

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

React js :

ReactJS is much easier to learn and use. ReactJS is a free and open-source front-end JavaScript library for building user interfaces based on UI components. to create interactive applications for mobile, web, and other platforms. To know more about relative links click here.

Flow Diagram :

Prerequisites :

• React.js

Steps:

Step 1: Update the manifest.js file

• If you already have the React.js project, please copy the project. In this blog, we are using a sample React.js project code.

1. In the manifest.js file given below snippet, all are Required

Manifest_Version :

One to four dot-separated integers identify the version of this extension. A couple of rules apply to the integers:

• They must be between 0 and 65535, inclusive. For example, 99999 is invalid because it is too large.

• Non-zero integers can't start with 0. For example, 032 is invalid because it starts with a zero.

• They must not be all zero. For example, 0 and 0.0.0.0 are invalid while 0.1.0.0 is valid.

Here are some examples of valid versions:

• "version": "1"

• "version": "1.0"

• "version": "2.10.2"

• "version": "3.1.2.4567"

Name :

The name (maximum of 45 characters) is the primary identifier of the extension and is a required field.

Version :

In addition to the version field, which is used for update purposes, version_name can be set to a descriptive version string and will be used for display purposes if present.

Here are some examples of version names:

• "version_name": "1.0 beta"

• "version_name": "build rc2"

• "version_name": "3.1.2.4567"

If no version_name is present, the version field will be used for display purposes as well.

1. In the manifest.js file given below snippet, all are

Recommended

Description :

• A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension.

• The description should be suitable for both the browser's extension management UI and the Chrome Web Store.

• You can specify locale-specific strings for this field

Icons :

• One or more icons that represent the extension or theme.

• You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store.

• Extensions should also provide a 48x48 icon, which is used on the extensions management page (chrome://extensions).

• You can also specify a 16x16 icon to be used as the favicon for an extension's pages.

• Icons should generally be in PNG format because PNG has the best support for transparency.

• They can, however, be in any raster format supported by Blink, including BMP, GIF, ICO, and JPEG.

Here's an example of how to declare the icons in the manifest:

1. In the manifest.js file given below snippet, all are

Optional

• Use the chrome_url_overrides key to provide a custom replacement for the documents loaded into various special pages usually provided by the browser itself.

Here's an example of how to declare the chrome_url_overrides in the manifest:

To know more about Manifest file format click here.

chrome_extension_reactjs_example →public →manifest.js

Update the manifest.js in the above path, using the following snippet.

A sample manifest.js file can be found in the following git repository file.

chrome_extention_reactjs_example/manifest.json at master · episyche/chrome_extention_reactjs_example

Step 2: Create a .eslintrc.json file

chrome_extension_reactjs_example →src

• Create a .eslintrc.json file in the above path,

chrome_extension_reactjs_example →src→ .eslintrc.json

• To specify environments in a configuration file, use the env key and specify which environments you want to enable by setting each to true.

• For example, enable a web extensions environment using the following snippet:

As shown in the following screenshot.

A sample .eslintrc.json.js file can be found in the following git repository file.

chrome_extention_reactjs_example/.eslintrc.json at master · episyche/chrome_extention_reactjs_example

Step 3: Set an Extension Image

chrome_extension_reactjs_example →public

Add an image (128 x 128, 48 x 48, 16 x 16) in the above path. as shown in the following screenshot.

Step 4: Update the App.js file

chrome_extension_reactjs_example →src→App.js

• Update the App.js in the above path.

• Add a custom URL in the App.js file. when clicking the new tab default opens our custom URL. using the following snippet.

• As shown in the following screenshot.

A sample App.js file can be found in the following git repository file.

chrome_extention_reactjs_example/App.js at master · episyche/chrome_extention_reactjs_example

Step 5: Build your Application

Build the React Application with the following command.

Step 6: Add Extension to our chrome

• First of all, login with your account.

• Click the Extension in the top right in the header bar.

• As shown in the following screenshot.

• In the pop-up window click the Manage extensions. as shown in the following screenshot.

• And switch to Developer mode. as shown in the following screenshot.

• And click on the Load unpacked. as shown in the following screenshot.

 

• Choose our build File and click on the open. as shown in the following screenshot.

• Finally, our Extension was created. as shown in the following screenshot.

• Now open a new tab. By default, our predefined URL will open

A Sample GitHub repo, with all the required configurations, is given below.

GitHub - episyche/chrome_extention_reactjs_example