How to create a Google Chrome Extension - For Beginners - Basics [Part 1]

  Ever wanted to know how to create a Google chrome extension?  If you do, then have a look at our small HOWTO tutorial on How to build a Chrome browser Plugin. This basic tutorial walks you through the various steps in creating a simple extension to build a simple "Hello, World" extension in about 5 minutes.

 

 

STEP 1 : Create a folder with the app name

Create a folder with your app name somewhere on your computer to contain your extension's code like the following.

STEP 2 : Create manifest.json

Inside your extension's folder, create a text file called manifest.json, and add this in it: Copy any icon that looks catchy of size 16*16 in the same folder:

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
      popup": "popup.html"
  },
  "permissions": [  ]
}

What is manifest.json ?

Beginners might have this question for sure. Every extension, installable web app, and theme has a JSON-formatted  manifest file, named manifest.json, that provides important information. This is a configuration file where all the pre-requisites has to be declared. Google does provide resources if you want to know more about the manifest.json file.

STEP 3 : Copy the icon to the same folder:

Now your folder should contain both manifest.json and icon.png as below

STEP 4 : Create a html file

Create a text file, and add the following code to it and save it as popup.html:

Hello World. This is my first app !

This will be the content which gets displayed in a popup when you click on the extension.

STEP 5 : Load the extension.

Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions or type chrome://extensions

Look for Developer mode option present in the right top corner. Click it if Developer mode has a + by it, to add developer information to the page. The + changes to a -, and more buttons and information appear along with the existing extensions list.

Now you see 3 buttons in Developer mode: Load unpacked extension, Pack extension. Update extensions now

Click the Load unpacked extension button. A file dialog appears.

In the file dialog, navigate to your extension's folder and click OK.

If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

Now you are done ! Click the icon that you just created, A popup should apear as follows.

If you don't see the popup, try the instructions again, following them exactly. Don't try loading an HTML file that isn't in the extension's folder — it won't work!

Part 2 of this will contain steps on How to extend the Hello World application and port it to Chrome Webstore. Stay tuned .....

For Help & Reference :

http://code.google.com/chrome/extensions/index.html
http://code.google.com/chrome/extensions/docs.html
For Samples :
http://code.google.com/chrome/extensions/samples.html