拡張機能にはフォームやヘルプなど拡張機能が必要とするコンテンツを提供するためのHTMLを含めることができます。
拡張機能に含められた HTML ページは拡張機能がバックグラウンドで動作するのと同じ特権を持った JavaScript の API を利用できますが、これらのページはそれぞれのタブ、JavaScriptイベントキュー、グローバル変数を持ちます。
バックグラウンドのページは「隠れた拡張ページ」と考えてください。
HTMLファイルと関連づけられた CSS や JavaScript ファイルを拡張機能に含めることができます。これらのファイルはルートに置くこともできますし、サブディレクトリに分けることもできます。
/my-extension
/manifest.json
/my-page.html
/my-page.js
拡張ページを表示する際に2つの選択肢があります。それは、 {{WebExtAPIRef("windows.create()")}} と {{WebExtAPIRef("tabs.create()")}} です。
windows.create() を使うと、例えば、HTML ファイルを detached panel (アドレスバー、ブックマークバーなどといったブラウザ UI がないウィンドウ) 開くことができ、ダイアログのようなユーザーエクスペリエンスを実現できます:
var createData = {
type: "detached_panel",
url: "panel.html",
width: 250,
height: 100
};
var creating = browser.windows.create(createData);
ウィンドウが必要なくなったときは JavaScript で閉じることができます。例えば、以下の例では、ユーザーがボタンをクリックしたときに {{WebExtAPIRef("windows.remove()")}} にウィンドウ の ID を渡しています:
document.getElementById("closeme").addEventListener("click", function(){
var winId = browser.windows.WINDOW_ID_CURRENT;
var removing = browser.windows.remove(winId);
});
デフォルトではこの方法で開かれたページは普通のウェブページを開いたときと同じように履歴に保存されます。履歴に保存したくない場合、 {{WebExtAPIRef("history.deleteUrl()")}} を使ってブラウザから履歴のレコードを削除することができます。
function onVisited(historyItem) {
if (historyItem.url == browser.extension.getURL(myPage)) {
browser.history.deleteUrl({url: historyItem.url});
}
}
browser.history.onVisited.addListener(onVisited);
History API を使には manifest.json で "history" パーミッション をリクエストする必要があります。
Firefox のスタイルとマッチするようなデザインの方法の詳細はPhoton Design System と browser styles をお読みください。
GitHubの webextensions-examples リポジトリにはウィンドウの作成を実装する例である window-manipulator が含まれています。