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

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

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

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

アクション

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

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

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

アクション アイコン

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

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

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

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

バッジ

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

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

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

コマンド

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

コンテキスト メニュー

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

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

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

アドレスバー

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

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

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

ページをオーバーライド

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

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

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

ポップアップ

ポップアップは、ユーザーが複数の拡張機能を呼び出せるウィンドウを表示するアクションです。ポップアップは、ユーザーがアクション アイコンをクリックした場合のみ開くことができます。拡張機能は、そのポップアップをプログラムで開けません。

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

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

サイドパネル

サイドパネルを使用すると、ウェブページだけでなく拡張機能の機能を呼び出せます（画像を参照）。サイドパネルは、1 つのタブまたはウィンドウ全体に接続できます。サイドパネルは 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: テーマの例

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

ユーザーとやり取りするその他の方法

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

ユーザー補助

多くのユーザーにとって、ユーザー補助は文字どおりユーザー インターフェースであり、その機能は、拡張機能を操作する主な手段としてユーザー補助を必要としない人にとって役立つことが少なくありません。拡張機能をアクセス可能にするための基本を確認する。

多言語対応

ユーザーが母国語で話しかける。インターフェースを多言語化する方法を学習する。