Chrome Extensionのブラウザアクションアイコンをアニメーションする方法

Google

もしくはおっぱいエクステンション見どころ解説。
おっぱいエクステンションはクリックするとボタンアイコンがアニメーションしますが、これはどうやってるんだって話をします。要は「同じようなの何度も作って楽しいのかよ」っていう真っ当至極な意見に対する「いやいや、これでも一応ちょっと試してみたことがあったんスよ」っていう言い訳。
ブラウザアクションのアイコンには普通は画像を使うと思いますが、実は画像だけではなくてImageDataオブジェクトを渡すこともできます。で、そのImageDataオブジェクトはcanvas要素から取り出せます。つまり
「『canvasに何かを描画して、ImageDataオブジェクトを取り出し、ボタンアイコンに設定』というのを一定間隔で繰り返し」
すればボタンアイコンのアニメーションが実行できるわけです。ではさっそくおっぱいエクステンションのソースを追ってみましょう。

/* oppai.js */
// ...snip...
var canvasId = 'canvas';
var oppai = null;
Event.observe(window, 'load', function(e) {
  // おっぱいオブジェクト作って
  oppai = new World(canvasId);
  // 初期形状を計算してcanvasに描画
  oppai.run();

  // 20msごと繰り返し
  setInterval(function() {
    // 次の形状を計算してcanvasに描画
    oppai.run();

    // キャンバスとそのグラフィックコンテキストを取得
    var canvas = $('canvas');
    var context = canvas.getContext('2d');

    if (context ) { 
      // グラフィックコンテキストからImageDataを取得
      // ImageDataのサイズが19x19より大きいと叱られるので注意
      var imageData = context.getImageData(0, 0, 19, 19); 

      // ブラウザアクションボタンのアイコンを設定
      chrome.browserAction.setIcon({imageData: imageData});
    }   
  }, 20);
}, true);

<!-- background.html -->
<html>
<head>
  <!-- ...snip... -->
  <script src="oppai.js"></script>
  <script>
    // ブラウザアクションボタンがクリックされたら
    chrome.browserAction.onClicked.addListener(function(tab) {
      // 揺らす
      oppai.wobble();
    });
  </script>
</head>
<body>
  <!-- おっぱいを描画するためのcanvas -->
  <canvas id="canvas" width="19" height="19"></canvas>
</body>
</html>

というわけなので、おっぱいはひどくなんかないよ！