1 files changed, 145 insertions, 0 deletions
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html
new file mode 100644
index 0000000000..035077de99
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html
@@ -0,0 +1,145 @@
+---
+title: menus.onShown
+slug: Mozilla/Add-ons/WebExtensions/API/menus/onShown
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown
+original_slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Fired when the browser has shown a menu.</p>
+
+<p>An extension can use this event to update its menu items using information that's only available once the menu is shown. Typically an extension will figure out the update in its <code>onShown</code> handler and then call {{WebExtAPIRef("menus.refresh()")}} to update the menu itself.</p>
+
+<p>The handler can add, remove, or update menu items.</p>
+
+<p>For example, the <a href="https://github.com/mdn/webextensions-examples/tree/master/menu-labelled-open">menu-labelled-open</a> example extension adds a menu item that's shown when the user clicks a link, and that, when clicked, just opens the link. It uses <code>onShown</code> and <code>refresh()</code> to annotate the menu item with the hostname for the link, so the user can easily see where they will go before they click.</p>
+
+<p>Note that an extension should not take too much time before calling <code>refresh()</code>, or the update will be noticeable to the user.</p>
+
+<p>The handler is passed some information about the menu and its contents, and some information from the page (such as the link and/or selection text). To get access to the information from the page, your extension must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for it.</p>
+
+<p>If the <code>onShown</code> handler calls any asynchronous APIs, then it's possible that the menu has been closed again before the handler resumes execution. Because of this, if a handler calls any asynchronous APIs, it should check that the menu is still being displayed before it updates the menu. For example:</p>
+
+<pre class="brush: js">var lastMenuInstanceId = 0;
+var nextMenuInstanceId = 1;
+
+browser.menus.onShown.addListener(async function(info, tab) {
+  var menuInstanceId = nextMenuInstanceId++;
+  lastMenuInstanceId = menuInstanceId;
+
+  // Call an async function
+  await .... ;
+
+  // After completing the async operation, check whether the menu is still shown.
+  if (menuInstanceId !== lastMenuInstanceId) {
+    return; // Menu was closed and shown again.
+  }
+  // Now use menus.create/update + menus.refresh.
+});
+
+browser.menus.onHidden.addListener(function() {
+  lastMenuInstanceId = 0;
+});</pre>
+
+<p>Note that it is possible to call menus API functions synchronously, and in this case you don't have to perform this check:</p>
+
+<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) {
+  browser.menus.update(menuId, ...);
+   // Note: Not waiting for returned promise.
+  browser.menus.refresh();
+});</pre>
+
+<p>However, if you call these APIs asynchronously, then you do have to perform the check:</p>
+
+<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) {
+  var menuInstanceId = nextMenuInstanceId++;
+  lastMenuInstanceId = menuInstanceId;
+
+  await browser.menus.update(menuId, ...);
+  // must now perform the check
+  if (menuInstanceId !== lastMenuInstanceId) {
+    return;
+  }
+  browser.menus.refresh();
+});</pre>
+
+<p>Firefox makes this event available via the <code>contextMenus</code> namespace as well as the <code>menus</code> namespace.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">browser.menus.onShown.addListener(listener)
+browser.menus.onShown.removeListener(listener)
+browser.menus.onShown.hasListener(listener)
+</pre>
+
+<p>Events have three functions:</p>
+
+<dl>
+ <dt><code>addListener(listener)</code></dt>
+ <dd>Adds a listener to this event.</dd>
+ <dt><code>removeListener(listener)</code></dt>
+ <dd>Stop listening to this event. The <code>listener</code> argument is the listener to remove.</dd>
+ <dt><code>hasListener(listener)</code></dt>
+ <dd>Check whether <code>listener</code> is registered for this event. Returns <code>true</code> if it is listening, <code>false</code> otherwise.</dd>
+</dl>
+
+<h2 id="addListener_syntax">addListener syntax</h2>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>
+ <p>Function that will be called when this event occurs. The function will be passed the following arguments:</p>
+
+ <dl class="reference-values">
+  <dt><code>info</code></dt>
+  <dd>
+  <p><code>Object</code>. This is just like the {{WebExtAPIRef('menus.OnClickData')}} object, except it contains two extra properties:</p>
+
+  <ul>
+   <li><code>contexts</code>: an array of all the {{WebExtAPIRef("menus.ContextType", "contexts")}} that are applicable to this menu.</li>
+   <li><code>menuIds</code>: an array of IDs of all menu items belonging to this extension that are being shown in this menu.</li>
+  </ul>
+
+  <p>Compared with <code>menus.OnClickData</code>, the <code>info</code> object also omits the <code>menuItemId</code> and <code>modifiers</code> properties, because of course these are not available until a menu item has been selected.</p>
+
+  <p>The <code>contexts</code>, <code>menuIds</code>, <code>frameId</code>, and <code>editable</code> properties are always provided. All the other properties in <code>info</code> are only provided if the extension has the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the page.</p>
+  </dd>
+ </dl>
+
+ <dl class="reference-values">
+  <dt><code>tab</code></dt>
+  <dd>{{WebExtAPIRef('tabs.Tab')}}. The details of the tab where the click took place. If the click did not take place in or on a tab, this parameter will be missing.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.menus.onShown", 10)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>This example listens for the context menu to be shown over a link, then updates the <code>openLabelledId</code> menu item with the link's hostname:</p>
+
+<pre class="brush: js">function updateMenuItem(linkHostname) {
+  browser.menus.update(openLabelledId, {
+    title: `Open (${linkHostname})`
+  });
+  browser.menus.refresh();
+}
+
+browser.menus.onShown.addListener(info =&gt; {
+  if (!info.linkUrl) {
+    return;
+  }
+  let linkElement = document.createElement("a");
+  linkElement.href = info.linkUrl;
+  updateMenuItem(linkElement.hostname);
+});
+</pre>
+
+<p>{{WebExtExamples}}</p>