aboutsummaryrefslogtreecommitdiff
path: root/files/ja/mozilla/add-ons/webextensions/api/menus/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/mozilla/add-ons/webextensions/api/menus/index.html')
-rw-r--r--files/ja/mozilla/add-ons/webextensions/api/menus/index.html197
1 files changed, 197 insertions, 0 deletions
diff --git a/files/ja/mozilla/add-ons/webextensions/api/menus/index.html b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html
new file mode 100644
index 0000000000..5cb7281ea6
--- /dev/null
+++ b/files/ja/mozilla/add-ons/webextensions/api/menus/index.html
@@ -0,0 +1,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="https://developer.mozilla.org/en-US/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="https://developer.mozilla.org/en-US/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>