ブラウザアクション

Browser Actionsは、Google Chromeツールバーの、アドレスバーの右側にボタンを追加するために用いられる。ボタンのアイコン、ツールチップ、バッジ、クリック時に開かれるポップアップなどを設定することも出来る。

もしアイコンを常に表示しておきたくないような場合、Browser Actionsのかわりにページアクションを使う。

Manifest

ブラウザアクションを、例えば次のようにManifest Fileに記述する。

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": "icon.png",    // 必須
    "default_title": "サンプル",   // オプション: ツールチップとして表示
    "popup": "popup.html"          // オプション: ポップアップページ
  },
  ...
}

ユーザインターフェース

ブラウザアクションは、必ず Icon の指定をしなければならない。
Tooltip, Badge, Popup はオプションで指定可能。

Icon

アイコンは、縦横共に最大19ピクセルのものを指定できる。大きなアイコンは自動的にフィットするようにリサイズされるが、綺麗に表示させるには最初から19ピクセルのアイコンを用意することが望ましい。

アイコン設定には2つの方法がある。静的な画像を用意するか、HTML5の canvas要素を利用するかである。静的な画像を使う方が簡単であるが、canvas要素では、例えばアニメーションするような、より動的なUIを提供することが出来る。

静的画像は、WebKitが表示可能なあらゆる画像フォーマット(BMP, GIF, ICO, JPEG, PNGなど)を用いることができる。

アイコンを指定するには、Manifest Fileの browser_action.default_icon に記述するか、browserAction.setIcon メソッドを呼び出す。

Tooltip

ツールチップ(ツールバー上のアイコンにマウスを乗せた際に表示されるテキスト)を設定するには Manifest Fileの browser_action.default_title に記述するか、browserAction.setTitle メソッドを呼び出す。

Badge

ブラウザ・アクションではバッジ(アイコンの上に被せられる小さな文字列)を設定することも出来る。バッジを使うことで、拡張機能の状態に関するちょっとした情報を簡単に更新することが可能になる。

アイコンの上という限られたスペースのため、バッジに指定する文字列はは4文字以下でなくてはならない。(それ以上の長さが指定された場合、自動的に4文字までに縮められる。また、日本語を指定すると残念ながら文字化けする)

文字列と色の指定はそれぞれ、browserAction.setBadgeText と browserAction.setBadgeBackgroundColor を用いる。

Popup

拡張機能がポップアップを持つ場合、ユーザがアイコンをクリックした際にポップアップが表示される。ポップアップはHTMLで自由に記述することが出来、コンテンツにあわせて自動的に表示サイズが決定される。

ポップアップを追加するには、まず内容にあたるHTMLファイルを作る。そしてそのHTMLファイルをManifest Fileの browser_action.popup で指定する。

ブラウザアクションを使う際のコツ

次のようなガイドラインを目安にされたい。

ほぼ全てのページで利用できる機能に向いている
特定のページのみで利用される機能の場合、ブラウザアクションではなくページアクションを用いる
19ピクセル四方の領域いっぱいに、カラフルなアイコンを用意する。
Google Chromeに元々備わっている「ページメニュー」と「設定」のアイコンに似せない。テーマによっては全く異なってしまうし、ユーザにとっても紛らわしい。
アイコンは背景を透過にし、縁をソフトにする。多くのユーザはテーマを利用しており、異なった背景色の上で表示されることを忘れない。
常にアニメーションするようなアイコンにしない。鬱陶しいだけになる。

例

ブラウザアクションに関するシンプルな例を、 examples/api/browserAction から閲覧することができる。それ以外のサンプルは、から探す。

API

chrome.browserAction参照。

« 概要

オプションページ »