--- title: Páginas de extensão slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages original_slug: Mozilla/Add-ons/WebExtensions/interface_do_utilizador/Paginas_de_extensão ---
{{AddonSidebar()}}

Pode inclur páginas html na sua extensão para fornecer formulários, ajuda, ou qualquer outro conteúdo que a sua extensão precisar.

Example of a simple bundled page displayed as a detached panel.

These pages also get access to the same privileged JavaScript APIs that are available to your extension's background scripts.

Especificar páginas de extensão

You can include HTML files, and their associated CSS or JavaScript files, in your extension. The files can be included in the root or organized within meaningful sub-folders.

/my-extension
    /manifest.json
    /my-page.html
    /my-page.js

Exibir páginas de extensão

There are two options for displaying extension pages: {{WebExtAPIRef("windows.create()")}} and {{WebExtAPIRef("tabs.create()")}}.

Using windows.create(), for example, you can open an HTML page into a detached panel (a window without the normal browser UI of address bar, bookmark bar, and alike) to create a dialog-like user experience:

var createData = {
  type: "detached_panel",
  url: "panel.html",
  width: 250,
  height: 100
};
var creating = browser.windows.create(createData);

When the window is no longer needed, it can be closed programmatically, for example, after the user clicks a button, by passing the id of the current window to {{WebExtAPIRef("windows.remove()")}}:

document.getElementById("closeme").addEventListener("click", function(){
  var winId = browser.windows.WINDOW_ID_CURRENT;
  var removing = browser.windows.remove(winId);
});

Páginas de extensão e histório

By default, pages you open in this way will be stored in the user's history, just like normal web pages. If you don't want to have this behavior, use {{WebExtAPIRef("history.deleteUrl()")}} to remove the browser's record:

function onVisited(historyItem) {
  if (historyItem.url == browser.extension.getURL(myPage)) {
    browser.history.deleteUrl({url: historyItem.url});
  }
}

browser.history.onVisited.addListener(onVisited);

To use the history API, you must request the "history" permission in your manifest.json file.

Desenho da página da Web

For details on how to design your web page's to match the style of Firefox, see the Photon Design System documentation.

Exemplos

The webextensions-examples repository on GitHub includes the window-manipulator example, which implements several of the options for creating windows.