Как анимировать значок расширения Chrome в функции обратного вызова?

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 , но 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()

}

Answer 1

Для динамического изменения иконки вы можете позвонить:

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

Создать эффект затухания было бы не так просто, но вы можете использовать элемент <canvas> вместо статического изображения для установки значка. Тогда вы, вероятно, сможете анимировать холст так, как хотите.

Ознакомьтесь с этой статьей о том, как загрузить изображение на холст и изменить его непрозрачность:

Как изменить непрозрачность (альфа, прозрачность) элемента в элементе 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);

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