In this post I want to explain how to create a simple chrome extension for your blog or website. Chrome browser growing very faster almost occupied 35 percentage market. It’s very simple just writing few lines of JSON code. Try this and launch an extension at Chrome web store, it's free.
The tutorial contains a folder called MyChoromeApp with support files.
manifest.json
popup.html
icon.png
support files // js and css files
popup.html
icon.png
support files // js and css files
Creating Popup Extension
Try 9lessons.info popup chrome extension click here to install.
Download Script 
Live Demomanifest.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" ]
}
"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>
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 Demomanifest.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" ]
}
"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
}
{
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
}
Hi Srinu,
ReplyDeleteIs it free? When i am going to develop one extension it is asking for $5 for the registration.
@Anil
ReplyDeleteVery your domain at google webmaster tools
thx for this great tut. I work now a little bit on my extension .D
ReplyDeleteThank you for this simple tutorial!
ReplyDeleteDidn't think that it's so easy.
Hi Srinu,
ReplyDeleteIts not free? When i am going to upload one extension it is asking for $5 for the registration. My domain is already verified. Its requiring google analytics code, I entered my analytics id also. Do you paid any amount to google or not?
@Sandeep
ReplyDeleteI have uploaded two extensions directly without any payment.
All right I'm following you! :)
ReplyDeleteHello Srinivas, great article.
ReplyDeleteI'm with the same problem as Anil Kumar
how to create JSON file
ReplyDeleteHi Srinu,
ReplyDeleteThank you for this simple tutorial!
GOOD LOCK :)
@ Bytekiss, open Notepad input code, Save As and in the 'File Name:' field type "manifest.json". Make sure its NOT manifest.json.txt. Thats it.
ReplyDeleteThe links in the popup are not working.. but it is working when the popup.html is opened separately in browser.. What might be the problem??
ReplyDeleteSimple and easy to understand. Should give out a try soon :) Found a too simple one earlier here -http://nithinbekal.com/2010/how-to-create-a-google-chrome-extension/
ReplyDeletethanks guys , helped me alot
ReplyDeleteAs Vasanth said, the links in the pop up don't work! What's the possible solution?
ReplyDeletewell can you please help me out :
ReplyDeleteit is that I've just started creating an extension
I just want to show a number in the badge of the extension
the number should be incremented as a user clicks onto any part of the browser window ie (1..2.3 and so on)
I know the setBadgeText() of chrome.browserAction
all i want to know is that how should I fire this from my background file of the extension
I have to build an extension for my website which updates people about new articles. How should I proceed as I have no prior experience!
ReplyDeleteHello, how to create an extension for firefox 5?
ReplyDeleteI want to create an extension the same as your tutorial with specific urls for my users
Thanks for the quick and easy tutorial, but it's not loading the RSS feed.
ReplyDeleteFailed to load resource
Uncaught TypeError: Object [object Object] has no method 'PaRSS'
Thanks for the tutorial. Which api did you develop on?
ReplyDeletedear srinu,
ReplyDeleteplease tell how to load script of a js file from other file... bcoz in the plugin i want to develop code is really big, i want to modularise the code by putting them in different files..
When I click on the Feed on my Extension, the link do not open...
ReplyDeleteI have successfully created an chrome extension for my blog but while uploading it to chrome extension it is saying "An error occurred: Manifest version 1 is unsupported. Please upgrade to manifest version 2."
ReplyDeleteCan you help me out ?
Great, create an application for Google Chrome is very easy (much easier than Mozilla Firefox).
ReplyDeleteThanks Srinivas Tamada!
can u share installable for refreshing chrome popup please, thx in anticipation
ReplyDeleteI want o make a extension which is just like notepad,who saves record,any idea about that??
ReplyDeleteI want to send data to mysql table how can i do that?
ReplyDeletehow to send form data from extension to mysql table i used ajax-php but didn't work?
ReplyDeleteSrinivas can you develop image uploader chrome extension to img.dhirls.net
ReplyDeleteHi Nice article but its not working.
ReplyDeleteI tried but didn't work.
It does not populate the feeds
hey there,
ReplyDeleteThanks for the tutorial on how to create the extension. I'm quite new to javascript programming and i was wondering if its possible to add graphics in the extension ... I mean when the user clicks the extension it should show graphics ? (i'm trying to group tabs based on a common field)
Thanks again,
Sneha
When I Load Unpacked Extension it gives error..
ReplyDeleteCould not load extension. The manifest_version Key must be present and set to 2(without quots).