Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ユーザーインターフェースをデザインする

拡張機能のユーザーインターフェースは、目的を絞り、最小限に抑える必要があります。拡張機能自体と同様に、UI はブラウジングを妨げることなく、ブラウジングエクスペリエンスをカスタマイズまたは強化する必要があります。

このガイドでは、必須のユーザーインターフェース機能と省略可能なユーザーインターフェース機能について説明します。拡張機能内でさまざまな UI 要素を実装する方法とタイミングを理解するためにご活用ください。

すべてのページで拡張機能を有効にする

拡張機能の機能がほとんどの状況で機能する場合は、browser_action を使用します。

ブラウザアクションを登録する

マニフェストに "browser_action" フィールドが登録されます。

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

"browser_action" を宣言すると、アイコンが色付けされ、拡張機能がユーザーに利用可能であることが示されます。

バッジを追加する

バッジは、ブラウザアイコンの上に最大 4 文字のカラーバナーを表示します。バッジは、マニフェストで "browser_action" を宣言する拡張機能でのみ使用できます。

バッジを使用して、拡張機能の状態を示します。Drink Water Event のサンプルでは、「ON」というバッジが表示され、アラームが正常に設定されたことがユーザーに示されます。拡張機能がアイドル状態の場合は何も表示されません。

バッジのテキストを設定するには 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 を呼び出します。Page action by 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"
    }
  }
  ...
}

アイコンはすべて正方形にする必要があります。正方形でない場合、歪んで表示されることがあります。アイコンが指定されていない場合、Chrome は汎用アイコンをツールバーに追加します。

追加のアイコンを作成して登録する

ツールバー以外で使用する場合は、次のサイズのアイコンを追加します。

アイコンのサイズ	アイコンの使用
16x16	拡張機能のページのファビコン
32x32	Windows パソコンではこのサイズが必要になることがよくあります。このオプションを指定すると、48x48 オプションが縮小されてサイズが歪むのを防ぐことができます。
48x48	拡張機能の管理ページに表示されます
128x128	インストール時と 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'});
  }
});

ツールチップを使用すると、ブラウザアイコンにカーソルを合わせたときに、簡単な説明や手順をユーザーに表示できます。

ツールチップの例のスクリーンショット

ツールチップは、マニフェストの browser_action または page_action の "default_title" フィールドに登録されます。

{
"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'
};

locales.js拡張機能に複数のコンテキストメニューが含まれている場合、Google Chrome は自動的にそれらを 1 つの親メニューに折りたたみます。

複数のコンテキストメニューが折りたたまれる

コマンド

拡張機能は特定のコマンドを定義し、キーの組み合わせにバインドできます。マニフェストの 1 つ以上のコマンドを "commands" フィールドに登録します。

{
  "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 Extensions の例では、ポップアップを開くコマンドが用意されています。

{
  "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>