Google Chrome拡張の作り方(その2:browser_actionを使ったアイコン表示)

Google Chrome拡張の作り方(その2:browser_actionを使ったアイコン表示)

Posted at June 5,2014 1:55 AM
Tag:[Chrome, Extension]

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

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

完成イメージ
完成サンプル

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

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

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

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つについても後述します。

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」が表示されます。

アイコンにバッジ「ABC」を表示

バッジの表示は、

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

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

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

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

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

さきほどの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でハンドリングします。

4.タイトルを変更する

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

タイトル(ツールチップ)の内容を変更

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

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

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

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

5.アイコンを変更する

アイコンを変更するには、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 });

6.バッジの背景色を変更する

バッジの背景色を変更するには、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 });
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)