Creating a Google Chrome Extension is as Easy as 1-2-3

Tweet

Chrome Extension allows 3rd-party developers to add new functionality to the Google Chrome browser. Did you know, all that it takes to develop a Google Chrome Extension is HTML, CSS, JavaScript and an icon. Sounds doable right? Let’s see how easy it is to create a ‘World Clock/Time’ Chrome Extension.

Step 1: Create a folder on your computer and call it JSClock. Create a manifest file (text file) inside the folder and call it manifest.json. Add the following contents to the file

{
  "name": "World Clock",
  "version": "1.0",
  "description": "World Clock showing Time of 12 countries",
  "browser_action": {
    "default_icon": "clock.ico",
    "popup": "clock.html"
  }
}

Note: If you are using any information from an external website, such as Google or Flickr, you also need to provide permission to the environments in which you’ll work. That’s done by adding the permission info to the manifest as follows:

"permissions": ["http://*.google.com/", "http://api.flickr.com/"]

Anyways for this example, we do not need to add the permission info. So leave the manifest as it is. As you will observe, the manifest file provides browser actions (for UI) to load a HTML page and an icon. So let’s create them.

Step 2: Add an icon to the folder. I downloaded a clock icon file from here and rename it as clock.ico

Step 3: Now create a clock.html page and add your JavaScript, CSS and HTML tags in it. I downloaded a free World Clock script over here and added it to clock.html.

Your extension is ready. I told you it’s easy! You can download the entire folder here (uncompress it before using).

Installing the Extension

Step 4: All you have to do now is load the extension in Chrome. Open Chrome, click on the Tools icon ( )in the top-right corner of your browser > Select Tools > Extensions. Click the + Developer Mode to expand it if it is not already expanded.

Click on ‘Load unpacked extension..’ button and browse to the JSClock folder and click ok. If everything is in place, you will be able to view information about the extension in the extensions page as shown below:

Your extension has been installed! To view it, check the World Clock icon next to the address bar in the Chrome toolbar.

Clicking the dropdown brings up the rest of the countries.

If you plan to distribute your extension, the contents of the folder are packaged into a special ZIP file that has a .crx suffix. Read more on Hosting an extension

IMHO, Developing an extension for Google Chrome is the simplest of all the browsers! Note that I have tested this extension only on Windows, although it should also work on a Mac.

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.