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
|
---
title: Página de opções
slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Options_pages
tags:
- Extensões da Web
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/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>
|
