作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是对 my previous 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's answer但是 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 并更改其不透明度的文章:
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);
关于javascript - 如何在回调函数中为 chrome 扩展图标设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7730577/
我是一名优秀的程序员,十分优秀!