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

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

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

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

操作

アクションとは、ユーザーが拡張機能のアクション アイコンをクリックしたときに実行されるものです。アクションは、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 ページのいずれかをオーバーライドできます。

  • 履歴
  • 新しいタブ
  • ブックマーク
で確認できます。 <ph type="x-smartling-placeholder">
</ph> カスタム履歴ページの例。
図 6: カスタム履歴ページの例。

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

ポップアップ

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

ポップアップの例。
図 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: テーマの例。

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

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

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

ユーザー補助

多くのユーザーにとって、ユーザー補助機能は文字通りユーザー インターフェースであり、その機能は、拡張機能の操作にユーザー補助機能を必要としないユーザーにとっても有用な場合があります。拡張機能のアクセシビリティを高める方法の基本を学びます。

国際化

ユーザーの母国語で話す。インターフェースの多言語化方法を確認する。