Chrome拡張のブラウザアクションなアイコンを回転させる技

2014-02-22T00:00:00+00:00 Chrome Extension JavaScript

Google公式なGmailな拡張ではメールを受信したりするとブラウザアクションなアイコンが回転するようになっている。これどうやってやってるのか非常に気になったのでその拡張のソースを見てやってみた

※本式で表示する用のブラウザアクションなアイコンと回転させる際にcanvasでごにょごにょするアイコンが必要。別に分けても良いだろうし(ry

manifest.json

{
  "name": "chrome-extension-badge-icon-rotate",
  "version": "0.1",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "page": "bg.html"
  }
}

bg.html

<img src="icon.png" id="icon-image" />
<!-- 必ず?widthとheightは19にする -->
<canvas id="canvas" width="19" height="19" />
<script src="bg.js"></script>

bg.js

var iconImage       = document.getElementById("icon-image");
var canvas          = document.getElementById("canvas");
var canvasContext   = canvas.getContext("2d");
var animationSpeed  = 10; // 小さくすれば回転するスピードが速くなる
var animationFrames = 36;
var rotation        = 0;

function ease(x) {
  return (1 - Math.sin(Math.PI / 2 + x * Math.PI)) / 2;
}

function drawIconAtRotation() {
  canvasContext.save();
  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  canvasContext.translate(
    Math.ceil(canvas.width / 2),
    Math.ceil(canvas.height / 2)
  );
  canvasContext.rotate(2 * Math.PI * ease(rotation));
  canvasContext.drawImage(
    iconImage,
    -Math.ceil(canvas.width / 2),
    -Math.ceil(canvas.height / 2)
  );
  canvasContext.restore();

  chrome.browserAction.setIcon({
    "imageData": canvasContext.getImageData(0, 0, canvas.width, canvas.height)
  });
}

function animateFlip() {
  rotation += 1/animationFrames;
  drawIconAtRotation();

  if (rotation <= 1) {
    setTimeout(animateFlip, animationSpeed);
  } else {
    rotation = 0;
    chrome.browserAction.setIcon({ "path": "icon.png" });
  }
}

chrome.browserAction.onClicked.addListener(animateFlip);

っていう感じらしい。そんな感じでブラウザアクションなアイコンをCanvasでローテーションし、そのドローしているイメージデータをchrome.browserAction.setIconのimageDataに指定する事で、canvasなデータをアイコンとしてドローしている仕組み的な所かと

追記

https://github.com/kinjouj/chrome-extension-browseraction-icon-rotation にまるごとソースを置いてありますので回転させるアイコン画像(icon.pngで19x19)を用意さえすれば試せるかと

gradle-android-apt-plugin