Google Chrome extension to submit to Google Buzz

This article is a good place to start if you want to know the basics of creating a Chrome browser extension. This is largely because at a minimum this article only needs just 2 code files and an image icon to run.

Google Buzz is a fairly new service from Google and is set to take on Facebook and Twitter. Google Buzz lets you start conversations about the things you find interesting. Share updates, photos, videos and more with your friends.

How to create Google Buzz Chrome Extensions?

– Download the latest version of Google Chrome ideally version 4 or above
– Create two files (manifest.json and background.html) as shown below
– Load your unpacked extension from the folder using Google Chrome, the location is where the above two files are located.
– You can create a packed extension using Google Chrome.

Manifest file (manifest.json)

The manifest file is in JSON and is a compulsory requirement. A few key things to note are the following:
– Permissions are given to access the tabs alone to get the title and URL. We don’t need permissions to any other areas.
– The background.html file where all the work will be done is set.

{
"name": "Submit to Google Buzz!",
"version": "1.0",
"description": "Share the website you visit to Google Buzz.",
"browser_action": {
"default_icon": "buzzlogo.png",
"default_title": "Submit to Google Buzz!"
},
"permissions": [
"tabs"
],
"icons": {
"128": "128buzz.jpg",
"48":  "48buzz.jpg"
},
"background_page": "background.html"
}

Background.html (To display the popup)

The most important item here is this single line of code chrome.browserAction.onClicked.addListener, basically, this is the function that will be called when the icon is clicked.


<html>
<head>
<script>
function openAddWindow(tabId, tabLink, tabURL, tabTitle)
{
var gwin = window.open("http://www.google.com/reader/link?url=" + tabURL + "&title=" + encodeURIComponent(tabTitle),  "myWindow" ,  "status = 1, height = 300, width = 550, resizable = 1" );
//centre it a bit

gwin.moveTo(40, 96);
gwin.focus();
}
// Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
openAddWindow(tab.id, "", tab.url, tab.title);
});
</script>
</head>
</html>

To install the chrome plugin for Google Buzz go here. There are only two code files as the above and about 3 images. One to be shown on Google Chrome and 2 other images that are to be used as icons. You can use the above logic to build submit buttons to digg, reddit, facebook, etc and a whole lot of different things.

Get the full source code to the above here and go to the above install link if you just want to play with it or leave comments.