chrome拡張開発Tip

chrome拡張機能を自作し、自分もインストールして使用している場合、アイコンが全く同じなので

• 現在開発中のもの
• ウェブストアからインストールしたもの

の２つの見分けがつかなくて困ることが多々ある。

Badgeをつける

backgroundページやその他のHTMLファイルで以下のJavaScriptファイルを読み込めば良い。

build-prefix.js

var dev_build = 1;

!function() {
  if(dev_build) {
     var title = document.getElementsByTagName("title")[0];
     if(title != undefined) {
          title.innerHTML = "[dev] " +  title.innerHTML;
     }
     chrome.browserAction.setBadgeText({"text": "dev"});
     chrome.browserAction.setBadgeBackgroundColor({"color": "#FF0000"});
  }
}();

すると、以下のように、拡張機能のアイコンには赤色のdevバッジが付き、アプリ内の各ページのタイトルには先頭に[dev]が付加される。

これで、どちらが現在開発中のものかがすぐに分かる。

実際にリリースするときには

上のコードの１行目の変数 dev_build の値を 0 に変更するだけで良い。

var dev_build = 0;

---

見分けをつけるだけならば、開発中の方のアイコンを変えるなどの策もあるが（実際にやっていたが）、リリース前に元に戻す作業が面倒だったのでこのような方法を考えてみた。
これならリリース前の変更は一文字で済むのでかなりラクになった。