Comment animer l'icône d'extension chrome dans une fonction de rappel?

Question

Ceci est une suite à my previous question à propos de l'utilisation de XMLHttpRequest() pour publier sur mon application de bookmarking. Quand je reçois le status 200 OK je veux indiquer d'une manière ou d'une autre avec un changement dans l'icône d'extension que la demande a été réussie. J'ai créé une autre icône success_icon.png avec des couleurs inverses et j'essaye de faire la nouvelle icône remplace l'icône originale et s'estompe dans l'icône originale. Je comprends que ce sera dans ma fonction de rappel mais je ne comprends pas comment? Voici mon background.html. Merci!

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

Mise à jour

code adapté de eduardocereto's answer mais setTimeout ne fonctionne pas correctement:

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

} 

Answer 1

Pour changer l'icône que vous pouvez appeler dynamiquement:

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

Pour créer l'effet de fondu ne serait pas si facile, mais vous pouvez utiliser un élément <canvas> au lieu de l'image statique pour définir l'icône. Ensuite, vous pouvez probablement animer la toile comme vous le souhaitez.

Commander cet article sur la façon de charger une image dans la toile et changer son opacité:

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

API Référence: http://code.google.com/chrome/extensions/browserAction.html#method-setIcon

Pour utiliser le setBadgeText avec setTimeout vous devriez faire ceci:

chrome.browserAction.setBadgeText ({ text: "done" }); 
setTimeout(function() { 
    chrome.browserAction.setBadgeText({ text: "" }); 
}, 1000); 

Answer 2

Je suis arrivé ici oking un moyen d'attirer une certaine attention à mon extension d'action du navigateur ...

Alors, voici un code pratique pour flasher le 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); 
    } 
}