--- 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 ---
Uma página de Opções 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:
{{EmbedYouTube("02oXAcbUv-s")}}
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.
You can open the page programmatically by calling runtime.openOptionsPage()
.
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 eval()
. See Content Security Policy for more details.
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 favourite-colour example, includes a JavaScript file:
<!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>
JavaScript em execução na página pode utilizar a API das Extensões da Web que o extra tem permissões para. Em particular, pode utilziar a APi de armazenamento
para manter as preferências.
Package the page's files in your extension.
You also need to include the options_ui
key in your manifest.json file, giving it the URL to the page.
"options_ui": { "page": "options.html", "browser_style": true },
The webextensions-examples repo on GitHub, contains several examples of extensions that use an options page: