アクションを実装する

アクションとは、ユーザーがツールバー アイコン（通常は拡張機能のアクション アイコン）をクリックしたときに実行されることです。アクションが Action API を使用して拡張機能機能を呼び出すか、ポップアップを開いた。このページでは、拡張機能の機能を呼び出す方法について説明します。ポップアップを使用するには、ポップアップを追加するをご覧ください。

アクションを登録する

chrome.action API を使用するには、拡張機能のマニフェスト ファイルに "action" キーを追加します。このフィールドのオプション プロパティの詳細については、chrome.action API リファレンスのマニフェスト セクションをご覧ください。

manifest.json:

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

操作に応答する

ユーザーがアクション アイコンをクリックしたときの onClicked ハンドラを登録します。manifest.json ファイルでポップアップが登録されている場合、このイベントはトリガーされません。

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

条件付きでアクションを有効にする

chrome.declarativeContent API を使用すると、ページの URL に基づいて、または CSS セレクタがページの要素と一致した場合に、拡張機能のアクション アイコンを有効にできます。拡張機能のアクション アイコンが無効になっていると、アイコンはグレー表示されます。無効状態のアイコンをクリックすると、拡張機能のコンテキスト メニューが表示されます。

<ph type="x-smartling-placeholder">
</ph> 無効化されたアクションのアイコン <ph type="x-smartling-placeholder">
</ph> 無効なアクションのアイコン。

アクション バッジ

バッジはアクション アイコンの上に配置される書式設定されたテキストで、拡張機能の状態やユーザーによってアクションが必要であることを示します。これを示すために、Drink Water サンプルでは「オン」のバッジが表示されています。アラームが正常に設定され、拡張機能がアイドル状態のときは何も表示されません。バッジには最大 4 文字を含めることができます。

<ph type="x-smartling-placeholder">
</ph> バッジなしの拡張機能アイコンとバッジ付き拡張機能アイコン。
バッジなしの拡張機能アイコン（左）とバッジ付き（右）。

chrome.action.setBadgeText() を呼び出してバッジのテキストを設定し、chrome.action.setBadgeBackgroundColor()` を呼び出して背景色を設定します。

service-worker.js:

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

ツールチップ

manifest.json ファイルの "action" キーの下にある "default_title" フィールドにツールチップを登録します。

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

action.setTitle() を呼び出して、ツールチップを設定または更新することもできます。ツールチップが設定されていない場合、拡張機能の名前が表示されます。