Building a Chrome Extension

                             Google Chrome Extensions

                           The extension allows to add functionality to the Browser with the familiar web technologies like HTML, CSS, Java Script. 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 extension.
Step 1:   Create an extension root folder called “Hot Searches”. Under 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 are 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":"<author name goes here>",
"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 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 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:

Google Hot Searches

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 root folder.

  • icon.png will be displayed next to the Omnibox, waiting for user interaction as shown below. Google Hot Searches
  • 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. Visit chrome://extensions in your browser.
    2. Check “developer mode” check box.
    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.

Advertisements

I am Siva Prasad Rao Janapati. Working as a software developer. Has hands on experience on ATG Commerce(DAS/DPS/DCS), Mozu commerce, Broadleaf Commerce, Java, JEE, Spring, Play, JPA, Hibernate, Velocity, JMS, Jboss, Weblogic,Tomcat, Jetty, Apache, Apache Solr, Spring Batch, JQuery, NodeJS, SOAP, REST, MySQL, Oracle, Mongo DB, Memcached, HazelCast, Git, SVN, CVS, Ant, Maven, Gradle, Amazon Web services, Rackspace, Quartz, JMeter, Junit, Open NLP, Facebook Graph,Twitter4J, YouTube Gdata, Bazzarvoice,Yotpo, 4-Tell, Alatest, Shopzilla, Linkshare. I have hands on experience on open sources and commercial technologies.

Tagged with: , ,
Posted in Browser Extensions, Chrome Extensions
2 comments on “Building a Chrome Extension
  1. mahd.47@gmail.com says:

    Good job.

  2. autumnator says:

    Was there supposed to be a link to the source code of the sample extension? I don’t seem to find any links or attachments for it. Still, nice tutorial to share.

    Although one can find quite a few Chrome extensions source code on Github, etc. to try out. For example:

    https://github.com/jeremys/Simple-Rest-Client-Chrome-Extension

    https://code.google.com/p/autosmsclients/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

DZone

DZone MVB

Java Code Geeks
Java Code Geeks
%d bloggers like this: