How to Create a Chrome Extension.
Wall Script
Follow Me:
Monday, March 28, 2011

How to Create a Chrome Extension.

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.

Making Chrome Extensions

The tutorial contains a folder called MyChoromeApp with support files.
manifest.json
popup.html
icon.png
support files // js and css files

Creating Popup Extension
Try 9lessons.info popup chrome extension click here to install.
Chrome Extensions 9lessons

Download Script     Live Demo

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
Chrome Extensions 9lessons

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.
Chrome Extensions 9lessons

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
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


32 comments:

  1. Hi Srinu,

    Is it free? When i am going to develop one extension it is asking for $5 for the registration.

    ReplyDelete
  2. @Anil

    Very your domain at google webmaster tools

    ReplyDelete
  3. thx for this great tut. I work now a little bit on my extension .D

    ReplyDelete
  4. Thank you for this simple tutorial!
    Didn't think that it's so easy.

    ReplyDelete
  5. Hi Srinu,

    Its 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?

    ReplyDelete
  6. @Sandeep

    I have uploaded two extensions directly without any payment.

    ReplyDelete
  7. Hello Srinivas, great article.
    I'm with the same problem as Anil Kumar

    ReplyDelete
  8. Hi Srinu,
    Thank you for this simple tutorial!
    GOOD LOCK :)

    ReplyDelete
  9. @ 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.

    ReplyDelete
  10. The 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??

    ReplyDelete
  11. Simple 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/

    ReplyDelete
  12. thanks guys , helped me alot

    ReplyDelete
  13. As Vasanth said, the links in the pop up don't work! What's the possible solution?

    ReplyDelete
  14. well can you please help me out :
    it 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

    ReplyDelete
  15. 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!

    ReplyDelete
  16. Hello, how to create an extension for firefox 5?
    I want to create an extension the same as your tutorial with specific urls for my users

    ReplyDelete
  17. Thanks for the quick and easy tutorial, but it's not loading the RSS feed.

    Failed to load resource
    Uncaught TypeError: Object [object Object] has no method 'PaRSS'

    ReplyDelete
  18. Thanks for the tutorial. Which api did you develop on?

    ReplyDelete
  19. dear srinu,
    please 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..

    ReplyDelete
  20. When I click on the Feed on my Extension, the link do not open...

    ReplyDelete
  21. I 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."

    Can you help me out ?

    ReplyDelete
  22. Great, create an application for Google Chrome is very easy (much easier than Mozilla Firefox).

    Thanks Srinivas Tamada!

    ReplyDelete
  23. can u share installable for refreshing chrome popup please, thx in anticipation

    ReplyDelete
  24. I want o make a extension which is just like notepad,who saves record,any idea about that??

    ReplyDelete
  25. I want to send data to mysql table how can i do that?

    ReplyDelete
  26. how to send form data from extension to mysql table i used ajax-php but didn't work?

    ReplyDelete
  27. Srinivas can you develop image uploader chrome extension to img.dhirls.net

    ReplyDelete
  28. Hi Nice article but its not working.
    I tried but didn't work.
    It does not populate the feeds

    ReplyDelete
  29. hey there,
    Thanks 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

    ReplyDelete
  30. When I Load Unpacked Extension it gives error..
    Could not load extension. The manifest_version Key must be present and set to 2(without quots).

    ReplyDelete

Make in India