-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
76 lines (52 loc) · 3.71 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
---
title: 拡張機能ページ
slug: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages
---
{{AddonSidebar}}
拡張機能には、フォーム、ヘルプ、その他拡張機能が必要とするコンテンツを提供するために、 HTML ページを設置することができます。
![Example of a simple bundled page displayed as a detached panel.](bundled_page_as_panel_small.png)
拡張機能に含められた 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 ファイルを分離パネル(アドレスバー、ブックマークバーなどといったブラウザー UI がないウィンドウ)開くことができ、ダイアログのような使い勝手を実現することができます。
```js
let createData = {
type: "detached_panel",
url: "panel.html",
width: 250,
height: 100,
};
let creating = browser.windows.create(createData);
```
ウィンドウが必要なくなったときは、プログラムから閉じることができます。
例えば、以下の例では、ユーザーがボタンをクリックしたときに {{WebExtAPIRef("windows.remove()")}} にウィンドウ の ID を渡しています。
```js
document.getElementById("closeme").addEventListener("click", function () {
let winId = browser.windows.WINDOW_ID_CURRENT;
let removing = browser.windows.remove(winId);
});
```
## 拡張ページと履歴
既定では、この方法で開かれたページは普通のウェブページを開いたときと同じように履歴に保存されます。履歴に保存したくない場合は、 {{WebExtAPIRef("history.deleteUrl()")}} を使ってブラウザーから履歴のレコードを削除することができます。
```js
function onVisited(historyItem) {
if (historyItem.url == browser.extension.getURL(myPage)) {
browser.history.deleteUrl({ url: historyItem.url });
}
}
browser.history.onVisited.addListener(onVisited);
```
履歴 API を使用するには、 "`history`" [権限](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) を [`manifest.json`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json) ファイルでリクエストする必要があります。
## ウェブページのデザイン
Firefox のスタイルに適合するようなデザインの方法の詳細は、 [Photon Design System](https://design.firefox.com/photon/index.html) および[ブラウザースタイル](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) のドキュメントを参照してください。
## 例
GitHub の [webextensions-examples](https://github.com/mdn/webextensions-examples) リポジトリーには、ウィンドウの作成を実装した例である [window-manipulator](https://github.com/mdn/webextensions-examples/tree/master/window-manipulator) が含まれています。