4

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);
   }
}
Mashpoe
  • 504
  • 1
  • 9
  • 27
  • How does it not work, does the icon never change, are you getting errors? Also note since your current>max check is outside the rotateIcon function when current goes over 12 it does not reset to 1 the next time rotateIcon is called. – Patrick Evans May 10 '15 at 20:15
  • I'm trying to make the icon automatically start changing once you load the extension, but when I load it, the icon just goes to it's default image; a puzzle piece. – Mashpoe May 10 '15 at 20:19
  • Where do you call rotateIcon to start it? – Patrick Evans May 10 '15 at 20:22
  • I tried to call for it when you click the icon, but it didn't work, here is what I did: `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); } } chrome.browserAction.onClicked.addListener(updateIcon); updateIcon();` – Mashpoe May 10 '15 at 20:29
  • 3
    Don't add code to comments as its hard to read, reedit your question to contain it – Patrick Evans May 10 '15 at 20:33
  • shouldn't it be rotateIcon, not updateIcon? – Patrick Evans May 10 '15 at 20:35
  • 1
    This is doable, and you'll probably figure it out eventually, but the docs specifically say "Don't constantly animate your icon. That's just annoying." – Teepeemm May 10 '15 at 21:02
  • is there a way to do this with a GIF instead? – Alexander Mills Jan 09 '18 at 00:35
  • 1
    @AlexanderMills I'm almost 100% sure you cannot use a gif (I tried), but using a separate image for each frame along with the code from Dovydas's answer I think I was able to get it working. – Mashpoe Jan 09 '18 at 04:25

2 Answers2

8

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);
Tim
  • 785
  • 1
  • 7
  • 20
4

A few changes should be done:

  1. Checking if current > max should be moved inside the function

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

Just instead of console.log(current), uncomment your chrome.browserAction function call and delete the first line.

Dovydas Navickas
  • 3,533
  • 1
  • 32
  • 48
  • Thanks, but it's still not working as the extension. I started with this; `var min = 1; var max = 5; var current = min; function updateIcon() { chrome.browserAction.setIcon({path:"icon" + current + ".png"}); current++; if (current > max) current = min; } chrome.browserAction.onClicked.addListener(updateIcon); updateIcon();` It made the icon change when it was clicked. – Mashpoe May 10 '15 at 20:36
  • In code in comment, you are not calling the function within itself. That is called recursion and in your original example it's done with `window.setTimeout(rotateIcon, 300);`. It should be `window.setTimeout(updateIcon, 300)` in this one. – Dovydas Navickas May 10 '15 at 20:40
  • 1
    Don't do this. Look at the docs for drawing/rotating the icon yourself with canvas. It will be much smoother. google my extension github plus for trello – Zig Mandel May 10 '15 at 21:25
  • @ZigMandel which document is it stored in? thanks! :) – Mashpoe May 10 '15 at 21:45
  • https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=chrome%20brower%20action%20canvas – Zig Mandel May 10 '15 at 23:30
  • 1
    I finally got the icon to animate, thanks to @DovydasNavickas . I guess it just took a while for it to update. Zig Mandel gave me an idea for my next extension! Thanks guys! :) – Mashpoe May 11 '15 at 19:58
  • is there a way to do this with a GIF instead? – Alexander Mills Jan 09 '18 at 00:35