小粋空間  -  a cheap joke and a play on words site

Google Chrome拡張の作り方（その2：browser_actionを使ったアイコン表示）

Google Chrome拡張の作り方を紹介します。

このエントリーでは、アドレスバーの右側に追加した拡張のアイコンを表示させます。

完成イメージ

そして、下記に示すアイコンの各項目の制御方法について解説します。

• アイコンの設定・切り替え
• テキストの設定・切り替え
• バッジの表示・切り替え
• バッジの背景色設定・切り替え

拡張の基本的な作り方については「Google Chrome拡張の作り方（その1：マニフェストファイル作成とパッケージ化）」を参照してください。

１．マニフェストファイルにブラウザアクションを設定する

アドレスバーの右側にアイコンを表示させるには、マニフェストファイルにブラウザアクション（browser_action）を設定します。

{
  "name": "Sample",
  "version": "1",
  "manifest_version": 2,
  "description": "This is sample",
  "icons": {
    "16" : "images/sample_16.png",
    "48" : "images/sample_48.png",
    "128" : "images/sample_128.png"
  },
  "browser_action": {
    "default_icon": "images/sample_16.png",
    "default_title": "Sample"
  }
}

ブラウザアクションほぼ全てのページで利用するために用います。特定のページのみで機能を利用する場合、ページアクション（page_action）を用います。

ここで設定するブラウザアクションの各項目の意味は次のとおりです。

• default_icon：アドレスバーの右側に表示するデフォルトアイコンのパスとファイル名
• default_title：アイコンをポイントしたときのデフォルトツールチップ

なお設定項目名が「default_」となっていることから分かるとおり、この2つについてはChrome Extensions APIを使ってあとから変更することができます。

またデフォルト値の設定がなく、APIで設定を行う項目が以下の2つです。

• バッジ
• バッジの背景色

この2つについても後述します。

２．バッジを表示する

バッジを表示するには、バックグラウンドで動作させるためのJavaScriptファイルが必要です。

ここではJavaScriptファイル（background.js）をjsフォルダに配置します（フォルダ有無は任意）。

sample/
    manifest.json
    images/
        sample_16.png
        sample_48.png
        sample_128.png
    js/
        background.js

そして、このJavaScriptファイルをマニフェストファイルに設定します。

{
  "name": "Sample",
  "version": "1",
  "manifest_version": 2,
  "description": "This is sample",
  "icons": {
    "16" : "images/sample_16.png",
    "48" : "images/sample_48.png",
    "128" : "images/sample_128.png"
  },
  "browser_action": {
    "default_icon": "images/sample_16.png",
    "default_title": "Sample"
  },
  "background": {
    "scripts": ["js/background.js"]
  }
}

あとはbackground.jsに、とりあえず以下の1行を設定します。

chrome.browserAction.setBadgeText({ text: "ABC" });

これで、この拡張をインストールしたあとに、バックグラウンドのJavaScriptが起動し、アイコンにバッジ「ABC」が表示されます。

バッジの表示は、

chrome.browserAction.setBadgeText({ text: <文字> })

となります。「文字」の部分は文字列にする必要があります。

また表示可能なのは半角文字だけのようです。

３．バックグラウンドでバッジの内容を変更する

ここではサンプルとして、開いているタブの合計をバッジに表示し、タブの追加・削除で表示している値を増減させる簡単なスクリプトを追加してみます。

さきほどのbackground.jsの内容を以下に書き換えます。

var counter = 0;
chrome.tabs.getAllInWindow( null, function( tabs ){
    counter = tabs.length;
    chrome.browserAction.setBadgeText({ text:String(counter) });
});
chrome.tabs.onCreated.addListener( function( tab ){
    counter++;
    chrome.browserAction.setBadgeText({ text: String(counter) });
});
chrome.tabs.onRemoved.addListener( function( tab ){
    counter--;
    chrome.browserAction.setBadgeText({ text: String(counter) });
});

これで拡張をインストールすれば、インストール直後は開いているタブの数が表示されます。

タブを開けば、バッジの数字がインクリメントされます。

タブの数をカウントするには、chrome.tabs.getAllInWindowを利用します。このAPIはウインドウにある全タブの情報を取得します。

chrome.tabs.getAllInWindow( null, function( tabs ){

APIのパラメータにはtabの配列が渡されるので、単純に配列の数をカウントしてchrome.browserAction.setBadgeTextに設定します。

    counter = tabs.length;
    chrome.browserAction.setBadgeText({ text:String(counter) });

変数counterはString()で文字列に変換します。

タブの生成はchrome.tabs.onCreated.addListener、タブの削除はchrome.tabs.onRemoved.addListenerでハンドリングします。

４．タイトルを変更する

タイトル（ツールチップ）の内容を変更するには、chrome.browserAction.setTitleを利用します。

chrome.browserAction.setTitleは次のように「title」に値を設定します。

chrome.browserAction.setTitle({ title: "hoge" });

特定のタブが開かれたときだけ内容を変更したい場合はtabIdをパラメータに追加します。

chrome.browserAction.setTitle({ title: "hoge", tabId: 1 });

５．アイコンを変更する

アイコンを変更するには、chrome.browserAction.setIconを利用します。

chrome.browserAction.setTitleは次のように「path」または「imageData」を設定します。

chrome.browserAction.setIcon({ path:"images/hoge.png"});
chrome.browserAction.setIcon({ imageData: canvasContext.getImageData(0, 0, canvas.width, canvas.height )} );

chrome.browserAction.setTitleと同様、特定のタブが開かれたときだけ内容を変更したい場合はtabIdをパラメータに追加します。

chrome.browserAction.setIcon({ path: "images/hoge.png", tabId: 1 });

６．バッジの背景色を変更する

バッジの背景色を変更するには、chrome.browserAction.setBadgeBackgroundColorを利用します。

chrome.browserAction.setBadgeBackgroundColorは次のように「color」を設定します。

chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 255, 100] });

特定のタブが開かれたときだけ背景色を変更したい場合はtabIdをパラメータに追加します。

chrome.browserAction.setBadgeBackgroundColor({ color: [0, 0, 255, 100], tabId: 1 });