アクションとは、ユーザーがツールバー アイコン(通常は拡張機能のアクション アイコン)をクリックしたときに実行されることを指します。アクションとは、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 セレクタがページ上の要素と一致する場合に、拡張機能のアクション アイコンを有効にできます。拡張機能のアクション アイコンを無効にすると、アイコンはグレー表示になります。ユーザーが無効化されたアイコンをクリックすると、拡張機能のコンテキスト メニューが表示されます。
アクション バッジ
バッジは書式設定されたテキストで、アクション アイコンの上に配置され、拡張機能の状態や、ユーザーによるアクションの必要性などを示します。サンプルの Drink Water では、アラームが正常に設定できたことを示す「オン」のバッジを表示します。拡張機能がアイドル状態のときは何も表示しません。バッジには最大 4 文字の入力を使用できます。
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()
を呼び出してツールチップを設定または更新することもできます。ツールチップが設定されていない場合は、拡張機能の名前が表示されます。