アドレスバーボタン

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

ページアクションとブラウザーアクション

アドレスバーボタン(またはページアクション)は、ツールバーボタン(またはブラウザーアクション)と似ています。

違いは次の通りです。

  • ボタンの位置
    • ページアクションは、ブラウザーのアドレスバーの中に表示されます。
    • ブラウザーアクションは、ブラウザーのツールバー内で、アドレスバーの外側に表示されます。
  • ボタンの表示の有無
    • ページアクションは既定で非表示であり(この既定値は show_matches および hide_matches マニフェストキープロパティで変更できます)、 pageAction.show() および pageAction.hide() を呼び出すことで、特定のタブを表示と非表示を切り替えることができます。
    • ブラウザーアクションは常に表示されます。

ページアクションは、現在のページに関連するアクションのときに使用します。ブラウザーアクションは、ブラウザー全体または複数のページに関連するアクションを実行するときに使用します。たとえば、以下のようになります。

種別 ブックマークアクション コンテンツアクション タブ操作
ページアクション このページをブックマーク 再編集の拡張 タブの送信
ブラウザーアクション すべてのブックマークの表示 広告ブロックの有効化 すべての開いているタブを同期

ページアクションの設定

ページアクションのプロパティは manifest.json の page_action キーで定義します。

json
"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を使って待ち受けします。
    js
    browser.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 はポップアップなしのページアクションを使います。