Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make an animated Chrome extension icon?

I am trying to make a new Chrome extension, and I need the icon to automatically change like a gif with an array of images, and repeat forever. My problem is I can't get the Javascript loop to work. Here is what I've got:

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);
   }
}
like image 994
Mashpoe Avatar asked Oct 20 '25 20:10

Mashpoe


1 Answers

I was able to get my badge icon to be animated by using setInterval. Check out the full post here: 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);
like image 50
Tim Avatar answered Oct 23 '25 09:10

Tim



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!