如何在回调函数中为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
要将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); } }