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

这是关于使用

XMLHttpRequest（）

发布到我的书签应用程序的后续内容。当我收到

状态200 OK

时，我想通过在扩展图标中进行更改来指示请求成功。我创建了另一个带有反向颜色的图标

success\u 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);

更新

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

}

---

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

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

要创建淡入淡出效果并不容易，但可以使用

元素而不是静态图像来设置图标。然后，您可能可以按照您想要的方式设置画布的动画

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

API参考：

要将

setBadgeText

与

setTimeout

一起使用，应执行以下操作：

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

---

我来这里是想寻找一种方法来吸引人们对我的浏览器操作扩展的关注

因此，这里有一些方便的代码来闪烁徽章：

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

---

改变图标很容易，但“淡入”就不那么容易了。你知道用纯javascript怎么做吗？@serg:好的，你能给我一些线索，告诉我如何更改图标，比如说几秒钟，然后返回到原始图标。因为我还不明白我怎么能做到。之后我会试着淡出。谢谢请注意，示例中setTimeout中的代码没有延迟。它会立即执行，并在超时后执行该执行的返回。有没有办法使用GIF执行此操作？谢谢您的回答。我还尝试了

setBadgeText

，效果很好。然后，我使用

setTimeout

将徽章重置为

”

，但我无法使

setTimeout

延迟足够。我将它设置为

10000

，但它仍然闪烁。我做错了什么。我用代码更新了问题。再次感谢。对我来说，浏览器操作在chrome中没有定义。你能帮忙吗？