WebExtension API を使った機能拡張にはいくつかのユーザーインターフェイスオプションが提供されていて、ユーザーがこれによって機能を利用できます。この節では、下記にこのオプションの要約と、各ユーザーインターフェイスオプションの詳細な導入とがあります。

あなたの機能拡張で、これらの UI コンポーネントを使って優れたユーザー体験を生むためのアドバイスとして、ユーザー体験のベストプラクティス の記事を見てください。

UI オプション 記述
ブラウザーツールバーボタン ブラウザーツールバーのボタンで、クリック時に機能拡張にイベントを送る。既定では全てのタブででこのボタンが表示されている。 Example of a WebExtension toolbar button

ポップアップ付きのブラウザーツールバーボタン

ボタンがクリックされた時の、ブラウザーツールバーのボタン上のポップアップ。ポップアップは、ユーザーインタラクションを扱うHTML 文書内で定義される。 Example of a WebExtension toolbar button with a popup
アドレスバーボタン ブラウザーアドレスバー上のボタンで、クリック時に機能拡張にイベントを送る。既定では、全てのタブでこのボタンは非表示。 Example showing an address bar button (page action)
ポップアップ付きのアドレスバーボタン

ブラウザーアドレスバーのボタン上のポップアップで、クリック時に開く。 ポップアップは、ユーザーインタラクションを扱うHTML 文書内で定義される。

Example of a popup on the address bar button
コンテキストメニュー項目 ブラウザーのコンテキストメニュー上の、メニュー項目や、チェックボックスや、ラジオボタン。また、メニューはセパレーターを追加して構造化もできる。メニュー項目がクリックされたとき、機能拡張にイベントが送られる。
サイドバー

ウェブページの隣に表示される HTML 文書で、ページ毎に固有なコンテンツを持つ。サイドバーは機能拡張がインストールされた時に開かれて、ユーザーのサイドバー可視化の選択に従う。サイドバー内のユーザーインタラクションは HTML 文書によって扱われる。

Example of a WebExtension's sidebar
オプションページ 機能拡張に対してユーザーが変更できる設定値を決めるページ。ユーザーはブラウザーのアドオンマネージャーからこのページにアクセスできる。 Example showing the options page content added in the favorite colors example.
関連付けされたウェブページ ウィンドウやタブの中で、フォームやヘルプやその他必要となるあらゆるコンテンツを提供するには、機能拡張に含めたウェブページを使います。 Example of a simple bundled page displayed as a detached panel.
通知 OSの通知の仕組みを通じてユーザーに表示される一時的な通知。ユーザーが通知をクリックした時や、(自動的に、あるいはユーザーが要求した場合の両方に)通知が閉じた時、機能拡張にイベントを送る。 Example notification from a WebExtension
アドレスバーサジェスト ユーザーがキーワードを入力した時のカスタムアドレスバーサジェスト Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
開発ツールパネル ブラウザーの開発ツール内で表示される、 タブと関連 HTML 文書。 New panel tab in the Developer Tools tab bar

下記の方法ガイドにはユーザーインターフェイスオプションを作成するためのステップバイステップのガイドがあります。:

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3
 最終更新者: Uemmra3,