Сделайте анимированный значок расширения Chrome?

Я пытаюсь создать новое расширение Chrome, и мне нужно, чтобы значок автоматически менялся как gif с массивом изображений и повторялся навсегда. Моя проблема в том, что я не могу заставить цикл Javascript работать. Вот что я получил:Сделайте анимированный значок расширения Chrome?

var min = 1; 
var max = 12; 
var current = min; 

    if (current > max) 
    current = min; 
} 

var keep_switching_icon = true; 
function rotateIcon() 
{    
    if (keep_switching_icon) 
    { 
     chrome.browserAction.setIcon({path:"icon" + current + ".png"}); 
     current++; 
     window.setTimeout(rotateIcon, 300); 
    } 
}

источник

2015-05-10 Mashpoe

Как он не работает, не имеет значок не изменится, вы получаете ошибки? Также обратите внимание, так как ваша текущая проверка> max находится вне функции rotateIcon, когда ток превышает 12, он не сбрасывается до 1 при следующем вызове rotateIcon. –

Я пытаюсь, чтобы значок автоматически начинал меняться после загрузки расширения, но когда я его загружаю, значок просто переходит к его изображению по умолчанию; кусок головоломки. – Mashpoe

Где вы звоните: rotateIcon чтобы начать его? –

несколько изменений должно быть сделано:

Проверяется current > max должны быть перемещены внутри функции

console.clear(); 
 

 
var min = 1; 
 
var max = 12; 
 
var current = min; 
 

 
var keep_switching_icon = true; 
 

 
function rotateIcon() { 
 
    if (keep_switching_icon) { 
 
    //chrome.browserAction.setIcon({path:"icon" + current + ".png"}); 
 
    console.log(current); 
 
    if (current++ > max) { 
 
     current = min; 
 
    }; 
 

 
    window.setTimeout(rotateIcon, 300); 
 
    } 
 
} 
 

 
rotateIcon();

Только вместо console.log(current), раскомментируйте свой вызов chrome.browserAction и удалите первую строку.

источник

2015-05-10 20:25:08

Спасибо, но он все еще не работает как расширение. Я начал с этого; 'var min = 1; var max = 5; var current = min; функция updateIcon() { chrome.browserAction.setIcon ({path: "icon" + current + ".png"}); current ++; if (current> max) current = min; } хром.browserAction.onClicked.addListener (updateIcon); updateIcon(); 'Он изменил значок, когда он был нажат. – Mashpoe

В коде в комментарии вы не вызываете функцию внутри себя. Это называется рекурсией, и в вашем исходном примере это делается с помощью 'window.setTimeout (rotateIcon, 300);'. Это должно быть 'window.setTimeout (updateIcon, 300)' в этом. –

Не делайте этого. Посмотрите на документы для рисования/поворота значка с помощью холста. Это будет намного более гладко. google мое расширение github plus для trello –

Я смог получить значок значка, который будет анимироваться с помощью setInterval. Проверьте полный пост здесь: https://timleland.com/animated-badge-icon/

setInterval(function() { 
 
    var rotation = parseInt(((new Date() - start)/1000) * lines)/lines; 
 
    context.save(); 
 
    context.clearRect(0, 0, cW, cH); 
 
    context.translate(cW/2, cH/2); 
 
    context.rotate(Math.PI * 2 * rotation); 
 
    for (var i = 0; i < lines; i++) { 
 
    context.beginPath(); 
 
    context.rotate(Math.PI * 2/lines); 
 
    context.moveTo(cW/10, 0); 
 
    context.lineTo(cW/4, 0); 
 
    context.lineWidth = cW/30; 
 
    context.strokeStyle = 'rgba(0, 0, 0,' + i/lines + ')'; 
 
    context.stroke(); 
 
    } 
 

 
var imageData = context.getImageData(10, 10, 19, 19); 
 
    chrome.browserAction.setIcon({ 
 
    imageData: imageData 
 
    }); 
 

 
context.restore(); 
 
}, 1000/30);

источник

2017-11-02 02:56:05 Tim

Сделайте анимированный значок расширения Chrome?

ответ

Смежные вопросы