如何在回调函数中为 chrome 扩展图标设置动画？

Question

这是 我之前的问题是关于使用 XMLHttpRequest() 发布到我的书签应用程序。当我收到 status 200 OK 时，我想通过扩展图标的更改来表明请求已成功。我创建了另一个带有反色的图标 success_icon.png ，我试图让新图标替换原始图标并淡入原始图标。我知道这将在我的回调函数内，但我不明白如何？这是我的 background.html。谢谢！

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

更新

代码改编自eduardocereto 的回答，但 setTimeout 无法正常工作：

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

要动态更改图标，您可以调用：

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

创建淡入淡出效果并不那么容易，但您可以使用 元素而不是静态图像来设置图标。然后您就可以按照您想要的方式为画布设置动画。

查看这篇文章，了解如何将图像加载到画布中并更改其不透明度：

如何在绘制画布元素后更改元素的不透明度（alpha、透明度）？

API 参考：
http://code.google.com/chrome/extensions/browserAction。 html#method-setIcon

要将 setBadgeText 与 setTimeout 一起使用，您应该执行以下操作：

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

Answer 2

我来到这里寻找一种方法来吸引对我的浏览器操作扩展的关注...

所以这里有一些方便的代码来闪烁徽章：

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