In my last post we had a functioning Chrome Extensions, that lets you Buzz about the current page you are on. It is pretty simplistic, but a nice example of how easy it is to create a Chrome Extension, but also how to perform some basic interactions with the Buzz API.

In this part of the tutorial, I am going to show you how you can do some cross domain requests and how you can interact with the 'browser_action' (the buttons on the top right). Essentially we are going to add a 'Share count' to the browser_action by making a HTTP request to the following URL: http://www.google.com/buzz/api/buzzThis/buzzCounter, this url will return a simple json object that we can use to get some information about the current page.

Using where we left off in the last tutorial, we will start with the manifest. To be able to do cross-domain requests inside an extension, the extension needs to know the url(s) you will be calling.

{
    "name": "Buzz This",
    "version" : "0.0.0.1",
    "browser_action": {
        "default_icon" : "buzz-little.png",
        "default_title" : "Post to Google Buzz" 
    },
    "background_page": "background.html",
    "permissions": [
        "tabs"
        "http://www.google.com/buzz/api/buzzThis/buzzCounter"
        ]
}

A single item has been added to the 'permissions' array. That item is the url of the buzzCounter. We can now perform XMLHttpRequest's against that URL now. Awesome!

Lets add the code in to the background.html file so that we can make the requests to get the Buzz count. It won't be too complex, essentially we will detect when a user changes the current page they are viewing and make an request to buzz to get the URL count. Once we have that URL count, we will set some text on the browser_action so it is visible to the user.

First we shall listen the events that Chrome triggers when the user changes tab (onSelectionChanged) and when the user navigates to a new page (onUpdated).

chrome.tabs.onSelectionChanged.addListener(getNewInfo);
chrome.tabs.onUpdated.addListener(getNewInfo);

The getNewInfo is a function, so let us define it.

function getNewInfo(t, info) {
    chrome.tabs.get(t, function(tab) { 
        var url = "http://www.google.com/buzz/api/buzzThis/buzzCounter"            
        url += "?url=" +encodeURI(tab.url);
    <span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();
    xhr.<span class="function">onreadystatechange</span> = <span class="keyword">function</span>() {
        <span class="keyword">if</span>(xhr.readyState == <span class="integer">4</span> &amp;&amp; xhr.status == <span class="integer">200</span>) {
            <span class="keyword">var</span> response = xhr.responseText;
            <span class="keyword">var</span> matches = <span class="regexp"><span class="delimiter">/</span><span class="content">google_buzz_set_count</span><span class="content">\(</span><span class="content">(.+?)</span><span class="content">\)</span><span class="content">;</span><span class="delimiter">/</span></span>;
            <span class="keyword">var</span> results = response.match(matches);
            <span class="keyword">if</span>(results) {
                <span class="keyword">var</span> count = google_buzz_set_count(tab, JSON.parse(results[<span class="integer">1</span>]));
            }
        }
    }; 
    xhr.open(<span class="string"><span class="delimiter">&quot;</span><span class="content">GET</span><span class="delimiter">&quot;</span></span>, url);
    xhr.send();
});

}
function google_buzz_set_count(tab, data) {
if(data[tab.url] != undefined && data[tab.url] != "undefined") {
chrome.browserAction.setBadgeText({ "text" : data[tab.url] + "", "tabId" :tab.id });
}
}

That is actually quite a lot of code, but it is pretty simple. Everytime the user changes tab or url, getNewInfo is called. We don't have access to the URL of the tab, so we have to first call 'chrome.tabs.get()' to obtain more information. After this, everything is pretty standard, we create an XMLHttpRequest and call our url.

The response returned from this API is JSONP, which we can't load directly so, the code simply strips out the data that we need and then performs a JSON.parse on the value. Once we have this value, we simply call the 'google_buzz_set_count' method.

The google_buzz_set_count function is very simple. All it does is call 'chrome.browserAction.setBadgeText'. setBadgeText is a really nice method because it allows you to have a very subtle way to communicate with your users.

And that is it. This was the original extension that I published, however recently I decided to integrate Content Menu's to allow users to have more control over what gets posted to Buzz, and this is what we will cover in the next (and final) tutorial.

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.

I'm trialing a newsletter, you can subscribe below (thank you!)

Enter your email

Book a consultation