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.

Javascript JSFiddle example: https://jsfiddle.net/w7t2fe0j/

 

var context=document.createElement('canvas').getContext('2d');
var start = new Date();
var lines = 16,
cW = 40,
cH = 40;

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

Thanks for reading. Make sure you follow me on Twitter to stay up to date on the progress of my side projects T.LYWeather Extension, and Link Shortener Extension. If you are interested in the tech I use daily, check out my uses page.  

13 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!

  2. Thanks for this article! Could you also provide the starting values for “start”, “lines”, “cW”, “cH”, and “context”?

  3. Nice job!
    pls fix line 2 var start = newDate(); => new Date()
    Otherwise, I just copy-pasted this code into my extension and it works!!!

Leave a Reply

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