拡張機能のユーザー インターフェースは、目的を持った最小限のものにする必要があります。拡張機能自体と同様に、UI はブラウジング エクスペリエンスを妨げずにブラウジング エクスペリエンスをカスタマイズまたは強化する必要があります。
このガイドでは、ユーザー インターフェースの必須機能とオプション機能について説明します。これを使用して、拡張機能内でさまざまな UI 要素を実装する方法とタイミングを理解できます。
すべてのページで拡張機能を有効にする
拡張機能の機能がほとんどの状況で機能する場合は、browser_action を使用します。
ブラウザのアクションを登録する
"browser_action"
フィールドはマニフェストに登録されます。
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
"browser_action"
を宣言すると、アイコンの色が維持され、ユーザーが拡張機能を利用できることを示します。
バッジを追加する
バッジでは、ブラウザ アイコンの上に最大 4 文字の色付きのバナーが表示されます。マニフェストで "browser_action"
を宣言している拡張機能でのみ使用できます。
バッジを使用して拡張機能の状態を示します。Drink Water Event のサンプルは、「オン」のバッジを表示して、アラームが正常に設定されていることをユーザーに示し、拡張機能がアイドル状態のときは何も表示しません。
chrome.browserAction.setBadgeText
を呼び出してバッジのテキストを設定し、chrome.browserAction.setBadgeBackgroundColor
を呼び出してバナーの色を設定します。
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
選択したページで拡張機能を有効にする
特定の状況でのみ拡張機能の機能を利用する場合は、page_action を使用します。
ページのアクションを宣言
"page_action"
フィールドはマニフェストに登録されます。
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
"page_action"
を宣言すると、ユーザーがその拡張機能を利用できる場合のみアイコンが色付きになり、そうでない場合はグレースケールで表示されます。
拡張機能を有効にするルールを定義する
バックグラウンド スクリプトの runtime.onInstalled
リスナーで chrome.declarativeContent
を呼び出して、拡張機能が使用可能になるタイミングのルールを定義します。URL によるページ アクションのサンプル拡張機能は、URL に「g」を含めるという条件を設定します。条件が満たされると、拡張機能は declarativeContent.ShowPageAction()
を呼び出します。
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'g' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
拡張機能を有効または無効にする
"page_action"
を使用する拡張機能は、pageAction.show
と pageAction.hide
を呼び出すことで、動的に有効または無効にできます。
Mappy サンプル拡張機能は、ウェブページで住所をスキャンし、静的地図上の住所をポップアップ内の静的マップに表示します。この拡張機能はページ コンテンツに依存するため、どのページが関連するかを予測するルールを宣言することはできません。代わりに、ページで住所が見つかった場合は、pageAction.show
を呼び出してアイコンを色分けし、そのタブで拡張機能が使用可能であることを示します。
chrome.runtime.onMessage.addListener(function(req, sender) {
chrome.storage.local.set({'address': req.address})
chrome.pageAction.show(sender.tab.id);
chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});
拡張機能のアイコンを指定する
拡張機能を表すには、少なくとも 1 つのアイコンが必要です。アイコンは PNG 形式で表示することをおすすめします。ただし、BMP、GIF、ICO、JPEG など、WebKit でサポートされているすべての形式を使用できます。
ツールバー アイコンを指定する
ツールバー固有のアイコンは、マニフェストの browser_action
または page_action
の "default_icon"
フィールドに登録されます。16 ディップのスペースに合わせてスケーリングすることをおすすめします。推奨サイズは 16x16 と 32x32 です。
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
アイコンはすべて正方形にする必要があります。正方形でない場合、歪む可能性があります。アイコンを指定しない場合は、汎用アイコンがツールバーに追加されます。
追加のアイコンを作成して登録する
ツールバーの外部で使用するために、次のサイズのアイコンを追加します。
アイコンのサイズ | アイコンの使用 |
---|---|
16x16 | ファビコンを表示 |
32×32 | 多くの場合、Windows PC ではこのサイズが必要です。このオプションを指定すると、サイズの歪みによって 48x48 のオプションが縮小されるのを防ぐことができます。 |
48×48 | 拡張機能の管理ページに表示されます |
128×128 | インストール時と Chrome ウェブストアに表示される |
マニフェストの "icons"
フィールドにアイコンを登録します。
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
その他の UI 機能
ポップアップ
ポップアップは、ユーザーがツールバー アイコンをクリックしたときに特別なウィンドウに表示される HTML ファイルです。ポップアップはウェブページとよく似ており、スタイルシートやスクリプトタグへのリンクを含めることができますが、インライン JavaScript は使用できません。
Drink Water Event のサンプル ポップアップに、利用可能なタイマー オプションが表示されます。ユーザーは、用意されているボタンのいずれかをクリックして、アラームを設定します。
<html>
<head>
<title>Water Popup</title>
</head>
<body>
<img src='./stay_hydrated.png' id='hydrateImage'>
<button id='sampleSecond' value='0.1'>Sample Second</button>
<button id='15min' value='15'>15 Minutes</button>
<button id='30min' value='30'>30 Minutes</button>
<button id='cancelAlarm'>Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
ポップアップは、ブラウザのアクションまたはページ アクションでマニフェストに登録できます。
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
ポップアップは、browserAction.setPopup
または pageAction.setPopup
を呼び出して動的に設定することもできます。
chrome.storage.local.get('signed_in', function(data) {
if (data.signed_in) {
chrome.browserAction.setPopup({popup: 'popup.html'});
} else {
chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
}
});
ツールチップ
ブラウザ アイコンにカーソルを合わせると、ツールチップを使用して、ユーザーに簡単な説明や手順が表示されます。
ツールチップは、マニフェストの "default_title"
フィールド browser_action
または page_action
に登録されます。
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
ツールチップは、browserAction.setTitle
と pageAction.setTitle
を呼び出して設定または更新することもできます。
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
特殊なロケール文字列は、国際化によって実装されます。言語固有のメッセージを格納するディレクトリを、_locales
というフォルダ内に次のように作成します。
_locales/en/messages.json
_locales/es/messages.json
各言語の messages.json
内でメッセージをフォーマットします。
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
ローカライズを有効にするには、メッセージではなく、ツールチップ フィールドにメッセージの名前を含めてください。
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
アドレスバー
ユーザーはアドレスバーから拡張機能を呼び出すことができます。マニフェストに "omnibox"
フィールドを追加し、キーワードを指定します。Omnibox New Tab Search サンプル拡張機能では、キーワードとして「nt」を使用しています。
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
アドレスバーに「nt」と入力すると、拡張機能が有効になります。これをユーザーに知らせるために、提供された 16x16 のアイコンをグレースケールし、拡張機能名の横にあるアドレスバーに表示します。
この拡張機能は、omnibox.onInputEntered
イベントをリッスンします。拡張機能がトリガーされると、新しいタブが開き、ユーザーのエントリを Google で検索します。
chrome.omnibox.onInputEntered.addListener(function(text) {
// Encode user input for special characters , / ? : @ & = + $ #
var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
chrome.tabs.create({ url: newURL });
});
コンテキスト メニュー
マニフェストで "contextMenus"
権限を付与することで、新しいコンテキスト メニュー オプションを追加します。
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
新しいメニュー エントリの横に 16x16 のアイコンが表示されます。
バックグラウンド スクリプトで contextMenus.create
を呼び出してコンテキスト メニューを作成します。これは、runtime.onInstalled
リスナー イベントで行う必要があります。
chrome.runtime.onInstalled.addListener(function() {
for (let key of Object.keys(kLocales)) {
chrome.contextMenus.create({
id: key,
title: kLocales[key],
type: 'normal',
contexts: ['selection'],
});
}
});
const kLocales = {
'com.au': 'Australia',
'com.br': 'Brazil',
'ca': 'Canada',
'cn': 'China',
'fr': 'France',
'it': 'Italy',
'co.in': 'India',
'co.jp': 'Japan',
'com.ms': 'Mexico',
'ru': 'Russia',
'co.za': 'South Africa',
'co.uk': 'United Kingdom'
};
グローバルな Google 検索のコンテキスト メニューの例では、locales.js 内のリストから複数のオプションを作成しています。拡張機能に複数のコンテキスト メニューが含まれている場合、Google Chrome では 1 つの親メニューに自動的に折りたたまれます。
コマンド
拡張機能では、特定のコマンドを定義して、キーの組み合わせにバインドできます。マニフェストの "commands"
フィールドに 1 つ以上のコマンドを登録します。
{
"name": "Tab Flipper",
...
"commands": {
"flip-tabs-forward": {
"suggested_key": {
"default": "Ctrl+Shift+Right",
"mac": "Command+Shift+Right"
},
"description": "Flip tabs forward"
},
"flip-tabs-backwards": {
"suggested_key": {
"default": "Ctrl+Shift+Left",
"mac": "Command+Shift+Left"
},
"description": "Flip tabs backwards"
}
}
...
}
コマンドを使用すると、新しいブラウザ ショートカットや代替ブラウザのショートカットを提供できます。サンプル拡張機能の Tab Flipper は、バックグラウンド スクリプトの commands.onCommand
イベントをリッスンし、登録された各組み合わせの機能を定義します。
chrome.commands.onCommand.addListener(function(command) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
// Sort tabs according to their index in the window.
tabs.sort((a, b) => { return a.index < b.index; });
let activeIndex = tabs.findIndex((tab) => { return tab.active; });
let lastTab = tabs.length - 1;
let newIndex = -1;
if (command === 'flip-tabs-forward')
newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
else // 'flip-tabs-backwards'
newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
});
});
また、コマンドでは、その拡張機能と連携するキー バインディングを作成することもできます。Hello 拡張機能の例は、ポップアップを開くコマンドを示しています。
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"manifest_version": 2,
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
この拡張機能は browser_action
を定義するため、コマンドに "execute_browser_action"
を指定して、バックグラウンド スクリプトを含めずにポップアップ ファイルを開くことができます。page_action
を使用している場合は、"execute_page_action"
に置き換えることができます。ブラウザ コマンドと拡張機能コマンドの両方を同じ拡張機能で使用できます。
ページをオーバーライド
拡張機能を使用すると、履歴、新しいタブ、ブックマークのウェブページをオーバーライドして、カスタム HTML ファイルで置き換えることができます。ポップアップと同様に、特別なロジックやスタイルを含めることができますが、インライン JavaScript は使用できません。1 つの拡張機能は、3 つのページのうちの 1 つのみをオーバーライドできます。
マニフェストの "chrome_url_overrides"
フィールドにオーバーライド ページを登録します。
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
ページをオーバーライドする場合は、"newtab"
フィールドを "bookmarks"
または "history"
に置き換える必要があります。
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>