ツールバーボタン
このユーザーインターフェイスオプションは、よくブラウザーアクションと呼ばれており、 ブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。
ツールバーボタン(ブラウザーアクション)はアドレスバーボタン(ページアクション)とよく似ています。違いと使用する場面ついてのガイダンスは、ページアクションとブラウザーアクションを参照してください。
ブラウザーアクションの指定
ブラウザーアクションのプロパティは manifest.json のbrowser_action
キーで定義します。
"browser_action": { "default_icon": { "19": "button/geo-19.png", "38": "button/geo-38.png" }, "default_title": "Whereami?"}
唯一不可欠なキーはdefault_icon
です。
ブラウザーアクションの指定には 2 つの方法があります。ポップアップつきのものと、なしのものです。ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信されます。これを拡張機能がbrowserAction.onClicked
を使って待ち受けします。
browser.browserAction.onClicked.addListener(handleClick);
ポップアップを指定すると、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができ、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。
なお、拡張機能が持つことができるブラウザーアクションは 1 つだけです。
ブラウザーアクションのプロパティの多くは、browserAction
API 使用してプログラムからも変更できます。
アイコン
ブラウザーアクションのアイコンの作成方法の詳細は、Iconography をPhoton Design System のドキュメントで参照してください。
例
Github のwebextensions-examples リポジトリーには、ブラウザーアクションを使う拡張機能の例がいくつかあります。
- bookmark-it はポップアップなしのブラウザーアクションを使用します。
- beastify はポップアップ付きのブラウザーアクションを使用します。