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

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

manifest.json:

  "permissions": [
    "contextMenus"
  ],

メニュー項目の横にアイコンを表示する場合は、必要に応じて "icons" キーを使用します。この例では、「Global Google Search」拡張機能のメニュー項目で 16 x 16 のアイコンを使用しています。

16×16 のアイコンを含むコンテキスト メニュー項目。
16 x 16 のアイコンが付いたコンテキスト メニュー項目。

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

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

このサンプルでは、contextMenus.create() を 拡張機能の Service Workerで呼び出すことで、これを示しています。サブメニュー項目は 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'],
    });
  }
});