Страницы расширений

Вы можете включать HTML-файлы — а также связанные CSS- или JavaScript-файлы — в своё расширение. Файлы можно включить в корневой каталог или организовать в осмысленных подкаталогах.

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

Существует два варианта отображения страниц расширения: windows.create() и tabs.create().

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

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", () => {
  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» разрешение в вашем файле manifest.json.

Подробную информацию о том, как создать дизайн вашей веб-страницы, чтобы он соответствовал стилю Firefox, см. в документации Системы дизайна Acorn и стилей браузера.

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