How to Write a Chrome Extension in Two Easy Steps

i will show you on This tutorial how to creating a simple extension. You'll add an icon to Google Chrome that, when clicked, displays an automatically generated page. The icon and page will look something like this:

 You can create and develop extensions using any release of Google Chrome, on Windows, Mac, or Linux.

Create and load an extension

 

 First i will write an extension that adds a browser action to the toolbar of Google Chrome.

1. Create a folder on your computer to contain your extension's code.
2. Inside your extension's folder, create a text file called  manifest.json, and put this code in it:
   

   {
     "name": "My First Extension",
     "version": "1.0",
     "description": "The first extension that I made.",
     "browser_action": {
       "default_icon": "icon.png"
     },
     "permissions": [
       "http://api.flickr.com/"
     ]
   }

3. Copy this icon to the same folder:
   
   

 

4. Load the extension.
   
   
   
   
   1. Bring up the extensions management page by clicking the Tools menu
      
      (or the Window menu on Mac) and choosing Extensions. (If you're using version 6 or later, choose 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 on 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

Add code to the extension

Second 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",
       "popup": "popup.html"
     },
     ...

   Inside your extension's folder, create a text file called popup.html, and download this file add the  code to it
   
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: