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

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

manifest.json:

  "permissions": [
    "contextMenus"
  ],

メニュー アイテムの横にアイコンを表示する場合は、必要に応じて "icons" キーを使用します。この例では、「Google グローバル検索」拡張機能のメニュー項目で 16x16 のアイコンが使用されています。

16 × 16 のアイコンのコンテキスト メニュー項目。

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

図 4: コンテキスト メニューとネストされたサブメニュー

サンプルでは、拡張機能 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'],
    });
  }
});