How to Create a Chrome Extension.

manifest.json
Create a JSON file called manifest.json file inside MyChromeApp folder. You have to modify your extension details name, version, discription and permission url (This should be verified with Google Webmaster Tools)

{

"name": "MyChromeApp",
"version": "1.0",
"description": "First Chrome Extension",

"browser_action": 
{
"default_icon": "icon.png",
"popup":"popup.html"
},

"permissions": [ "http://www.9lessons.info" ]

}

Popup.html
This file displays the extension popup contents in HTML view Below code displaying top 9 blog feed titles using jquery paRSS plugin. 

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.parss.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#feed").PaRSS(
"http://feeds2.feedburner.com/9lesson", // RSS Feed link
9, 
"M jS g:i a", 
true 
);
});
</script>
<div id='feed'></div>

Loading the extension on local Chrome broswer
Go to Chrome Browser Customize and control select Tools -> Extensions the following screenshot will appear

Now click Load Unpack Extension button and choose your local extension folder.

Creating URL App Extension

Try Kokkoroko URL chrome extension click here to install.

 Download Script     Live Demo

manifest.json
Create a JSON file called manifest.json file using notepad inside ChromeUrlApp folder. You have to modify your extension details name, version, discription and permission url

{

"name": "ChromeUrlApp",
"version": "1.0",
"description": "Chrome Url App",

"icons": 
{
"128": "logo.png"
},

"app": 
{
"urls": [ "http://www.kokkoroko.com/"],
"launch": 
{
"web_url": "http://www.kokkoroko.com"
}
},

"permissions": [ "http://www.kokkoroko.com" ]
}

Extension Update at Chrome Web Store

It's completely free before you have to verify your permissions domain at Google webmaster tools. Click here and upload your final built in .zip format.


CSS Code
CSS code for sample popup.html file.

#box
{
width:400px;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
padding:10px;
background-color:#dedede;
}
#feed
{
background-color:#FFFFFF;
list-style:none;
border:solid 1px #999;
}
ul
{
list-style:none;
}
li
{
padding:8px;
}
#logo
{
font-size:18px;
font-weight:bold;
}
.parss-date, .parss-image, .parss-description
{
display:none;
}
.parss-title a
{
color:#003399;
text-decoration:none
}
.parss-title a:hover
{
color:#003399;
text-decoration:underline
}