How to create Google Chrome Extension for your website.

Since the launch of Google Chrome, it’s been chaos in and around the web. Why Chrome is so popular? It’s simplicity and easy to use and users experience is so easy and no wonder to mention, millions of extensions. So, do you want to create one for your blog for free? Well as a developer its not available. But if you can show case it to your friends and publicize about the same. To publish your chrome extension you will need a developer license which will cost $5 per extension which I learn at coupon site of havahart wireless coupons and oakley signs discounts.. But always you can promote it for free with the help of Dropbox. Only thing is it won’t be published.

So lets get started: In this tutorial I will teach you the most easiest way to create Google Chrome Extension using JSON script. 

Step1: Make a folder with you blog name as the folder name in Documents directory or any other suitable location.

Step2: Open Notepad, save as “manifest.json” and type the following code in it,

{

  "name": "My First Extension",

  "version": "1.0",

  "manifest_version": 2,

  "description": "The first extension that I made.",

  "browser_action": {

    "default_icon": "icon.png"

  },

  "permissions": [

    "http://api.flickr.com/"

  ]

}

Step3: Save and copy this icon to the same folder:

Download icon.png

Step4:

1. Load the extension.
   1. Bring up the extensions management page by clicking the wrench icon  and choosing Tools > Extensions.
   2. If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
   3. Click the Load unpacked extension button. A file dialog appears.
   4. 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.

Adding Code to the Extension :

In this step, you'll make your extension do something besides just look good.

1. Edit manifest.json to add the following line:

   
   ...
     "browser_action": {
       "default_icon": "icon.png",
       "default_popup": "popup.html"
     },
     ...
   Inside your extension's folder, create two text files called popup.html and popup.js. Add the following code to these files:

   HTML code (popup.html) and JavaScript code (popup.js) for hello_world

2. Return to the extensions management page, and click the Reload button to load the new version of the extension.
3. Click the extension's icon. A popup should appear that displays the contents of popup.html.

It should look something like this:

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!