制作动画 Chrome 扩展图标？

Question

我正在尝试制作一个新的 Chrome 扩展，我需要图标自动更改为带有一组图像的 gif，并永远重复。我的问题是我无法使 Javascript 循环工作。这是我得到的：

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

Answer 1

应进行一些更改：

正在检查 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 函数调用并删除第一行。

Answer 2

我能够使用 setInterval 使我的徽章图标动画化。在此处查看完整的 post：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);

制作动画 Chrome 扩展图标？

Make an animated Chrome extension icon?

javascript

icons

google-chrome

animated

google-chrome-extension