如何在回调函数中为 chrome 扩展图标设置动画？

Posted 2023-03-05

【中文标题】如何在回调函数中为 chrome 扩展图标设置动画？

【英文标题】：How to animate chrome extension icon in a callback function?

【发布时间】：2011-12-05 13:05:51

【问题描述】：

这是对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()

【问题讨论】：

好改变图标很容易，但“淡入” - 没那么多。你知道如何用纯 javascript 来做吗？

@serg：好的，你能给我一些关于如何改变图标的​​线索吗，说几秒钟，然后回到原来的图标。因为我还不明白我怎么能做到这一点。之后我会尝试褪色。谢谢！

请注意，示例中 setTimeout 内的代码不会延迟。它立即执行，并且在超时后执行该执行的返回

有没有办法用 GIF 做到这一点？

【参考方案1】：

要动态更改图标，您可以调用：

chrome.browserAction.setIcon(path: '/path/img/success_icon.png')

要创建淡入淡出效果并不容易，但是您可以使用<canvas> 元素而不是静态图像来设置图标。然后你可能可以按照你想要的方式为画布设置动画。

查看这篇文章，了解如何将图像加载到画布中并更改其不透明度：

How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

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

【讨论】：

感谢您的回答。我也试过setBadgeText，效果很好。然后，我使用setTimeout 将徽章重置为""，但我无法使setTimeout 延迟足够。我将它设置为10000，但它仍然只是闪烁。我究竟做错了什么。我用代码更新了问题。再次感谢。

对我来说 browserAction 在 chrome 中是未定义的。你能帮忙吗？

【参考方案2】：

我来这里是为了寻找一种方法来吸引对我的浏览器操作扩展的关注...

所以这里有一些方便的代码来闪烁徽章：

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