Posted by & filed under Blog Entry, Extension, General, Javascript.

An Extension is a simple way to add additional functionality to Chrome without diving into native Chrome Code.

Creating an extension is super easy if your are familiar with HTML/CSS/JavaScript. If you’ve ever done any web development or created any web page, you’ll feel at home while developing the Chrome Extension.

I’ll take you through the development of a simple chrome extension called Chrome to Phone (C2P) that we recently built at SudoSaints

What the extension does is very basic. It just sends a AJAX request to a server, with the logged in user and the link of the Current tab as data. The server then pushes the link to the android device using GCM.

But in this post, we’ll just discuss about the chrome extension.

The Manifest File

The manifest file is a JSON file with properties and meta data of your application. It contains data like The name of the Extension, the version number, permissions, etc. It basically just declares what the extension does.

Below is the manifest.json of C2P


{
 "manifest_version": 2,

"name": "Browser To Phone",
 "description": "This extension pushes the current tab url's to your registered phone, so that you can continue reading on the go!",
 "version": "1.0.1",

"browser_action": {
 "default_icon": "icon.png",
 "default_popup": "popup.html"
 },
 "icons": {
 "16":"images/icon-16.png",
 "48":"images/icon-48.png",
 "128":"images/icon-128.png"
 },
 "permissions": [
 "http://aws.wpcoach.in/",
 "https://accounts.google.com/o/oauth2/token",
 "https://www.googleapis.com/oauth2/v1/userinfo",
 "storage", "tabs"
 ],
 "content_scripts": [
 {
 "js": ["jquery.min.js"],
 "run_at": "document_start"
 }
 ]
}

The above JSON file is pretty self-explanatory. I basically requests permissions to access data from a few websites, the icon set for the extension, specifies the HTML file that should pop-up on click of the icon, and the JS files related to the extension in content_scripts.

So it is obvious that you’ll now need to create the popup.html file and also will have to include some image for the icons. You’ll also need to download jQuery and save it in the same folder as the extension.

Loading the Extension in Chrome

  1. Visit chrome://extensions in your browser
  2. Check the “Developer mode” check box in the right-hand corner.
  3. Click “Load Unpacked Extension” and select the directory in which your extension files live.

You can now see your chrome extension in your Google Chrome Toolbar, on the top-right side. When you click on the extension, you can see the contents of popup.html shown in the popup.

chrome-extension

That’s it! Our extension is now running. All we need to do now is to send the AJAX request to the server.

Since that is something every web developer is familiar with, I’ll leave you to it. Try implementing and let me know how you did it in the comments section.

I’ll make the code available on GitHub soon so that you can check it out! For more details on how to develop extensions, check out Google Developers Website

Leave a Reply

  • (will not be published)