アドレスバーボタン
このユーザーインターフェイスオプションは、ブラウザーのアドレスバーに追加されるボタンで、よくページアクションと呼ばれます。ユーザーはボタンをクリックして拡張機能を操作します。
ページアクションとブラウザーアクション
アドレスバーボタン(またはページアクション)は、ツールバーボタン(またはブラウザーアクション)と似ています。
違いは次の通りです。
- ボタンの位置
- ページアクションは、ブラウザーのアドレスバーの中に表示されます。
- ブラウザーアクションは、ブラウザーのツールバー内で、アドレスバーの外側に表示されます。
- ボタンの表示の有無
- ページアクションは既定で非表示であり(この既定値は
show_matches
およびhide_matches
マニフェストキープロパティで変更できます)、pageAction.show()
およびpageAction.hide()
を呼び出すことで、特定のタブを表示と非表示を切り替えることができます。 - ブラウザーアクションは常に表示されます。
- ページアクションは既定で非表示であり(この既定値は
ページアクションは、現在のページに関連するアクションのときに使用します。ブラウザーアクションは、ブラウザー全体または複数のページに関連するアクションを実行するときに使用します。たとえば、以下のようになります。
種別 | ブックマークアクション | コンテンツアクション | タブ操作 |
---|---|---|---|
ページアクション | このページをブックマーク | 再編集の拡張 | タブの送信 |
ブラウザーアクション | すべてのブックマークの表示 | 広告ブロックの有効化 | すべての開いているタブを同期 |
ページアクションの設定
ページアクションのプロパティは manifest.json の page_action
キーで定義します。
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?"
}
唯一不可欠なキーは default_icon
です。
ページアクションの設定には 2 つの方法があります。ポップアップがあるものと、ないものです。
- ポップアップがない場合、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信され、これを拡張機能が
pageAction.onClicked
を使って待ち受けします。jsbrowser.pageAction.onClicked.addListener(handleClick);
- ポップアップがある場合、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができます。ユーザーがポップアップの外をクリックした場合は、自動的に閉じます。ポップアップを作成したり管理したりすることについての詳細は、ポップアップの記事を参照してください。
なお、拡張機能が持つことができるページアクションは 1 つだけです。
ページアクションのプロパティはすべて、 pageAction
` API を使用してプログラムから変更することができます。
アイコン
For details on how to create icons to use with your page action, see Iconography in the Photon Design System documentation.
例
GitHub の webextensions-examples リポジトリーには、ページアクションを使う拡張機能の例がいくつかあります。 chill-out はポップアップなしのページアクションを使います。