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

这是我之前关于使用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() } 

要动态更改图标,您可以调用:

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

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

查看本文,了解如何将图像加载到canvas中并更改其不透明度:

如何在绘制canvas元素后更改元素的不透明度(alpha,透明度)?

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

要将setBadgeTextsetTimeout一起使用,您应该这样做:

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