ユーザー インターフェース コンポーネント

これは、拡張機能で使用できるユーザー インターフェース要素のカタログです。各エントリには次のものが含まれます。

  • 要素の画像（該当する場合）。
  • その目的の説明。
  • 関連するインターフェース要素（該当する場合）。
  • 実装手順とコードサンプルへのリンク。

これらの要素は、拡張機能のさまざまな呼び出し方法です。すべてを実装する必要はありません。実際、ユースケースによっては、これらのいずれも使用しない場合があります。たとえば、リンク短縮ツールは、キーボード ショートカットを使用して表示された URL を処理し、短縮されたリンクをクリップボードにプログラムで配置できます。

操作

アクションとは、ユーザーが拡張機能のアクション アイコンをクリックしたときに発生する動作のことです。アクションは、Action API を使用して拡張機能の機能を呼び出すか、ユーザーが複数の拡張機能の機能を呼び出すことができるポップアップを開くことができます。ツールチップを使用して、アクションの内容をユーザーに伝えます。

固定された拡張機能と固定されていない拡張機能の両方。
図 1: 固定された拡張機能（左）と固定されていない拡張機能（右）。

アクションをビルドする方法については、アクションを実装するまたはアクションのサンプルをご覧ください。

アクション アイコン

拡張機能には、それを表すアイコンが少なくとも 1 つ必要です。ユーザーがアイコンをクリックすると、Action API を使用して拡張機能の機能を呼び出すか、ポップアップを開くかに関わらず、アクションが呼び出されます。

Google 辞書拡張機能のアイコン。
図 2: Google 辞書拡張機能のアイコン（赤色）。

アイコンにラベル（ここでは「バッジ」と呼びます）を追加して、拡張機能の状態やユーザーによる操作が必要であることを伝えることもできます。

アクションをビルドする方法については、アクションを実装するまたはアクションのサンプルをご覧ください。

バッジ

バッジは、アクション アイコンの上に配置される書式設定されたテキストで、拡張機能の状態やユーザーによるアクションが必要なことなどを示します。バッジのテキストは browser.action.setBadgeText() を呼び出すことで、バナーの色は browser.action.setBadgeBackgroundColor() を呼び出すことで設定できます。

バッジなしとバッジありの拡張機能アイコン。
図 3: バッジなしの拡張機能アイコン（左）とバッジありの拡張機能アイコン（右）。

アクションをビルドする方法については、アクションを実装するまたは Drink water のサンプルをご覧ください。

コマンド

コマンドは、拡張機能の機能を呼び出すキーの組み合わせです。manifest.json ファイルでキーの組み合わせを定義し、Commands API を使用して応答します。コマンドの実装方法については、API リファレンスまたは browser.commands サンプルをご覧ください。

コンテキスト メニュー

マウスの代替クリック（右クリック）のコンテキスト メニューが表示されます。コンテキスト メニュー API を使用してコンテキスト メニューを定義します。

ネストされたコンテキスト メニュー。
図 4: コンテキスト メニューとネストされたサブメニュー。

コンテキスト メニューの実装方法については、コンテキスト メニューのサンプルをご覧ください。

アドレスバー

Chrome のアドレスバーを使用してユーザーとやり取りできます。ユーザーがアドレスバーに拡張機能で定義されたキーワードを入力すると、拡張機能によってアドレスバーに表示される内容が制御されます。manifest.json でキーワードを定義し、Omnibox API を使用してキーワードに応答します。

ブラウザのアドレスバー。
図 5: ブラウザのアドレスバー。

オムニボックスをオーバーライドする方法については、オムニボックスからアクションをトリガーする、または quick API reference のサンプルをご覧ください。

ページをオーバーライドする

拡張機能は、次の Chrome の組み込みページのいずれかをオーバーライドできます。

  • 履歴
  • 新しいタブ
  • ブックマーク
カスタム履歴ページの例。
図 6: カスタム履歴ページの例。

Chrome ページをオーバーライドする方法については、Chrome ページをオーバーライドするまたは override のサンプルをご覧ください。

ポップアップ

ポップアップは、ユーザーが複数の拡張機能の機能を呼び出すことができるウィンドウを表示するアクションです。ポップアップは、ユーザーがアクション アイコンをクリックするか、キーボード ショートカットを使用するか、browser.action.openPopup() を呼び出すことで開くことができます。

ポップアップの例。
図 7: ポップアップの例。

ポップアップの作成方法については、ポップアップを追加するをご覧ください。アクションのサンプルのいずれかを使用してステップをダウンロードすることもできます。

サイドパネル

サイドパネルを使用すると、ウェブページと並べて拡張機能の機能を呼び出すことができます（画像を参照）。サイドパネルは、単一のタブまたはウィンドウ全体に添付できます。サイドパネルは Side Panel API を使用して制御されます。

単語を定義する辞書拡張機能
図 8: 「Extensions」という単語を定義する辞書拡張機能。

サイドパネルの作成方法については、サイドパネルのユースケースを参照するか、サイドパネルのサンプルをご覧ください。

ツールチップ

ツールチップは、ユーザーがアクション アイコンにマウスを合わせたときに、拡張機能のアクションの内容を表示する方法です。デフォルトでは、ツールチップに拡張機能の名前が表示されます。

アクション アイコンのツールチップの例。
図 9: アクション アイコンのツールチップの例。

ツールチップを追加する方法については、マニフェスト ファイルの "action" キーの "default_title" メンバーを使用します。

DevTools

DevTools Panels API を使用して、DevTools にカスタム パネル（DevTools でのタブの呼び方）を追加できます。他の DevTools API を使用すると、ウィンドウとネットワーク トラフィックをモニタリングできます。DevTools のレコーダー パネルをカスタマイズすることもできます。Chrome DevTools 独自の Lighthouse パネルは、DevTools 拡張機能として始まりました。

通知

拡張機能の Notifications API またはウェブ プラットフォームの Notifications API を使用して、ユーザーのシステムトレイにメッセージを投稿します。

Mac の拡張機能の通知。
図 10: Mac での拡張機能の通知。

通知の使用方法については、ユーザーに通知するをご覧ください。

テーマ

テーマは、ブラウザの外観を変更する特別な種類の拡張機能です。テーマは通常の拡張機能と同じようにパッケージ化されますが、JavaScript コードや HTML コードは含まれません。

図 11: テーマの例。

テーマの作成方法については、テーマとはをご覧ください。

ユーザーと交流するその他の方法

このセクションでは、拡張機能がユーザーとやり取りするその他の方法について説明します。基本的な拡張機能には厳密には必要ありませんが、拡張機能の重要な部分になる可能性があります。多くのユーザーにとって、これらの機能の一部は拡張機能を使用するうえで不可欠です。

ユーザー補助

多くのユーザーにとって、ユーザー補助機能はまさにユーザー インターフェースであり、その機能は、拡張機能の主な操作手段としてユーザー補助機能を必要としないユーザーにとっても役立つことがよくあります。拡張機能のアクセシビリティを改善するための基本を学びます。

国際化

ユーザーの言語で話します。インターフェースを国際化する方法を学習する。