コンテキスト メニューを作成する

マウスをもう 1 回クリック（右クリック）するとコンテキスト メニューが表示されます。コンテキスト メニューを作成するには、まず manifest.json ファイルに "contextMenus" 権限を追加します。

manifest.json:

  "permissions": [
    "contextMenus"
  ],

必要に応じて、"icons" キーを使用して、メニュー項目の横にアイコンを表示します。この例の [グローバル Google 検索]のメニュー項目は16x16 のアイコンを使用します

</ph> 16x16 のアイコンがあるコンテキスト メニュー項目。

この例の残りの部分は、複数のコンテキスト メニュー オプションを提供するグローバル Google 検索のコンテキスト メニュー サンプルから取得しています。拡張機能に複数のコンテキスト メニューが含まれている場合、次のように、Chrome は自動的に 1 つの親メニューに折りたたみます。

</ph>

サンプルでは、拡張機能の Service Worker で contextMenus.create() を呼び出してこれを示しています。サブメニュー項目は locales.js ファイルからインポートされます。次に、runtime.onInstalled がそれらを反復処理します。

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

chrome.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    chrome.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});