[英]How to animate chrome extension icon in a callback function?
This is a follow up to my previous question about using XMLHttpRequest()
to post to my bookmarking app. 这是我先前有关使用
XMLHttpRequest()
发布到我的书签应用程序的问题的跟进。 When I receive the status 200 OK
I want to indicate somehow with a change in the extension icon that the request was successful. 当我收到
status 200 OK
我想以某种方式通过扩展图标的更改指示请求成功。 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. 我创建了另一个具有相反颜色的图标
success_icon.png
,我试图使新图标替换原始图标并逐渐淡入原始图标。 I understand that this will be inside my callback function but I don't understand how? 我知道这将在我的回调函数中,但我不知道如何? Here's my
background.html
. 这是我的
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.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);
Update 更新
Code adapted from eduardocereto's answer but setTimeout
is not working properly: 根据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()
}
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. 要创建淡入淡出的效果并不容易,但是可以使用
<canvas>
元素而不是静态图像来设置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? 在绘制画布元素后,如何更改元素的不透明度(alpha,透明度)?
API Reference: http://code.google.com/chrome/extensions/browserAction.html#method-setIcon API参考: http : //code.google.com/chrome/extensions/browserAction.html#method-setIcon
To use the setBadgeText
with setTimeout
you should do this: 要将
setBadgeText
与setTimeout
使用,您应该这样做:
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.