Tag Archives: json

Write a simple Google Chrome extension

An extension is a small piece of programm which add features to your web browser. In Google Chrome we will simply use HTML/CSS & Javascript to build our own extention.

The first step to build your extension is to declare a manifest.json file. JSON is a simple data exchange format (you can see a JSON file like a XML file if you want). This manifest.json file contains information about our extension: its name, description, or version. But, more importantly it will declare which libraries/api we will use and how we want to display it into the browser.

In this article we will create a simple extension to display the tweets from someone, lets started with the manifest.json file:

{
	"name": "Chrome Tweets",
	"version": "1.0",
 
	"description": "Displays tweets of someone.",
	"icons": { "128": "icon.png" },
 
	"browser_action": {
		"default_icon": "icon.png",
		"default_title": "Chrome Tweets",
		"popup": "index.html"
	},
 
	"permissions": [
		"http://twitter.com/*"
	]
}

Most of those declarations are easy to understand. Look more precisely the brower_action and the permissions blocks:

  • Our extension will be a browser action which means we want it to be available in the browser and not in a webpage (for instance subscribe to a rss feed is a page action, check regularly your gmail account is a browser action). We define an icon for our extension, and we also set the page to open when the user will click on our icon.
  • Then we have to declare permissions. It this example we will need the twitter api.

Once you have done this manifest.json file you have all you need to deploy your extension, the rest is only html/css & JavaScript like you do to develop a web site.

Now you have got to load your extension, to do that just go to the extensions management page: chrome://extensions/, enable the developer mode and load an unpacked extension.

We will see how to interact with the twitter API to retrieve all the tweets from someone and we will use a simple list template to display those tweets. To see where we are going you can take a look at the final result:

The HTML page of our extension

<html>
	<head>
		<script src="tweets.js" type="text/javascript"></script>
		<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
    <body>
        <h1 id="mainTitle">Chrome Tweets</h1>
		<div id="loader"></div>
		<div id="profile">
			<img />
			<p></p>
		</div>
		<div id="tweets">
			<ul id="timeline" />
		</div>
 
		<ul id="template">
			<li>
				<div class="text">
					<span></span>
					<a></a>
				</div>
			</li>
		</ul>
    </body>
</html>

You can easily understand this code when you compare it with the preview. The main code will be in JavaScript, if you want you can use a library like jquery to work with JSON object faster, in this example I have done it without any library.

var timeline;
var author;
var image;
 
var template;
var content;
var link;
 
var req;
var tweets;
 
onload = setTimeout(init, 0);
 
function init() {
	displayLoader(true);
 
	/* Retrieve various part of the page */
	timeline = document.getElementById('timeline');
	template = xpath('//ul[@id="template"]/li', document);
	author   = xpath('//div[@id="profile"]/p', document);
	image    = xpath('//div[@id="profile"]/img', document);
	content  = xpath('//div[@class="text"]/span', template);
	link     = xpath('//div[@class="text"]/a', template);
 
	/* Send the request */
	req = new XMLHttpRequest();
	req.open('GET', 'http://twitter.com/statuses/user_timeline/flhacqueba.json');
	req.onload = process;
	req.send();
}
 
function process() {
	var res = JSON.parse(req.responseText);
	tweets = res.concat(tweets);
	update();
}
 
function update() {
	displayLoader(false);
 
	var user;
	var item;
 
	for(var i in tweets) {
		user = tweets[i].user;
 
		/* Profile : only on the first tweet to fill the profile div */
		if (i == 0) {
			author.innerHTML = user.screen_name;
			image.src = user.profile_image_url;
			image.alt = user.name;
		}
 
		/* Add a tweet */
		content.innerHTML = tweets[i].text;
		item = template.cloneNode(true);
		timeline.appendChild(item);
	}
}
 
function xpath(expression, node) {
	return document.evaluate(expression, node).iterateNext();
}
 
function displayLoader(bool) {
	var loader = document.getElementById('loader');
	if (bool) {
		document.getElementById('tweets').style.display = 'none';
		loader.innerHTML = '<img src="ajax-loader.gif" alt="loading..." />';
	}
	else {
		document.getElementById('tweets').style.display = 'block';
		loader.innerHTML = '';
	}
}

As you can see, this is a simple Javascript code using an XmlHttpRequest object. Most of the hard work is done by the Twitter API.

First of all we initiated the request to retrieve the tweets, once twitter gave us our answer (a JSON file) we parse it and generate our list item.

Furthermore you can add more features: add an input box to give the user the ability to choose the tweets to get, get your friends list tweets or add a text-area to add a new tweet to your account. To do that you will have to use OAuth, check out the Twitter API documentation to get more info on this subject.