How to create a simple Google chrome extension
This tutorial helps you to go through the easiest way of creating a simple extension for Google’s newly launched browser “Chrome”. Basically this browser extension adds an icon to Google Chrome Toolbar which when clicked will displays the recent tweets of a Twitter account that you specify: The extension looks like this

Step1: Basic Requirement (Download Google Chrome Beta)
To develop extensions for Google Chrome you need to get on an early access release channel of Google Chrome. The normal Stable Channel Release of Google Chrome doesn’t yet support extensions (Let’s hope it for the next release)
Download for Windows or Linux: Beta channel
Download for Mac: Dev channel
Step2: Creating and Loading the Extension
- Create a folder with your extension name.
- Inside the folder create a file with the name “manifest.json” and add this code in it
{
“name”: “Schogini’s Chrome Extension”,
“version”: “1.0″,
“description”: “Learn How to make Extension for chrome.”,
“browser_action”: {
“default_icon”: “icon.png”
}
}
- Create an icon with the name given in the code “icon.png”, and save it in the same folder
- Load the extension
Click Tools Icon
and select “Extensions” In the page you can see Developer mode which will come up with a + icon ![]()
Click on it to open Click the “Load Unpacked Extension Button” and select the folder you created for your extension and click ok
If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

Now let’s start with the triggering of button, add this code to the “manifest.json” file.
This code just brings up the popup window when the icon is clicked.
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
Step3: Creating The pop up window
In your extension folder create the file named “popup.html” Here we write the javascript code to display recent 5 tweets from your twitter account Add this code to the file In the second script line in this code, instead of “schogini.json” change it to your twitter name Like this “twittername.json” And the “count=5” mentions the number of tweets which will be displayed in the popup.
<html>
<head>
<style type=”text/css”>
<!– #twitter_update_list li a { font-size:100% !important; font-size:13px !important; } –>
</style>
</head>
<body>
<div><ul id=”twitter_update_list”> <li>Loading Tweets..</li> </ul></div>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/schogini.json?callback=twitterCallback2&count=5″></script>
</body>
</html>
Now come back to the browser select the extension manager and click the Reload button to load the changes to reflect.

If you see the popup with the tweets. !!!!!! Hooooray you did it





That is extremely interested in studying particularly come underneath, thank you for the speak, I wish you