How to Create Your First Google Chrome Extension ~ Web Speaks

This time I have created my first Google Chrome Extension - 'TwitFinder'. TwitFinder is a simple extension that allows you to retrieve the twitter profile information and all tweets posted by your friends just by typing in their username. So you need not open twitter.com each time you want to check out the new tweets of your friends. The main objective is to learn basics of How to create your first Chrome extension. And believe me, its really easy. Now I will tell you step by step how to create your first Google Chrome extension.
Extensions in Google Chrome are basically webpages. You have JavaScript files, stylesheets and images. You can even use JavaScript libraries like jQuery.
Download zip file Download Extension

The extensions are, however, treated a bit differently than your regular webpage, which is displayed in the browser. You can have access to all the opened tabs, to the user’s browsing history, you can manipulate all the pages that are opened, send AJAX requests to any website and much more.
You also have the benefit (or the limitation) that your extension runs only on one browser. You can forget all compatibility issues and embrace Google Chrome’s hot new HTML5 features.

Developing extensions

Extension are packed in a .crx file (are named zip file) but during development, you can map your working folder as an extension. This way you can quickly change and deploy code without the need of repackaging.
This is done by opening the extension page (type chrome://extensions/ in the address bar, or click Wrench icon > Extensions), 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.
Google Chrome is by far the easiest browser to make extensions for, as you will see from the steps below.

Create and load an extension

In this section, you'll write an extension that adds a browser action to the toolbar of Google Chrome.
1. Create a folder somewhere on your computer to contain your extension's code.
2. Inside your extension's folder, create a text file called manifest.json, and put this in it:

{
 "name": "TwitFinder",
 "version": "1.0",
 "description": "Find all tweets of your friends just by typing in their username.",
 "browser_action":{
  "default_icon": "twitter.png",
  "default_title":"TwitFinder by WebSpeaks.in",
  "popup": "tweet.html" //Tell chrome that our extension is going to show a popup
 },
 "icons":{
  "128":"twitter-128.png" //The icon to be shown in the list of extensions.
 },
 "permissions": [
  "http://*.twitter.com/",
  "https://*.googleapis.com/"
 ]
}

3. Copy the icons (twitter.png and twitter-128.png) to the same folder.
4.Load the extension.

Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder 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.

5. Now create a file tweet.html in the same directory with following contents (keep all the contents in tweet.html):

HTML Markup:

<html>
<head>
</head>
<body>
<div class="main">
<form id="twitform" onsubmit="return false;">Enter your Twitter Username : <input type="text" name="user" id="uname"><input type="button" value="Get Profile" id="tweet_btn" /></form>
<div id="timeline"></div>
<div id="infodiv">
 <h2>Additional Info:</h2>
 <ul id="info">
  <li>Name : <span id="twit_name"></span></li>
  <li>Location : <span id="twit_loc"></span></li>
  <li>Total Friends : <span id="twit_frnd"></span></li>
  <li>URL : <span id="twit_url"></span></li>
  <li>Account Created at : <span id="twit_created"></span></li>
  <li>Followers : <span id="twit_flwr"></span></li>
 </ul>
</div>
</div>
</body>
</html>

jQuery Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

/*********************************************************************/
/**The Twit jQuery plugin by Yusuke Horie to show the recent tweets**/
/*********************************************************************/
(function(jQuery){var _i=0;jQuery.fn.twit=function(user,options){if(typeof user!='string')return this;var
opts=jQuery.extend({},jQuery.fn.twit.defaults,options),c=jQuery.isFunction(opts.callback)?opts.callback:_callback,url='http://twitter.com/statuses/user_timeline/'+user+'.json',params={};opts.user=user;params.count=opts.count;return this.each(function(i,e){var $e=$(e);if(!$e.hasClass('twit'))$e.addClass('twit');jQuery.ajax({url:url,data:params,dataType:'jsonp',success:function(o){c.apply(this,[(o.results)?o.results:o,e,opts]);}});});};jQuery.fn.twit.defaults={user:null,callback:null,icon:true,username:true,text:true,count:200,limit:7,label:'Twitter',title:''};var _callback=function(o,e,opts){var $this=$(e);if(!o||o.length==0||$this.length==0)return false;$this.data('_inc',1);_i++;var username=o[0].user.screen_name,icon=o[0].user.profile_image_url;var h='<div class="twitHeader">'+' <span class="twitLabel">'+opts.label+'</span>  '+' <span class="twitTitle">'+opts.title+'</span>'+'</div>';if(opts.icon||opts.username){h+='<div class="twitUser">';if(opts.icon)
h+=' <a href="http://twitter.com/'+username+'/">'+'  <img src="'+icon+'" alt="'+username+'" title="'+username+'" style="vertical-align:middle;" />'+' </a>  ';if(opts.username)
h+='<a href="http://twitter.com/'+username+'/">'+username+'</a>';h+='</div>';}
h+='<ul class="twitBody" id="twitList'+_i+'">'+_build(o,$this,opts)+'</ul>';$this.html(h);$('a.twitEntryShow','#twitList'+_i).live('click',function(e){e.preventDefault();var $t=$(this);$t.parent().fadeOut(400,function(){var i=$this.data('_inc');i++;$this.data('_inc',i);if($t.hasClass('twitEntryAll')){$t.die('click');var start=(i*opts.limit)-opts.limit;$(this).after(_build(o,$this,opts,start,o.length)).remove();}else{$(this).after(_build(o,$this,opts)).remove();}});});};var _build=function(o,$t,opts,s,e){var
h='',inc=$t.data('_inc'),start=s||(inc*opts.limit)-opts.limit,end=e||((o.length>start+opts.limit)?start+opts.limit:o.length);for(var i=start;i<end;i++){var
t=o[i],username=t.user.screen_name,icon=t.user.profile_image_url;h+='<li class="twitEntry">';if(opts.text){var text=t.text.replace(/(https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/,function(u){var shortUrl=(u.length>30)?u.substr(0,30)+'...':u;return'<a href="'+u+'">'+shortUrl+'</a>';}).replace(/@([a-zA-Z0-9_]+)/g,'@<a href="http://twitter.com/$1">$1</a>').replace(/(?:^|\s)#([^\s\.\+:!]+)/g,function(a,u){return' <a href="http://twitter.com/search?q='+encodeURIComponent(u)+'">#'+u+'</a>';});h+=' <span>'+text+'</span>';}
h+='</li>';}
if(o.length>end){h+='<li class="twitNavi">'+'<a href="#" class="twitEntryShow">more</a>  / ';if(o.length>opts.limit)
h+='<a href="#" class="twitEntryShow twitEntryAll">all</a>';h+='</li>';}
return h;};})(jQuery);
</script>

<script type="text/javascript">

/**Code to fetch and display the tweets and profile information on the page**/

$(function()
{
 $('#uname').focus();
 function populate(){
  twitterusername = $('#uname').val();
  if(twitterusername != ''){
   $('#tweet_btn').attr('value','Please wait...');
   $('#timeline').twit(twitterusername); //Call the Twit plugin to fetch recent tweets
   $('#timeline').hide();
   $.getJSON('http://twitter.com/users/'+twitterusername+'.json?callback=?', //Retrieve user data from Twitter using the JSON
   function(data){
 /**Display the user data**/
    $('#tweet_btn').attr('value','Get Profile');
    $('.main').css({'background-image':'url('+data.profile_background_image_url+')'});
    $('#twit_uname').text(data.screen_name);
    $('#twit_loc').text(data.location);
    $('#twit_frnd').text(data.friends_count);
    $('#twit_url').text(data.url);
    $('#twit_created').text(data.created_at);
    $('#twit_name').text(data.name);
    $('#twit_flwr').text(data.followers_count);
    $('ul').css({'color':'#'+data.profile_text_color});
    $('#timeline').show();
    $('div#infodiv').show();
   });
  }
 }
 $('#tweet_btn').click(function(){
  populate();
 });
 $('#twitform').submit(function(){
  populate();
 });
})
</script>

CSS Code:

/**CSS Code to beautify our extension**/
body{
 font-size:10px;
 overflow-x:hidden;
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));
 text-shadow:1px 1px 0 white;
}
div#infodiv{display:none;}
ul#info{padding:10px;margin:0;}
ul#info li{
 border-bottom:1px dashed #666666;
 margin-bottom:10px;
 list-style-type:none;
}
div.main{
 margin:auto;
 border:1px solid #CC0;
 float:none;
 width:520px;
 padding:10px;
 font-family:Verdana, Geneva, sans-serif;
 color:#03497e;
}
a{
 color:#336633;
 text-decoration:none;
 font:italic 1em Georgia, Times, serif;
}
h2{
 background-color: #FFFFFF;
 color:#33CCFF;
 font-size:12px;
 padding:5px 0 5px 5px;
 width:100%;
}
#tweet_btn{
 background-color:#cbf2ff;
 border:1px solid #33CCFF;
 color:#336633;
 font-weight:bold;
 -webkit-border-radius:4px;
}
#uname{
 background-color:#BDD7E3;
 border:1px solid #33CCFF;
 color:#0596D5;
 margin-right:10px;
}

/** Twit **/
.twit{
 background-color: #cbf2ff;
 padding: 7px;
 display:none;
}
.twitHeader {
  background-color: #fff;
  margin: 0;
  padding: 7px 7px 0 7px;
}
.twitLabel {
  font-weight: bold;
  font-size: 22px;
  color: #33ccff;
}
.twitTitle {
  font-weight: bold;
}
.twitUser {
  background-color: #fff;
  border-bottom: none;
  font-size:160%;
  padding: 7px;
}
.twitUser a{
  color:#222;
  font-weight:bold;
  text-decoration: none;
}
.twitBody {
  background-color: #ffffff;
  padding: 0 7px 7px 7px;
  margin: 0;
  list-style: none;
}
.twitEntry {
  padding: 6px 8px;
  margin: 0;
  border-bottom: dashed 1px #ccc;
  height: auto !important;
}
.twitNavi {
  clear: both;
  text-align: center;
  margin-top: 0;
  padding: 5px;
  background-color: #ffffff;
}

And now we are done with our first Google Chrome extension!

How to Create Your First Google Chrome Extension

1 comments: