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
|
---
title: Interfaccia utente
slug: Mozilla/Add-ons/WebExtensions/user_interface
translation_of: Mozilla/Add-ons/WebExtensions/user_interface
---
<div>{{AddonSidebar}}</div>
<p>Le estensioni che usa le API delle WebExtension sono fornite con diverse opzioni dell'interfaccia utente che possono aggiungere nuove funzioni all'utente. Un elenco di queste opzioni è presente di seguito, in questa sezione è presente una descrizione dettagliata di ogni opzione.</p>
<div class="note">
<p>Per consigli sull'utilizzo di questi componenti UI per permettere un migliore utilizzo, da parte dell'utente, della vostra estensione, guardate l'articolo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a>.</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>Un pulsante nella barra degli strumenti del browser che invia un evento all'estensione quando si fa clic sul pulsante. Per impostazione predefinita, il pulsante è visibile in tutte le schede.</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><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli strumenti del browser.</span> la finestra<span title=""> popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></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><span class="tlid-translation translation" lang="it"><span title="">Un pulsante nella barra degli indirizzi del browser che invia un evento all'estensione quando si fa clic.</span> <span title="">Per impostazione predefinita, il pulsante è nascosto in tutte le schede.</span></span></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><span class="tlid-translation translation" lang="it"><span title="">Una finestra popup che si attiva facendo clic su un pulsante nella barra degli indirizzi del browser.</span> La<span title=""> finestra popup è definita in un documento HTML che gestisce l'interazione con l'utente.</span></span></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>Elementi del menu, caselle di controllo e pulsanti di opzione su uno o più menu di scelta rapida del browser. Inoltre, i menu possono essere strutturati aggiungendo separatori. Quando si fa clic su una voce del menu, un evento viene inviato all'estensione.</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"><span class="tlid-translation translation" lang="it"><span title="">Un documento HTML visualizzato accanto a una pagina Web, con l'opzione per contenuti unici per pagina.</span> <span title="">La barra laterale viene aperta quando viene installata l'estensione, quindi obbedisce alla selezione della visibilità della barra laterale dell'utente.</span> <span title="">L'interazione dell'utente all'interno della barra laterale è gestita dal suo documento HTML.</span></span></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>Una pagina che consente di definire le preferenze della vostra estensione che gli utenti possono modificare. L'utente può accedere a questa pagina dal gestore dei componenti aggiuntivi del browser.</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>Utilizzare le pagine Web incluse nell'estensione per fornire moduli, aiuto o qualsiasi altro contenuto richiesto, all'interno di finestre o schede.</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>Notifiche temporanee visualizzate all'utente tramite il meccanismo delle notifiche del sistema operativo sottostante. Invia un evento all'estensione quando l'utente fa clic su una notifica o quando una notifica si chiude (automaticamente o su richiesta dell'utente).</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>Offre suggerimenti personalizzati sulla barra degli indirizzi quando l'utente inserisce una parola chiave.</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>Una scheda con un documento HTML associato che viene visualizzato negli strumenti di sviluppo del browser.</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>Le seguenti guide pratiche forniscono indicazioni dettagliate per la creazione di alcune di queste opzioni dell'interfaccia utente:</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>
</ul>
|
