diff options
Diffstat (limited to 'files/ko/mozilla/add-ons/webextensions/user_interface')
| -rw-r--r-- | files/ko/mozilla/add-ons/webextensions/user_interface/index.html | 96 | ||||
| -rw-r--r-- | files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html | 98 |
2 files changed, 194 insertions, 0 deletions
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..e9041bc4dc --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,96 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p> + +<div class="note"> +<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">UI option</th> + <th scope="col">Description</th> + <th scope="col" style="width: 350px;">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td> + <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td> + <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td> + <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td> + <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> + </tr> + <tr> + <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td> + <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td> + <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td> + <td> + <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p> + </td> + <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td> + <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td> + <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> + <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td> + <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td> + <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td> + <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td> + <td>Offer custom address bar suggestions when the user enters a keyword.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td> + <td>A tab with an associated HTML document that displays in the browser's developer tools.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + </tr> + </tbody> +</table> + +<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..568d5feb97 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,98 @@ +--- +title: Address bar button +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +tags: + - 사용자 인터페이스 + - 웹확장 +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +<div>{{AddonSidebar}}</div> + +<p>주소줄에 추가되는 버튼으로 사용자가 확장 프로그램과 상호작용하는 일명 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">페이지 </a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">액션</a>을 말한다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<h2 id="페이지_액션과_브라우저_액션">페이지 액션과 브라우저 액션</h2> + +<p>주소줄 버튼(또는 페이지 액션)은 툴바 버튼(또는 브라우저 액션)과 아주 비슷하다.</p> + +<p>차이점은:</p> + +<ul> + <li>위치: + <ul> + <li>페이지 액션은 브라우저의 주소줄에 표시된다.</li> + <li>브라우저 액션은 주소줄 밖 브라우저의 툴바에 표시된다.</li> + </ul> + </li> + <li>보임: + <ul> + <li>페이지 액션은 평소에는 보통 숨겨지고(show_matches와 hide_matches <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">매니페스트 항목</a>으로 바꿀 수 있다), 해당 탭에 보이거나 숨길 때는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a>와 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> 를 호출한다.</li> + <li>브라우저 액션은 항상 보인다.</li> + </ul> + </li> +</ul> + +<p>하고자 하는 동작이 현재 페이지에 대한 것이면 페이지 액션을 사용하고, 전체 또는 여러 페이지가 대상이라면 브라우저 액션을 사용한다. 예를 들어:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row">유형</th> + <th scope="col">Bookmarks action</th> + <th scope="col">Content action</th> + <th scope="col">Tabs operation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">페이지 액션</th> + <td>Bookmark this page</td> + <td>Reddit enhancement</td> + <td>Send tab</td> + </tr> + <tr> + <th scope="row">브라우저 액션</th> + <td>Show all bookmarks</td> + <td>Enable ad-blocking</td> + <td>Sync all open tabs</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="페이지_액션_기술하기">페이지 액션 기술하기</h2> + +<p> </p> + +<p>페이지 액션의 속성은 manifest.json의 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> 항목에서 정의한다:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> + <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>꼭 있어야 하는 항목은 <code>default_icon</code>이다.</p> + +<p>페이지 액션을 기술하는 길은 두 가지다: <a href="/en-US/Add-ons/WebExtensions/Popups">팝업</a>이 있는가. 없는가. 팝업이 없으면, 사용자 클릭은 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>을 청취하는 확장 프로그램에 이벤트를 전달된다:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>팝업이 있으면, 클릭 이벤트는 없다: 대신, 팝업창이 열린다. 사용자는 팝업으로 일을 하고, 팝업창 바깥을 클릭하면 자동으로 닫힌다. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">팝업</a> 글에 팝업을 만들고 관리하는 보다 자세한 내용이 있다.</p> + +<p>주목! 확장 프로그램은 페이지 액션을 하나만 가질 수 있다.</p> + +<p>페이지 액션의 속성은 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API로 프로그램적으로 바꿀 수 있다.</p> + +<h2 id="아이콘">아이콘</h2> + +<p>페이지 액션에서 어떻게 아이콘을 만들고 사용하는지에 대한 자세한 내용은 <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> 문서에서 <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a>을 보라.</p> + +<h2 id="예제">예제</h2> + +<p>GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 저장소에 팝업없는 페이지 액션 예제 <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a>가 있다.</p> |