It’s been almost 5 months since my last post and there have been several reasons for the silence. But now all the things are sorted and settled and I am back to blogging again with a Series of chrome extensions development tutorials.

And my first tutorial is start with basic chrome extension development. In this tutorial, we are going to puts a small icon next to chrome address bar and when anyone clicked it, it will fetch 91weblessons tutorial post feed by using an iframe.

 

Download Link

 

So basically to develop basic chrome extension you need to know basic about HTML and to develop a good chrome extension you need to know HTML, CSS and Java Script.

In chrome extension manifest.json is the most important file. This manifest.json file contain JSON-formatted js code. And that js code specify all the setting of that extension. So here is our manifest.json file.

{
 "manifest_version": 2,
 "name": "91weblessons blog feed chrome extension by Vishal Gupta",
 "description": "This chrome extension display 91weblessons blog feed and it is developed by Vishal Gupta",
 "icons": {"128": "images/icon.png"},
 "version": "1.3",
 "browser_action": {
   "default_title": "91weblessons blog feed chrome extension by Vishal Gupta",
   "default_icon": {
   "19": "images/icon.png"
 },
 "default_popup": "index.html"
 }
}

manifest_version:- This will tells to chrome what version of the manifest file format we are using. Version 1 was deprecated as of Chrome 18, so you should always use 2.

name:-  This will tells to chrome what is the name of the extension.

description:- This will tells to chrome what is the description of the extension.

icons:- This will tells to chrome what is the icons of the extension.

version:-  This will tells to chrome what is the version of the extension.

browser_action:-  This will tells to chrome about some extra information about extension. Like what  extension icon need to show on chrome address bar, what is the title of that icon.

default_popup:- This will tells to chrome that which is the first file called when anyone click to extension icon.

 

index.html 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:770px;">
   <head>
     <title>91weblessons blog feed crome extension by Vishal Gupta</title>
   </head>
   <body>
     <div>
       <iframe width="770" height="1400" src="http://91weblessons.com/fb_apps/91WeblessonsFeed/crome.php" frameborder="0"></iframe>
     </div>
   </body>
</html>

This code is very simple code where I am calling a iframe of my server. In this html code the most important thing is style=”min-width:770px;” that I am using  in html tag.  Because chrome extension contain a specific width but my iframe have 770 width so by using style=”min-width:770px;” chrome will increase extension width.

Now all the development part is done and now time is to setup the chrome extension, so please follow below mention steps for that.

  • Open chrome://extensions/
    Chrome extension development tutorial
  • Now click to Developer mode check box that is on the right hand side.
  • Now click to Load unpacked extension button and browse your extension folder and your first chrome extension icon will showing on your chrome address bar now.
    Chrome extension development tutorial

 

And here your first Chrome extension development tutorial is finish and in the next tutorial I will explain you how to call ajax in chrome extension and how to implement this part 1 tutorial by using ajax.

 

Adios for now…