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()

}

Well changing icon is easy but "fade into" - not so much. Do you know how to do it in pure javascript? — serg, Oct 11 '11 at 18:24
@serg: ok, can you give me some clues about how I can change the icon, say for a few seconds, and then go back to the original icon. Because I don't yet understand how I can do that. I'll try fading after that. Thanks! — Zeynel, Oct 11 '11 at 18:32
Note that the code inside the setTimeout in your example is not delayed. It's executed right away and the return of that execution is executed after the timeout — Eduardo, Oct 11 '11 at 20:09

score 7 · Accepted Answer · edited May 23 '17 at 12:32

7

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);

edited May 23 '17 at 12:32

Community

1
1

answered Oct 11 '11 at 18:54

Eduardo

22,574
11
76
94

Thanks for the answer. I also tried `setBadgeText` and that works fine. Then, I use `setTimeout` to reset the Badge to `""` but I couldn't make `setTimeout` delay enough. I have it set to `10000` and still it just blinks. What am I doing wrong. I updated the question with the code. Thanks again. – Zeynel Oct 11 '11 at 19:57
For me browserAction is undefined in chrome. Can you please help ? – Adil Malik Sep 15 '12 at 14:55

score 1 · Answer 2 · answered Aug 14 '16 at 14:44

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);
    }
}

How to animate chrome extension icon in a callback function?

2 Answers2

Linked