Chrome Extension, explained with Simple example

After using many Chrome extensions and Apps, I thought of writing an extension on my own. But couldn't try it as I felt it might be difficult and need to learn many other concepts / languages related to it. Recently I tried and realized that my assumptions on it were wrong. Its too simple and we don't need to learn any new concepts to implement it except few configuration options.

So, to start with a basic extension, lets go with below example,

For a Chrome extension, manifest file is mandatory. It provides information about the extension. It acts as a configuration file for our extension. Its in JSON format. There are lots of options / fields available, to understand each check out at Google site  . In our sample we used 5  fields as in below code.

 {  
  "name": "SampleExtension",  
  "manifest_version":2,  
  "version": "0.1.1",  
  "description": "Sample extension, changes title and main image in a wiki article",  
  "content_scripts": [  
   {  
    // list websites in whcih you want to execute this extension
    "matches": ["http://en.wikipedia.org/wiki/*"], 
    //CSS and javascript resources we use 
    "css": ["styles.css"],  
    "js": [ "jquery.min.js","contentscript.js"]  
   }  
  ]  
 }  

Lets understand each field we used in above code

• Name: this is the name of the extension and it comes in Extensions list once installed
• Manifest-Version: this is the manifest file format version. and it should be 2 as 1 is deprecated
• Version: version of our extension
• Description: Description about the extension
• Content_scripts: This provides core functionality information of the extension
• matches: List all the websites in which our extension should execute
• css: CSS files if we are using any
• js: JS resource files if we are using in our extension

Copy the above code and paste in a new file and save it into a seperate folder with name 'manfiest.json'. Note the format is 'JSON'.

As we see in above code, we specified 3 resources, of which 1 is CSS and other 2 are javacript files

We need to create those files and save them in the same folder we have 'manifest.json'

In my sample, CSS file code is as below,

 #firstHeading span  
 {  
      color:red;  
 }  

And, code for 'contentscript.js' is,

 $(document).ready(function(){  
 $('#firstHeading span').html('My Custom Name using Extension');  
 $('.infobox.vcard img').first().attr('src','http://cdns2.freepik.com/free-photo/boy-face-cartoon-clip-art_430749.jpg');  
 });  

Don't forget to add the other Jquery file which you find on google.

Now our extension is ready. To, test it in you local machine,

1. Go to Extensions of Chrome which is available in settings 
2. Check 'Developer Mode' select box available on top.
3. Once you check, 'Load Unpackaged Extension..' button will be displayed.
   
4. Click on it and provide the folder which has above 4 files
5.  Now the extension is loaded and enabled as in below image
   
6. TO test it open wiki page of any person or any article. you will see the title changed and also the article main image(if available) is changed