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

マウスの代替クリック（右クリックとも呼ばれます）のコンテキスト メニューが表示されます。このページでは、コンテキスト メニューを実装する方法について説明します。関連する API メンバーの完全なリストについては、browser.contextMenu をご覧ください。

コンテキスト メニューを作成するには、まず manifest.json ファイルに "contextMenus" 権限を追加します。

manifest.json:

  "permissions": [
    "contextMenus"
  ],

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

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

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

service-worker.js:

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

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