Come animare l’icona di estensione di Chrome in una funzione di callback?

Questo è un seguito alla mia precedente domanda sull’uso di XMLHttpRequest() per postare nella mia app di bookmarking. Quando ricevo lo status 200 OK voglio indicare in qualche modo con una modifica nell’icona dell’estensione che la richiesta ha avuto successo. Ho creato un’altra icona success_icon.png con colors invertiti e sto cercando di fare in modo che la nuova icona sostituisca l’icona originale e sbiadisca nell’icona originale. Capisco che questo sarà all’interno della mia funzione di callback ma non capisco come? Ecco il mio background.html . Grazie!

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

Aggiornare

Codice adattato dalla risposta di eduardocereto ma setTimeout non funziona correttamente:

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

Per cambiare dynamicmente l’icona puoi chiamare:

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

Creare l’effetto di dissolvenza non sarebbe così facile, ma puoi usare un elemento invece di un’immagine statica per impostare l’icona. Quindi puoi probabilmente animare la canvas nel modo desiderato.

Leggi questo articolo su come caricare un’immagine nella canvas e cambiarne l’opacità:

Come cambiare l’opacità (alfa, trasparenza) di un elemento in un elemento canvas dopo che è stato disegnato?

Riferimento API: http://code.google.com/chrome/extensions/browserAction.html#method-setIcon

Per usare setBadgeText con setTimeout devi fare questo:

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

Sono arrivato qui cercando un modo per attirare l’attenzione sulla mia estensione di azione del browser …

Quindi ecco un codice a portata di mano per il flash del 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); } }