javascript - How to animate chrome extension icon in a callback function? - Stack Overflow

admin管理员组

文章数量:1353694

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

}

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

}

• javascript
• jquery
• google-chrome-extension
• xmlhttprequest

Share Improve this question Follow edited May 23, 2017 at 11:44 CommunityBot 111 silver badge asked Oct 11, 2011 at 18:18 ZeynelZeynel 13.5k3131 gold badges103103 silver badges148148 bronze badges 4

• Well changing icon is easy but "fade into" - not so much. Do you know how to do it in pure javascript? – serg Commented Oct 11, 2011 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 Commented Oct 11, 2011 at 18:32
• 1 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 Commented Oct 11, 2011 at 20:09
• is there a way to do this with a GIF? – Alexander Mills Commented Jan 9, 2018 at 0:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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);

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

本文标签： javascriptHow to animate chrome extension icon in a callback functionStack Overflow