---
title: menus
slug: Mozilla/Add-ons/WebExtensions/API/menus
tags:
  - API
  - Add-ons
  - Extensions
  - Interface
  - Non-standard
  - Reference
  - WebExtensions
  - contextMenus
  - menus
translation_of: Mozilla/Add-ons/WebExtensions/API/menus
---
<div>{{AddonSidebar}}</div>

<p>ブラウザーのメニューシステムに項目を追加します。</p>

<p>この API は、Chromeのエクステンションでコンテキストメニューに項目を追加できる機能である<a href="https://developer.chrome.com/extensions/contextMenus">"contextMenus"</a> APIをモデルにしています。この <code>browser.menus</code> API はChromeのAPIにいくつかの機能を追加しています。</p>

<p>Firefox 55 より前ではこの API は <code>contextMenus</code> という名前でした。その名称は一応エイリアスにしています。そのため <code>contextMenus</code> という名称を使ってFirefoxや他のブラウザでも動くコードを書くことできます。</p>

<p>このAPIを使用するためには <code>menus</code>  <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> 必要です。 <code>menus</code> の代わりにエイリアスの <code>contextMenus</code> を使用することができますが、もし使用するのであれば<code>browser.contextMenus</code> でAPIにアクセスしなければなりません。.</p>

<p>この API は<code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>以外はコンテンツスクリプトからは使用できません。バックグラウンドページからは使えます。</p>

<h2 id="Creating_menu_items" name="Creating_menu_items">メニューアイテムをつくる</h2>

<p>To create a menu item call the {{WebExtAPIRef("menus.create()")}} method. You pass this method an object containing options for the item, including the item ID, item type, and the contexts in which it should be shown.</p>

<p>Listen for clicks on your menu item by adding a listener to the {{WebExtAPIRef("menus.onClicked")}} event. This listener will be passed a {{WebExtAPIRef("menus.OnClickData")}} object containing the event's details.</p>

<p>You can create four different types of menu item, based on the value of the <code>type</code> property you supply in the options to <code>create()</code>:</p>

<ul>
 <li>"normal": a menu item that just displays a label</li>
 <li>"checkbox": a menu item that represents a binary state. It displays a checkmark next to the label. Clicking the item toggles the checkmark. The click listener will be passed two extra properties: "checked", indicating whether the item is checked now, and "wasChecked", indicating whether the item was checked before the click event.</li>
 <li>"radio": a menu item that represents one of a group of choices. Just like a checkbox, this also displays a checkmark next to the label, and its click listener is passed "checked" and "wasChecked". However, if you create more than one radio item, then the items function as a group of radio items: only one item in the group can be checked, and clicking an item makes it the checked item.</li>
 <li>"separator": a line separating a group of items.</li>
</ul>

<p>If you have created more than one context menu item or more than one tools menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension. For example, here's an extension called "Menu demo" that's added two context menu items:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15431/menus-1.png" style="display: block; height: 406px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<h2 id="Icons" name="Icons">アイコン</h2>

<p>If you've specified icons for your extension using the <a href="/ja/Add-ons/WebExtensions/manifest.json/icons">"icons" manifest key</a>, your menu item will display the specified icon next to its label. The browser will try to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15433/menus-2.png" style="display: block; height: 409px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<p>Only for items in a submenu, you can specify custom icons by passing the <code>icons</code> option to {{WebExtAPIRef("menus.create()")}}:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15435/menus-3.png" style="display: block; height: 396px; margin-left: auto; margin-right: auto; width: 500px;"></p>

<h2 id="Example" name="Example">例</h2>

<p>Here's a context menu containing 4 items: a normal item, two radio items with separators on each side, and a checkbox. The radio items are given custom icons.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15437/menus-4.png" style="display: block; height: 790px; margin-left: auto; margin-right: auto; width: 500px;">You could create a submenu like this using code like:</p>

<pre class="brush: js">browser.menus.create({
  id: "remove-me",
  title: browser.i18n.getMessage("menuItemRemoveMe"),
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "separator-1",
  type: "separator",
  contexts: ["all"]
}, onCreated);

browser.menus.create({
  id: "greenify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemGreenify"),
  contexts: ["all"],
  checked: true,
  icons: {
    "16": "icons/paint-green-16.png",
    "32": "icons/paint-green-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "bluify",
  type: "radio",
  title: browser.i18n.getMessage("menuItemBluify"),
  contexts: ["all"],
  checked: false,
  icons: {
    "16": "icons/paint-blue-16.png",
    "32": "icons/paint-blue-32.png"
  }
}, onCreated);

browser.menus.create({
  id: "separator-2",
  type: "separator",
  contexts: ["all"]
}, onCreated);

var checkedState = true;

browser.menus.create({
  id: "check-uncheck",
  type: "checkbox",
  title: browser.i18n.getMessage("menuItemUncheckMe"),
  contexts: ["all"],
  checked: checkedState
}, onCreated);</pre>

<h2 id="Types" name="Types">型</h2>

<dl>
 <dt>{{WebExtAPIRef("menus.ContextType")}}</dt>
 <dd>The different contexts a menu can appear in.</dd>
 <dt>{{WebExtAPIRef("menus.ItemType")}}</dt>
 <dd>The type of menu item: "normal", "checkbox", "radio", "separator".</dd>
 <dt>{{WebExtAPIRef("menus.OnClickData")}}</dt>
 <dd>Information sent when a menu item is clicked.</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}</dt>
 <dd>The maximum number of top level extension items that can be added to a menu item whose ContextType is "browser_action" or "page_action".</dd>
</dl>

<h2 id="Functions" name="Functions">関数</h2>

<dl>
 <dt>{{WebExtAPIRef("menus.create()")}}</dt>
 <dd>新しいメニューアイテムをつくります。</dd>
 <dt>{{WebExtAPIRef("menus.update()")}}</dt>
 <dd>以前に作られたメニューアイテムを更新します。</dd>
 <dt>{{WebExtAPIRef("menus.remove()")}}</dt>
 <dd>メニューアイテムを削除します。</dd>
 <dt>{{WebExtAPIRef("menus.removeAll()")}}</dt>
 <dd>この拡張機能によって追加されたすべてのメニューアイテムを削除します。</dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<dl>
 <dt>{{WebExtAPIRef("menus.onClicked")}}</dt>
 <dd>メニューアイテムがクリックされたときに発火。</dd>
 <dt>{{WebExtAPIRef("menus.onHidden")}}</dt>
 <dd>ブラウザがメニューを隠したときに発火。</dd>
 <dt>{{WebExtAPIRef("menus.onShown")}}</dt>
 <dd>ブラウザがメニューを見せたときに発火。</dd>
</dl>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>

<p>{{ Compat("webextensions.api.menus", 1, "true") }}</p>

<p>{{WebExtExamples("h2")}}</p>

<div class="note"><strong>Acknowledgements</strong>

<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p>
</div>

<div class="hidden">
<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</pre>
</div>