How to animate chrome extension icon in a callback function?

Question

This is a follow up to my previous question about using XMLHttpRequest() to post to my bookmarking app. When I receive the status 200 OK I want to indicate somehow with a change in the extension icon that the request was successful. I created another icon success_icon.png with reverse colors and I am trying to make the new icon replace the original icon and fade into original icon. I understand that this will be inside my callback function but I don't understand how? Here's my background.html . Thanks!

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null, function(tab) {
    tabId = tab.id;
    tabUrl = tab.url
    tabTitle = tab.title

var formData = new FormData();
formData.append("url", tabUrl);
formData.append("title", tabTitle);
formData.append("pitch", "this is a note");

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ting-1.appspot.com/submithandlertest", true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        if (xhr.status == 200)
            console.log("request 200-OK")
        else
        console.log("Error", xhr.statusText);
    }
};        
xhr.send(formData);

Update

Code adapted from eduardocereto's answer but setTimeout is not working properly:

if (xhr.readyState == 4 && xhr.status == 200) {
    console.log("request 200-OK");
    //chrome.browserAction.setIcon({path: '/success_icon.png'});
    chrome.browserAction.setBadgeText ( { text: "done" } );

    function resetBadge() {
        setTimeout (chrome.browserAction.setBadgeText( { text: "" } ), 10000);
    }
    resetBadge()

}

Answer 1

To change the icon dynamically you can call:

chrome.browserAction.setIcon({path: '/path/img/success_icon.png'})

To create the fade effect would not be so easy, but you can use a <canvas> element instead of static image to set the Icon. Then you can probably animate the canvas the way you want.

Checkout this article on how to load an image into the canvas and change it's opacity:

How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

API Reference: http://code.google.com/chrome/extensions/browserAction.html#method-setIcon

To use the setBadgeText with setTimeout you should do this:

chrome.browserAction.setBadgeText ( { text: "done" } );
setTimeout(function () {
    chrome.browserAction.setBadgeText( { text: "" } );
}, 1000);

Answer 2

I got here looking for a way to attract some attention to my browser action extension...

So here's some handy code to flash the badge:

function flashBadge(message, times, interval) {
    flash();
    function flash() {
        setTimeout(function () {
            if (times == 0) {
                chrome.browserAction.setBadgeText({text: message});
                return;
            }
            if (times % 2 == 0) {
                chrome.browserAction.setBadgeText({text: message});
            } else {
                chrome.browserAction.setBadgeText({text: ""});
            }
            times--;
            flash();
        }, interval);
    }
}