Making a Google Chrome Extension for Twitter

Google Chrome is the most awesome browser. Don't believe me try yourself, click here .

I found about recently about Chrome Extensions. They are small programs that modify the Google Chrome browser, more here .

You can download an extension from https://chrome.google.com/webstore?category=ext  for free.
It is awesome for users, but also for developers.

If you have a website that has some special feature then you can make an extension to allow users to use that feature thus increasing your popularity.

Now there are two methods of making an extension, one easy other a little hard (since I know that you'll go for the easy one, I'll not post it) and second the tricky one (not really).

Step 1: Requirements

First let's start with the requirements.
1) Notepad or Dreamweaver: The one in your computer. Dreamweaver makes it easy for you to make the web-page.
2) Photoshop: You actually just need three same images one of 16x16px, 48x48px and 128x128px, either bmp, jpg, png, gif or ico.
3) Google Chrome: Or else where are you gonna load the extension genius!

Step 2: How Does Extensions Works

Chrome Extensions are basically html pages with which you can provide lots of features to your users with the touch of an icon. They have some restrictions like you can only use html, JavaScript and CSS in these extensions, so you have to be creative.

When you install the extension (how I'll show you later), it creates an icon on the address bar near the wrench icon (all this is written in the code of manifest.json ). Click on that icon and it'll call manifest.json file.

This file is the common calling card (file), so no matter what extension you make the manifest file would remain the same. Glad that is over.

The manifest.json file will then call another html file, this file will contain the coding for your service or feature.

Step 3: Manifest.json

As mentioned earlier manifest.json is a common file in any extension you make.
The manifest.json perform the following tasks:
1) Selects the icons to be shown and show them at their correct locations, including on the address bar near the wrench icon.
2) Calls the html file that contains codes for your service or feature (what the extension actually does).
3) Determines the sites from whom data can be called by the extension.
4) etc....

Making the file
1) Open Notepad and copy paste or type in the following code:
{
"name": "Twitinside",
"version": "1.0",

"description": "A Google Chrome Extension, which allows users to view your Twitter Updates directly on theie Chrome browsers. created and © Copyright by Tanmay Das",
"icons": {
"16": "twitinside_16.png",
"48": "twitinside_48.png",
"128": "twitinside_128.png"
},

"browser_action": {
"default_icon": "twitinside_48.png",
"default_title": "Twitinside for Chrome",
"default_popup": "twitinside.html"
},

"homepage_url": "http://www.tj4119.blogspot.com",
"incognito": "spanning",
"key": "fkpfkaodegmnljjldocbbfeiblhddbhm",
"permissions": [
"http://www.blogger.com/",
"http://www.twitter.com/"
]
}
Save it as manifest.json with the Saved as type: All Files and Encoding: UTF-8

What does the following codes mean
"name": The name of your extension.
"version": Current version of your extension.
"description": Any description you want to add.

"browser_actions":
"default_icon": Icon shown in the address bar.
"default_title": Text shown when the icon is hovered.
"default_popup": File in which your script is running. Manifest just call that file.

"homepage_url": Your website.
"key": You'll get an id when installed. Use the id in the above script.
"permission": Sites from where extension can access data.

Step 4: Html File

The manifest.json calls a html file which contains the scripts to be used by the extension. This script can be anything, the only thing to remember is that the script has to use only html, JavaScript and CSS.

I had an old script that allows users to view their Twitter posts or show them to others. I decided to use that same script to allow users to see my not so recent Twitter posts.

Making the html file
1) Open Dreamweaver or Notepad and copy paste or type the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Twitinside for Chrome</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js”></script>
<script type=”application/javascript”>
$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");
</script>
<style>
body
{
width:300px;
font-family:Arial;
font-size:12px;
}
a
{
color:#33ccff;
}
a:hover
{
color:#000000;
text-decoration:none;
}
h2
{
font-style:italic;
color:#33ccff;
}
</style>
</head>
<body>
<a href="http://www.twitter.com/yourtwitterid " target="_blank" title="Follow the creater of Twitinside @yourtwitterid ">
<img src="twitinside_128.png" border="0" alt="Follow the creater of Twitinside @yourtwitterid " /></a>
<div style="margin-right:0px"><div id="twitter_div">
<h2>Twitter Inside</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/yourtwitterid "></a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/yourtwitterid .json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script></div>
</body>
</html>

Change yourtwitterid to well your Twitter ID and the count=5 to the number of posts you want to show.
Save it as twitter.html (I have used twitter.html because it is used in manifest.json, if you change the file name in manifest.json then name the html file that).

There isn't much to tell you about this script, I got it from somewhere and used it here. You can use your script in this file also.

Step 5: Arranging Everything

Once done, you'll have five files (three image files, manifest.json and twitter.html). Place them in a folder.

Now we shall install the extension, to do this:
1) Click on the wrench icon > Tools > Extensions
2) In Extensions page click on Developer mode
3) Click on the load unpacked extension, select the folder in which your files are located.
4) Done.

Step 6: Packing Extension

You'll will notice that when you download an extension, you'll have only one file with a .crx extension.

So we'll now pack all these image, text and html files to one .crx file.
1) Click on pack Extension button in the Developer mode.
2) Select the root directory (folder in which all your files are kept).
3) Hit OK.
4) A .crx file will be created outside the root folder.

Step 7: Installing the Newly Packed Extension

You can now upload your extension as .crx file on your server or any where else.
Users can download and install them on their Chrome Browser.

To install the packed extension:
1) Drag and Drop the .crx file on the address bar of Chrome.
2) Chrome would ask you if you want to continue to install the extension.
(since you made the extension, then you don't have to worry. Just click on continue.)
3) Chrome will show you the sites from whom data can be accessed (in my case twitter.com and blogger.com)
4) Click on Install.