Building a Chrome Extension

                           The extension allows adding functionality to the Browser with familiar web technologies like HTML, CSS, JavaScript. In this article, we will see the steps to create a simple Chrome extension. This extension will populate the “Google Hot Searches” based on the locale. Follow the below steps to create an extension.
Step 1:   Create an extension root folder called “Hot Searches”. Under the root folder, We’ll need to create a manifest file named manifest.json. The manifest is nothing more than a JSON-formatted table of contents, containing properties like your extension’s name and description, version number, and so on. Here we’ll use it to declare Chrome regarding what the extension is going to do, and what permissions it requires in order to do those things. The overview of all the manifest file fields is available here. In this “Google Hot Searches” extension, the manifest.json file looks like below.

{
"manifest_version": 2,
"name": "Hot Searches",
"description": "This extension will display the google hot searches",
"version": "1.0",
"author":"",
"icons": { "153": "icon.png"},
"browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 },
"permissions": [
 "http://smart-ip.net/geoip-json"
 ]
}

In the above example, we have mentioned the name, desc, author, etc., fields of the extension. In this sample extension, we are accessing cross-domain URL to get the locale. That is why we are mentioning the URL under the permissions section.

We are calling a browser action UI element, which allows us to place a clickable icon right next to Chrome’s Omnibox for easy access. Clicking that icon will open a popup window filled with google hot searches, which will look something like this:

Step 2:  In the above step, we have placed two resource files under “browser_action” field. We need to place these files: icon.png and popup.html under the root folder.

• icon.png will be displayed next to the Omnibox, waiting for user interaction as shown below. 

• popup.html will be rendered inside the popup window that’s created in response to a user’s click on the browser action. It is a standard HTML page. This HTML requires a javascript file called popup.js to bring the google hot searches.

Step 3: Load the extension

1. 1. Visit chrome://extensions in your browser.
   2. Check “developer mode” checkbox.
   3. Click on Load unpacked extension…  and select the root folder of your extension.

If the extension is loaded properly without having any errors, you will able to see the extension icon at the top of the page.

The source code of the sample extension is available here.

About Siva Prasad Rao Janapati

Siva Janapati is an Architect with experience in building Cloud Native Microservices architectures, Reactive Systems, Large scale distributed systems, and Serverless Systems. Siva has hands-on in architecture, design, and implementation of scalable systems using Cloud, Java, Go lang, Apache Kafka, Apache Solr, Spring, Spring Boot, Lightbend reactive tech stack, APIGEE edge & on-premise and other open-source, proprietary technologies. Expertise working with and building RESTful, GraphQL APIs. He has successfully delivered multiple applications in retail, telco, and financial services domains. He manages the GitHub(https://github.com/2013techsmarts) where he put the source code of his work related to his blog posts.