这是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()
}
答案 0 :(得分:6)
要动态更改图标,您可以致电:
chrome.browserAction.setIcon({path: '/path/img/success_icon.png'})
创建淡入淡出效果并不容易,但您可以使用<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);
答案 1 :(得分:0)
我来到这里寻找一种方法来吸引我的浏览器动作扩展...
所以这里有一些方便的代码来刷徽章:
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);
}
}