1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
---
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>
|
