Bundled web pages

You can include web pages in your WebExtension to provide forms, help, or any other content your WebExtension needs.

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

Specifying bundled web pages

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

Displaying bundled web pages

There are two options for displaying bundled web pages: windows.create() and tabs.create().

Using windows.create(), for example, you can open a bundled 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 close  programmatically, for example, after the user clicks a button, by passing the id of the current window to windows.remove():

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

Examples

The window-manipulator example WebExtension, from the webextensions-examples repo on GitHub, illustrates several of the options for creating windows.

Document Tags and Contributors

 Contributors to this page: rebloor
 Last updated by: rebloor,