blob: b7c071d37a9661e19a88156fa5e8dcfdedbb8ced (
plain)
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
|
---
title: User interface
slug: Mozilla/Add-ons/WebExtensions/user_interface
tags:
- Kullanıcı arayüzü
- WebExtensions
- İniş
translation_of: Mozilla/Add-ons/WebExtensions/user_interface
original_slug: Mozilla/Eklentiler/WebExtensions/user_interface
---
<div><font><font>{{AddonSidebar}}</font></font></div>
<p><font><font>Kullanım WebExtension API'leri onların işlevselliği kullanıcıya sunulabilir böylece birkaç kullanıcı arayüzü seçenekleri ile sağlandığını uzantılar. </font><font>bu seçeneklerden bir özeti bu bölümde her kullanıcı arayüz seçeneği için daha ayrıntılı tanıtımıyla, aşağıda verilmiştir.</font></font></p>
<div class="note">
<p><font><font>Uzantınızda mükemmel bir kullanıcı deneyimi yaratmak için bu UI bileşenlerini kullanarak tavsiye için lütfen </font></font><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices"><font><font>Kullanıcı deneyimi en iyi uygulamaları</font></font></a><font><font> makale.</font></font></p>
</div>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><font><font>UI seçeneği</font></font></th>
<th scope="col"><font><font>Açıklama</font></font></th>
<th scope="col" style="width: 350px;"><font><font>Misal</font></font></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/Add-ons/WebExtensions/user_interface/Browser_action"><font><font>Araç Çubuğu düğme</font></font></a><font><font> (tarayıcı eylem)</font></font></td>
<td><font><font>tıklandığında uzantısı bir olay gönderir Tarayıcı araç çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin görünür.</font></font></td>
<td><img alt="Örnek bir araç çubuğu düğmesi (tarayıcı eylem) gösteren." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
</tr>
<tr>
<td><font><font>Bir ile Çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td>
<td><font><font>düğme tıklandığında o araç çubuğu tarayıcıda bir düğmeye bir açılır pencere açılır. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td>
<td><img alt="Bir araç çubuğu düğmesini pop-up örneği" 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"><font><font>Adres çubuğu düğmesi</font></font></a><font><font> (sayfa aksiyon)</font></font></td>
<td><font><font>tıklandığında uzantısı bir olay gönderir tarayıcının adres çubuğunda bir düğme. </font><font>Varsayılan olarak, düğme tüm sekmelerin gizli.</font></font></td>
<td><img alt="Örnek bir adres çubuğu düğmesini gösteren (sayfa aksiyon) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
</tr>
<tr>
<td><font><font>Bir ile Adres çubuğu düğmesi </font></font><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups"><font><font>açılır</font></font></a></td>
<td><font><font>düğmesi tıklandığında açılan tarayıcı adres çubuğunda bir düğmeyi bir açılır pencere. </font><font>Popup kullanıcı etkileşimi yönetir bir HTML belgesinde tanımlanmıştır.</font></font></td>
<td><img alt="Adres çubuğu düğmesinin bir popup örneği" 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"><font><font>Bağlam menü öğesi</font></font></a></td>
<td><font><font>bir ya da tarayıcının bağlam menüleri daha menü öğeleri onay kutularını ve radyo düğmeleri. </font><font>Ayrıca, menüler ayırıcılar ekleyerek yapılandırılabilir. </font><font>menü öğeleri tıklandığında bir olay uzantısı gönderilir.</font></font></td>
<td><img alt="bağlam menü demo örnekten bir WebExtension tarafından eklenen içerik menü öğeleri, örneği" 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"><font><font>Kenar çubuğu</font></font></a></td>
<td>
<p dir="ltr"><font><font>Bir HTML dokümanı sayfa başına benzersiz içerik seçeneği ile, bir web sayfası yanında görüntülenen. </font><font>uzantı yüklendiğinde kenar çubuğu daha sonra kullanıcının kenar çubuğu görünürlük seçimi itaat, açılır. </font><font>Kenar çubuğunda içinde kullanıcı etkileşimi kendi HTML belgesi tarafından gerçekleştirilmektedir.</font></font></p>
</td>
<td><img alt="bir kenar çubuğu Örnek" 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"><font><font>Seçenekler sayfa</font></font></a></td>
<td><font><font>Eğer kullanıcıların değişebileceğini Uzantınız için tercihlerini belirlemek sağlayan bir sayfa. </font><font>kullanıcı tarayıcının eklenti yöneticisinden bu sayfaya erişebilirsiniz.</font></font></td>
<td><img alt="Örnek favori renkleri örnekte eklenen seçenekler sayfa içeriğini gösteren." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
</tr>
<tr>
<td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages"><font><font>Uzatma sayfa</font></font></a></td>
<td><font><font>Uzantınızda dahil kullanın web sayfaları pencere veya sekme içindeki formları, yardım veya gerekli diğer herhangi bir içerik sağlamak.</font></font></td>
<td><img alt="Basit bir paket sayfası örneği müstakil bir panel olarak görüntülenir." 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"><font><font>Bildirim</font></font></a></td>
<td><font><font>Geçici bildirimleri temel işletim sisteminin bildirimleri mekanizması yoluyla kullanıcıya görüntülenir. </font><font>Kullanıcı bir bildirim veya bir bildirim kapanır (ya otomatik olarak veya kullanıcının isteği üzerine) tıkladığında uzantısına bir olay gönderir.</font></font></td>
<td><img alt="Uzatma tetiklenen sistemi bildirimi Örnek" 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"><font><font>Adres çubuğu öneri</font></font></a></td>
<td><font><font>Kullanıcı bir anahtar kelime girdiğinde Özel adres çubuğu önerilerinin sunun.</font></font></td>
<td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." 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"><font><font>Geliştirici araçları paneli</font></font></a></td>
<td><font><font>ilişkili HTML dokümanı ile bir sekme o tarayıcının geliştirici araçları görüntüler.</font></font></td>
<td><img alt="Örnek Adres çubuğu önerilerini firefox_code_search WebExtension en özelleştirme sonucunu gösteren." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
</tr>
</tbody>
</table>
<p><font><font>kılavuzları nasıl yapılır şu bu kullanıcı arayüzü seçeneklerden bazılarını oluşturmak için adım adım rehberlik:</font></font></p>
<ul>
<li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines"><font><font>Erişilebilirlik yönergeleri</font></font></a></li>
<li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar"><font><font>araç çubuğuna bir düğme ekleyin</font></font></a></li>
<li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles"><font><font>Tarayıcı stilleri</font></font></a></li>
<li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools"><font><font>geliştirici araçları genişletme</font></font></a></li>
<li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page"><font><font>Bir ayarları sayfası uygulamak</font></font></a></li>
</ul>
|
