В расширение можно добавить HTML-страницы, чтобы предоставить пользователю формы, помощь или другое необходимое содержимое.

Эти страницы получат доступ к привилегированным средствам JavaScript API — таким же как те, что доступны фоновым скриптам расширения. Но каждая из них будет открыта в своей отдельной вкладке — со своей очередью задач JavaScript, своими глобальными переменными и т. д.

Фоновую страницу можно считать "невидимой страницей расширения".

Определение страниц расширения

К расширению можно подключить файлы HTML и используемые в них файлы CSS и JavaScript. Можно расположить все эти файлы в корне папки расширения, а можно организовать более сложную структуру каталога.

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

Отображение страниц расширения

Есть два способа отобразить страницу расширения:windows.create() иtabs.create().

Например для того, чтобы создать окно сообщения, можно с помощью функцииwindows.create() открыть страницу HTML в отсоединённой панели (detached panel) — в окне без строки адреса, полосы закладок и других обычных элементов управления:

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

Когда окно больше не будет нужно, его можно закрыть программно.

Например, когда пользователь нажмёт на кнопку, можно вызвать функциюwindows.remove() и передать ей идентификатор текущего окна:

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

Страницы расширения и история

По умолчанию страницы, открытые таким образом, будут сохранены в истории браузера — точно так же, как и обычные веб-страницы. Если такое поведение не нужно, используйтеhistory.deleteUrl(), чтобы удалить запись:

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

Для использования API истории браузера нужно добавить разрешение "history" с помощью элементаpermissions в файлеmanifest.json.

Дизайн веб-страницы

Подробности о том, как сделать, чтобы дизайн ваших страниц совпадал со стилем Firefox, смотрите на сайтеСистема дизайна Photon (на английском языке) и в документацииbrowser styles.

Примеры

В репозиторииwebextensions-examples на GitHub есть примерwindow-manipulator, в котором используются некоторые из возможностей для создания окон.