Making your own chrome extension for your blogger visitors
In this post, we are going to create a simple extension, which puts a small icon next to Chrome’s address bar, and, when clicked, will fetch any blog or website RSS feed and display a preview of your's or others latest posts,tutorials, article.A preview of how it looks.Fuzionpro extension
CSS
You can create your own css file.This is an example.
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. Simple and easy to use.
Features
.crx is done by opening the extension page (type chrome://extensions/ in the address bar), and clicking Developer mode > Load unpacked extension.. on the page. 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.
Preparing your Package
You need 7 files
Download fiiles
You need 7 files
Download fiiles
- Html file
- style sheet
- 19x19 icon
- 128x128 icon
- Jquery
- Zrssfeed script
- manifest.json file
Let us see each one more detailedly and how to code it
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.
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": "fuzionpro Extension",
"version": "1.0",
"description": "Shows the latest post of fuzionpro blog.",
"icons":{
"128":"icon_128.png"
},
"browser_action": {
"default_icon": "icon.png",
"popup": "fuzionpro.html"
}
}
HTML
You need a html file for the popup and to view the feeds.inorder to extract the feeds two scripts are required
You need a html file for the popup and to view the feeds.inorder to extract the feeds two scripts are required
- jquery 1.4.2
- Zrssfeed
<!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 Tutorials on fuzionpro</h1>
<script type="text/javascript">
$(document).ready(function () {
$('#content').rssfeed('http://fuzionpro.blogspot.com/rss.xml', {
limit: 3
});
});
</script>
<div id="content"></div>
</body>
</html>
CSS
You can create your own css file.This is an example.
*{
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;
}
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. Simple and easy to use.
Features
- Supports Atom 1.0, RSS 2.0, RSS 1.0 & RSS 0.9x
- Specify the number of feeds to return.
- Choose to include header, date and description.
- Specify the title HTML tag.
- Choose to use either a brief or full description (when available).
- Produces all HTML code and style classes.
- Customised error message.
Generating your .Crx(extension)
Put all your files in a folder..crx is done by opening the extension page (type chrome://extensions/ in the address bar), and clicking Developer mode > Load unpacked extension.. on the page. 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.
Comments
Post a Comment