diff options
Diffstat (limited to 'files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages')
| -rw-r--r-- | files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html new file mode 100644 index 0000000000..d3a560412f --- /dev/null +++ b/files/pt-pt/mozilla/add-ons/webextensions/user_interface/options_pages/index.html @@ -0,0 +1,65 @@ +--- +title: Página de opções +slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +tags: + - Extensões da Web +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages +original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>Uma página de <strong>Opções</strong> permite-lhe definir as preferências para sua extensão que os seus utilizadores podem alterar. Os utilizadores podem aceder á página das opções para uma extensão a partir do do gestor de extras do navegador:</p> + +<p>{{EmbedYouTube("02oXAcbUv-s")}}</p> + +<p>The way users access the page, and the way it's integrated into the browser's user interface, will vary from one browser to another.</p> + +<ul> +</ul> + +<p>You can open the page programmatically by calling <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a>.</p> + +<p>Options pages have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. See <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> for more details.</p> + +<h2 id="Especificar_a_página_de_opções">Especificar a página de opções</h2> + +<p>To create an options page, write an HTML file defining the page. This page can include CSS and JavaScript files, like a normal web page. This page, from the <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> example, includes a JavaScript file:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + </head> + +<body> + <form> + <label>Favourite colour</label> + <input type="text" id="colour" > + <button type="submit">Save</button> + </form> + <script src="options.js"></script> +</body> + +</html></pre> + +<p>JavaScript em execução na página pode utilizar a <a href="/pt-PT/Add-ons/WebExtensions/API">API das Extensões da Web</a> que o extra tem <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissões</a> para. Em particular, pode utilziar a APi de <a href="/pt-PT/Add-ons/WebExtensions/API/Armazenamento" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>armazenamento</code></a> para manter as preferências.</p> + +<p>Package the page's files in your extension.</p> + +<p>You also need to include the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> key in your manifest.json file, giving it the URL to the page.</p> + +<pre class="brush: json">"options_ui": { + "page": "options.html", + "browser_style": true +},</pre> + +<h2 id="Exemplos">Exemplos</h2> + +<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use an options page:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> example extension with options page</li> +</ul> +</div> |