ツールバーボタン

このユーザーインターフェイスオプションは、よくブラウザーアクションと呼ばれており、 ブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。

ツールバーボタン（ブラウザーアクション）はアドレスバーボタン（ページアクション）とよく似ています。違いと使用する場面ついてのガイダンスは、ページアクションとブラウザーアクションを参照してください。

ブラウザーアクションの指定

ブラウザーアクションのプロパティは manifest.json の browser_action キーで定義します。

json
"browser_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?"
}

唯一不可欠なキーは default_icon です。

ブラウザーアクションの指定には 2 つの方法があります。ポップアップつきのものと、なしのものです。ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信されます。これを拡張機能が browserAction.onClicked を使って待ち受けします。

js
browser.browserAction.onClicked.addListener(handleClick);

ポップアップを指定すると、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができ、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。

なお、拡張機能が持つことができるブラウザーアクションは 1 つだけです。

ブラウザーアクションのプロパティの多くは、 browserAction API 使用してプログラムからも変更できます。

アイコン

ブラウザーアクションのアイコンの作成方法の詳細は、 Iconography を Photon Design System のドキュメントで参照してください。

例

Github の webextensions-examples リポジトリーには、ブラウザーアクションを使う拡張機能の例がいくつかあります。

  • bookmark-it はポップアップなしのブラウザーアクションを使用します。
  • beastify はポップアップ付きのブラウザーアクションを使用します。