如何在回调函数中动画Chrome扩展图标？ [英] How to animate chrome extension icon in a callback function?

问题描述

这是后续 XMLHttpRequest（）发布到我的书签应用的问题。当我收到 status 200 OK 时，我想以某种方式指出请求成功的扩展名图标的变化。我用反向颜色创建了另一个图标 success_icon.png ，我试图让新图标替换原始图标并淡入原始图标。我知道这将在我的回调函数中，但我不明白如何？这是我的 background.html 。

This is a follow up to my previous question about using XMLHttpRequest() to post to my bookmarking app. When I receive the status 200 OK I want to indicate somehow with a change in the extension icon that the request was successful. 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. I understand that this will be inside my callback function but I don't understand how? Here's my 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);

更新

从

Code adapted from eduardocereto's answer but setTimeout is not working properly:

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

创建淡入淡出效果不会非常简单，但您可以使用< canvas> 元素来代替静态图片来设置图标。然后你可以按你想要的方式动画画布。

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. 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:

如何在canvas元素绘制后改变元素的不透明度（alpha，transparent）？

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

这篇关于如何在回调函数中动画Chrome扩展图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！