Creating a Chrome Extension for your Blog

In this Post we will be creating a simple Chrome Extension which will give your readers a way to be updated with your Blogs content without actually visiting it. This Extensions will put a small Icon near the Chrome Address bar in your readers browser ,which when clicked will Display the Latest Post on your Blog in a small Popup window. I will be explaining three different versions of this Extension with some minor differences. Firstly check out StylifyYourBlog's Extension to know how it looks

Now lets get Started

Firstly you will Need some basic things for building this extension, you can Download them here:

This Package contains Three different Extensions (Same thing just little changes)

Extension 1: Simple ,just shows the Posts
Extension 2: Shows the Posts and also slides after define time interval ,bringing into view older posts
Extension 3:Same as First one but when any post is clicked then opens the mobile version

In this package some things are common ,I will be giving a short markup about every item present:
Icon_19.png   has dimension 19 by 19 and is going to appear in the Address bar
Icon_128.png   has dimensions 128 by 128 and is going to appear in the main Chrome Extensions Tab
jquery.min.js   is the jQuery library (this you can either include in the Extension or call it through a CDN)
jquery.vticker.js   is used for dynamically changing the Feed
jquery.zrssfeed.min.js   is the plugin which fetches the feed from the Your Blog
manifest.json   is the Main file for the Extension
style.css   is the CSS file for styling the Extension
StylifyYourBlog.html   is the HTML file which will contain the main code of the popup window

Now I will explain the coding in detail:

1.Manifest.json

In this file we are specifying the Name of the extension and a Number of other options, such as browser actions ,permissions,icons etc.

In browser_actions, we put settings that are in relation with the browser window. The popup property tells Chrome, that we are going to show .html as a popup. There are a number of settings you can put in browser_actions. You can read more on Google Chrome’s Extension documentation.

{
	"name": "Stylify Your Blog Extension",
	"version": "1.0",
	"description": "Stay Updated with the latest post from Stylify Your Blog",
	"icons":{
		"128":"icon_128.png"
	},
	
	"browser_action":	{
		"default_icon": "icon_19.png",
		"popup": "StylifyYourBlog.html"
	}

}

Now I will be explaining Three Different Versions of this Extension:
The Only Difference is in their HTML versions rest all coding is same (just minor changes in jquery.zrssfeed.js file)

1st & 3rd :The Basic & Experimental Version
2nd Version :The Stylified Version

The HTML file ( a.k.a StylifyYourBlog file in the Package )

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="jquery.zrssfeed.min.js"></script>
</head>

<body>

<h1>Latest Posts on Stylify Your Blog</h1>
<script type="text/javascript">
$(document).ready(function () {
  $('#content').rssfeed('http://stylifyyourblog.blogspot.com/rss.xml', {
    limit: 3
  });
});
</script>
<div id="content"></div>

</body>
</html>

Version 1 is simple version which only shows the most recent Posts in a Popup window.

Version 3 is quite similar to Version 1 but the only difference being that when the Post is clicked it opens the Mobile Version of that post on the Popup Window itself

The HTML file ( a.k.a StylifyYourBlog file in the Package )

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="jquery.zrssfeed.min.js"></script>
<script src="jquery.vticker.js" type="text/javascript"></script></head>

<body>

<h1>Latest Posts on Stylify Your Blog</h1>
<script type="text/javascript">$(document).ready(function () {	$('#content').rssfeed('http://YourBlogName.blogspot.com/rss.xml',{}, function(e) {		$(e).find('div.rssBody').vTicker();	});});</script>
<div id="content"></div>

</body>
</html>

This is a little pepped up version which provides a Latest post with sliding ticker.

The CSS file ( a.k.a style file in the package )

*{
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    font-size:12px;
    color:#666;
    
    /* A webkit gradient: */
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
    
    text-shadow:1px 1px 0 white;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
    width:500px;
    padding:10px 20px;
    margin-bottom:10px;
}


a,a:visited{
    color:#09F;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

h1{
    /* Webkit gradient: */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
    
    border-bottom: 1px solid #F0F0F0;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 30px;
    padding: 30px 0px;
    text-align: center;
    text-shadow: white 0px 1px 1px;
}

h2{
    font-size:24px;
    font-weight:normal;
    right:40px;
    padding-left:120px;
}

h1,h2{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

To change the background Visit Here and after deciding the color copy the code labelled for (Chrome 11+) and paste it in line 12 and 34 .(Make sure you remove -image from the code you copied )

Zrssfeed
This plugin will read RSS feeds from any Website URL using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling.

In Version1:I have changed it a little to work in the desired way (Added target="new" in all the <a> tags so that when any Item is clicked in the Popup window ,it opens a New Tab rather than in that Popup window itself!).

In Version 2: Same as Version 1 [Note: To change the time interval between Sliding Post ,just open jquery.vticker.js file and change the value of pause variable to x000 ,where x is the number of seconds (Do not remove the Zeros )]

In Version 3: Added '?m=1' tag in the second link tag so that it loads the mobile version of the your Blogs Post in the Small Popup window itself. There is one plus point in it that the Mobile version is Auto Dimensioning so no content will appear out of place in the popup window.

Note:If the mobile version of your blog doesn't work then go to Setting > Email & Mobile and tick the Mobile templates as yes

Generating your .Crx (extension)
Firstly Put all your files in a folder.
Then in Chrome open chrome://extensions/ and then Click on Developer mode > Load unpacked extension.
After you make a change to the extension, just hit the Reload link below it.

After you’re done developing, click Pack extension and a crx file will be created for you. You can serve this file from your site and enable your site’s visitors to install it. I suggest you host it on Google Sites or best on Chrome Web Store (but then you will have to pay one time fee of 5$ )