このページは Cloud Translation API によって翻訳されました。

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

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

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

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

アクション

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

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

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

アクションアイコン

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

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

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

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

バッジ

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

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

コマンド

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

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

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

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

アドレスバー

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

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

ページをオーバーライド

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

History
新しいタブ
ブックマーク

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

ポップアップ

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

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

サイドパネル

サイドパネルを使用すると、ウェブページだけでなく拡張機能の機能を呼び出せます（画像を参照）。サイドパネルは、1 つのタブまたはウィンドウ全体に接続できます。サイドパネルは Side Panel API を使用して制御します。

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

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

ツールチップ

ツールチップを使用すると、ユーザーがアクションアイコンにカーソルを合わせたときに、拡張機能の「アクション」の動作を確認できます。デフォルトでは、ツールチップに拡張機能の名前が表示されます。

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

DevTools

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

通知

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

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

テーマ

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

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

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

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

ユーザー補助

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

多言語対応

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

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