diff options
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.html | 197 |
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> |