Animated Badge Icon

Weather Extension was recently updated to have a spinning indicator in the badge icon to let the user know the extension is loading when it is clicked. I wanted to give the user immediate feedback. The challenge was that the badge toolbar icon is limited to static images. I was able to get around this by using canvas and generating multiple images that update the icon. I’ve haven’t come across anything like this so I thought I would share.

 

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

Tips:

  • Have a timeout to hide the loading icon so it does not get stuck
  • Set the badge icon from a background task so it does not get stuck spinning if the user closes the popup


Also published on Medium.

6 thoughts to “Animated Badge Icon”

  1. I love your weather extension! I’m so glad I paid for the pro version. It’s one of very few that never gets turned off. 🙂
    I was thinking about sharing an image of the window that shows up when you click on the extension. Is there a possibility of that ever being added to the app?
    Context: I do daily video announcements (newsdesk style) for my elementary students. It would be awesome if we could have a title card that says the weather. I don’t know what programming would need to be behind it, but I was thinking just a static image of whatever the current conditions were would be great.
    Thank you again!

Leave a Reply

Your email address will not be published. Required fields are marked *