html file

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&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.