recursal/MDN huggingface dataset:
background
==========

|  |  |
| --- | --- |
| 種類 | `Object` |
| 必須 | いいえ |
| 例 | 
```json
"background": {
  "scripts": ["background.js"]
}
```
 |

`background` を使って拡張機能に 1 つ以上のバックグラウンドスクリプトや、オプションとしてバックグラウンドページを含めます。

バックグラウンドスクリプトは、特定のウェブページやブラウザーウィンドウとは独立した、長い期間の状態や、長い期間の操作を維持する必要があるコードを置く場所です。

`persistent` が `false` と指定されている場合を除き、バックグラウンドスクリプトは拡張機能が読み込まれるとすぐに読み込まれて、拡張機能が無効化やアンインストールされるまで読み込まれたままになります。スクリプト内では、必要な permissions を要求している限り、あらゆる WebExtension APIs を使用できます

詳しくは 拡張機能の中身の「バックグラウンドページ」の節を見てください。

`background` キーは次の 2 つのプロパティ(両方ともオプションです)のうち 1 つを持つオブジェクトです:

|  |  |
| --- | --- |
| `"scripts"` | 
 文字列配列であり、各要素は JavaScript ファイルへのパスです。パスは
 manifest.json
 を基準にした相対パスです。これらは、拡張機能に含まれるバックグラウンドスクリプトです。


 これらのスクリプトは、同じグローバル
 `window` を共有します。

これらのスクリプトは、配列内の出現順で読み込まれます。

`"scripts"`
 を指定したときは、スクリプトを実行するための空のバックグラウンドページが作られます。


**注:**
`<script>`
 タグを使って外部からスクリプトを取り込む場合 (例:
 `<script src =
"https://code.jquery.com/jquery-1.7.1.min.js">`)、拡張機能の manifest.json で
 `content\_security\_policy`
 キーを変更する必要があります。


**注:** Firefox 50
 より前のバージョンにはこれに影響するバグがあることに注意してください。Firefox
 のデバッガーが開いているときは、必ずしも配列内の出現順でスクリプトが読み込まれるとは限りません。このバグに対処するには、`"page"`
 プロパティを使い、そのページから
 `<script>`
 タグによってバックグラウンドスクリプトを読み込んでください。このバグは
 Firefox 50
 で修正され、それ以降は常に配列内の出現順でスクリプトが読み込まれます。

 |
| `"page"` | 
 もしバックグラウンド ページに何か内容を持たせたい場合、そのページを
 `"page"` により指定することができます。 manifest.json
 から拡張機能の中に含まれるHTMLドキュメントを参照するためのパス文字列の
 `String` を指定します。


 このプロパティを使うときは、`"scripts"`
 を使ってバックグラウンドスクリプトを指定することはできませんが、通常のウェブページと同じように、バックグラウンドページ内からスクリプトを読み込むことができます。
  |

`background` は以下の追加のキーを含むこともできます:

|  |  |
| --- | --- |
| `persistent` | `Boolean` の値。* `true`
 を指定すると、拡張機能が読み込まれるかブラウザーが起動した時から、拡張機能の削除、無効化、もしくはブラウザーが終了するまでの間、バックグラウンドページがメモリー上に保持され続けます（つまり、バックグラウンドページが永続化されます）。
* `false`
 を指定すると、バックグラウンドページはアイドル状態の時にメモリー上からアンロードされ、必要に応じて再生成されます。このようなバックグラウンドページは、リスナーを登録したイベントを処理するためだけにメモリー上に読み込まれるため、イベントページとも呼ばれます。バックグラウンドページがメモリ上からアンロードされていても、リスナーの登録状態は永続化されますが、他の値は永続化されません。イベントページにおいてデータを永続化したい場合は、storage APIを使う必要があります。
 |

例
-


```json
  "background": {
    "scripts": ["jquery.js", "my-background.js"]
  }
```


２つのバックグラウンドスクリプトを読み込みます。


```json
  "background": {
    "page": "my-background.html"
  }
```


カスタムのバックグラウンドページを読み込みます。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
optional\_permissions
=====================

|  |  |
| --- | --- |
| 型 | `Array` |
| 必須 | いいえ |
| 例 | 
```json
"optional\_permissions": [
  "\*://developer.mozilla.org/\*",
  "webRequest"
]
```
 |

`optional_permissions` キーを使って、拡張機能がインストールされた後に、実行時に要求するパーミッションを一覧できます。

`permissions` キーは拡張機能がインストールされる時に必要とするパーミッションを一覧しますが、`optional_permissions` は拡張機能のインストール時には必要でないが、インストール後のどこかで要求されることのあるパーミッションを一覧します。パーミッションを要求するには、`permissions` API を使います。パーミッションを要求すると、おそらくユーザーに拡張機能にパーミッションを許可しても良いかを尋ねるダイアログが表示されるでしょう。

このキーは 2 種類のパーミッションを含みます: ホストパーミッションと API パーミッションです。

ホストパーミッション
----------

これは `permissions` キーで指定できるホストパーミッションと同じです。

API パーミッション
-----------

下記のいずれも入れることができますが、すべてのブラウザーに入ってはいません: ブラウザー固有の詳細については、互換性テーブルを確認してください:

* `activeTab`
* `background`
* `bookmarks`
* `browserSettings`
* `clipboardRead`
* `clipboardWrite`
* `contentSettings`
* `contextMenus`
* `cookies`
* `debugger`
* `downloads`
* `downloads.open`
* `geolocation`
* `history`
* `idle`
* `management`
* `notifications`
* `pageCapture`
* `tabs`
* `topSites`
* `webNavigation`
* `webRequest`
* `webRequestBlocking`

これは `permissions` で許可される API パーミッションのサブセットです。

このセットでは、下記のパーミッションが、ユーザープロンプトなしで暗黙的に許可されます: activeTab, cookies, idle, webRequest, webRequestBlocking

例
-


```json
 "optional\_permissions": ["\*://developer.mozilla.org/\*"]
```


拡張機能に developer.mozilla.org 以下のページの権限アクセス要求を有効にします。


```json
  "optional\_permissions": ["tabs"]
```


拡張機能に `tabs` API の権限部分へのアクセス要求を有効にします。


```json
  "optional\_permissions": ["\*://developer.mozilla.org/\*", "tabs"]
```


拡張機能に上記の両方への要求を有効にします。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
incognito
=========

|  |  |
| --- | --- |
| 型 | `String` |
| 必須 | いいえ |
| 例 | 
```json
"incognito": "spanning"
```


```json
"incognito": "split"
```


```json
"incognito": "not\_allowed"
```
 |

`incognito` キーを使ってプライベートブラウジングウィンドウで機能拡張が動作する方法を管理できます。

This is a string which may take any of the following values:

* "spanning" (the default): the extension will see events from private and non-private windows and tabs. Windows and tabs will get an `incognito` property in the `Window` (en-US) or `Tab` that represents them. This property indicates whether or not the object is private:

```js
browser.windows.getLastFocused().then((windowInfo) => {
  console.log(`Window is private: ${windowInfo.incognito}`);
});
```

* "split": the extension will be split between private and non-private windows. There are effectively two copies of the extension running: one sees only non-private windows, the other sees only private windows. Each copy has isolated access to Web APIs (so, for example, `localStorage` (en-US) is not shared). However, the WebExtension API `storage.local` is shared.
* "not\_allowed": private tabs and windows are invisible to the extension.
例
-


```json
"incognito": "spanning"
```



```json
"incognito": "split"
```



```json
"incognito": "not\_allowed"
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
options\_ui
===========

|  |  |
| --- | --- |
| 型 | `Object` |
| 必須 | いいえ |
| マニフェストバージョン | 2 以上 |
| 例 | 
```json
"options\_ui": {
  "page": "options/options.html"
}
```
 |

`options_ui` キーは、拡張機能のオプションページを定義するために使用します。

オプションページは、拡張機能の設定を含みます。オプションページはブラウザーのアドオンマネージャー、または拡張機能内で `runtime.openOptionsPage()` を使用することでアクセスできます。

`options_ui` を拡張機能にパッケージされた HTML ファイルへのパスとして指定します。通常のウェブページのように、HTML、CSS、JavaScript ファイルを含めることができます。しかし、通常のページと異なり、拡張機能が権限を持つすべての WebExtension API を使用できます。しかし、バックグラウンドスクリプトとは異なるスコープで実行されます。

**オプションページ**と**バックグラウンドスクリプト**の JavaScript 上で、データや関数を**共有したい**場合、バックグラウンドスクリプトの Window への参照を `extension.getBackgroundPage()` (en-US) を使用して直接取得するか、拡張機能内で実行されているいずれかのページの `Window` を `extension.getViews()` (en-US) で取得します。あるいは、JavaScript で `runtime.sendMessage()`、`runtime.onMessage`、`runtime.connect()` (en-US) を使用することで、オプションページとバックグラウンドスクリプト間で相互にコミュニケーションできます。
 後者の方法 (や同等の `runtime.Port` (en-US) ) でも バックグラウンドスクリプトと **コンテンツスクリプト** とでオプションを共有できます。

一般的に、オプションページで変更されたオプションは、ストレージ API を使用して、`storage.sync()` (ユーザーがログインしているすべてのブラウザーインスタンス間で設定を同期する場合) か `storage.local()` (現在のマシン / プロファイルのローカル設定にする場合) のいずれかに保存します。バックグラウンドスクリプトに変更を通知する必要がある場合、バックグラウンドスクリプトで `storage.onChanged` (en-US) にリスナーを追加します。

構文
--

`options_ui` キーは次のコンテンツを持つオブジェクトです。

 | `open_in_tab` | `Boolean` | 省略可能。既定値は `false`。`true` の場合、オプションページはブラウザーのアドオンマネージャーに統合されたものではなく、通常のブラウザータブで開かれる。 |
 | `page` | `String` | 必須。オプションページの仕様を含む HTML ファイルへのパス。パスは manifest.json 自体への相対パス。 |


| 名前 | 型 | 説明 |
| --- | --- | --- |
| `browser\_style (en-US)`省略可 | `Boolean` | 既定値は `true` です。
ブラウザーの UI と、`browser_style` プロパティを使用する他の拡張機能とで見た目が一致するようにするスタイルシートを、ページに記載するために使用します。既定値は `true` ですが、このプロパティを記載することをお勧めします。
Firefox では `chrome://browser/content/extension.css`、macOS では `chrome://browser/content/extension-mac.css `で、このスタイルシートは見ることができます。寸法を設定する場合、このスタイルシートが現在 `box-sizing: border-box` を設定していることに注意してください（box-sizing を参照してください）。````Firefox スタイルガイドでは、特定のスタイルを取得するためにポップアップの要素に適用できるクラスについて記述しています。`` |
| `open_in_tab`省略可 | `Boolean` | 既定値は `false` です。
`true` の場合、オプションページはブラウザーのアドオンマネージャーに統合されるのではなく、通常のブラウザータブで開かれます。 |
| `page` | `String` | 必須です。
オプションページの仕様を含む HTML ファイルへのパスです。
パスは `manifest.json` 自体の位置からの相対パスです。 |

例
-


```json
"options\_ui": {
  "page": "options/options.html"
}
```

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `options_page` (en-US) 
非推奨
* ブラウザースタイル (en-US)
* オプションページ
オプションページ
========

オプションページでは、ユーザーから変更できるような拡張機能の設定画面を定義することができます。ユーザーはアドオンマネージャーを通じて、アドオンのオプションページにアクセスすることができます。

このページにユーザーがアクセスする方法や、ブラウザー UI との連携については各ブラウザーによって異なります。

このページは、プログラムから `runtime.openOptionsPage()` を呼び出して開くこともできます。

オプションページにはコンテンツセキュリティポリシーがあり、リソースの読み込み元のソースを制限したり、 `eval()` のような安全でない行為を禁止したりすることができます。詳細はコンテンツセキュリティポリシーを参照してください。

オプションページの設定
-----------

オプションページを作成するには、ページを定義する HTML を書きます。このページは通常のページと同様に、 CSS と JavaScript ファイルを入れることができます。このページは、 favourite-color の例から取ってきていて、 JavaScript ファイルが含まれています。


```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form>
      <label>Favorite color</label>
      <input type="text" id="color" />
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>
```


このページ内で動く JavaScript は、すべての WebExtension API のうち、アドオンが権限を持っているものを使用することができます。特に、設定を保管する `storage` API が利用できます。

ページファイルを拡張機能の中にパッケージします。

`options_ui` キーを manifest.json に書く必要もあります。これがページの URL を指定します。


```json
"options\_ui": {
  "page": "options.html",
  "browser\_style": true
},
```


**メモ:** **Google Chrome** と **Opera** は `chrome_style` を `browser_style` の代わりに使用しますので、これらに対応する場合は、両方のキーを追加する必要があります。

`options_ui` ページでオプションページと背景やコンテンツスクリプトの**共有オプション**を参照してください。

オプションコンテンツのデザイン
---------------

Firefox のスタイルにマッチするオプションコンテンツをデザインする方法は Photon Design System およびブラウザースタイル (en-US)の文書を参照してください。

例
-

GitHub の webextensions-examples リポジトリーでは、オプションページを機能を実装している favourite-color の例があります。
サイドバー
=====

サイドバーはブラウザーウィンドウの横、ウェブページの隣に表示されるペイン（枠）です。サイドバーについて、その指定方法、デザイン、使用例などを説明します。

ブラウザーには、表示するサイドバーを選択するための UI が用意されています。例えば、 Firefox には「表示」→「サイドバー」のメニューがあります。それぞれのブラウザーウィンドウには独自のサイドバーを表示することができ、ウィンドウ内のすべてのタブに表示されます。

ブラウザは、いくつかの組み込みサイドバーを含むことができます。たとえば Firefox には、ブックマークを操作するためのサイドバーが含まれています。

![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars/bookmarks-sidebar.png)

`sidebar_action` というmanifest.json のキーを使って、拡張機能はブラウザーに独自のサイドバーを追加できます。それは組み込みのサイドバーと一緒に一覧表示され、ユーザーが組み込みサイドバーと同じメカニズムで開くことができます。

ブラウザーアクションのポップアップと同様に、サイドバーのコンテンツを HTML 文書で指定することができます。ユーザーがサイドバーを開く時、サイドバーの文書がブラウザーである各ウィンドウへと読み込まれます。各ウィンドウは独立した環境のインスタンスを保持します。新しいウィンドウが開いた時も同様に独自にサイドバー文書を保持します。

`sidebarAction.setPanel()` (en-US) 関数を使って特定のタブに文書をセットできます。サイドバーはどこのウィンドウに所属しているのかを、 `windows.getCurrent()` (en-US) API を使って実現できます。


```js
// sidebar.js
browser.windows.getCurrent({ populate: true }).then((windowInfo) => {
  myWindowId = windowInfo.id;
});
```


これは、サイドバーが異なるウィンドウのために異なるコンテンツを表示したい場合に便利です。この例については、 "annotate-page" の例を参照してください。

サイドバーの文書は、拡張機能のバックグラウンドとポップアップスクリプトが取得するのと同じ特権的な JavaScript API のセットにアクセスすることができます。また、`runtime.getBackgroundPage()` (en-US) や `runtime.sendNativeMessage()` (en-US) などのメッセージング API を使ってコンテンツのスクリプトやネイティブアプリケーションと連携することが可能です。

サイドバーの文書は、そのブラウザーウィンドウが閉じられたとき、またはユーザーがサイドバーを閉じたときに、アンロードされます。つまり、バックグラウンドページとは異なり、サイドバー文書は常に読み込まれたままであるというわけではありませんが、ブラウザーアクションのポップアップとは異なり、ユーザーがウェブページを走査している間は読み込まれたままであるということです。

サイドバーを定義する拡張機能が最初にインストールされたとき、そのサイドバーは自動的に開かれます。これは、拡張機能がサイドバーを含んでいることをユーザーが理解しやすくするためです。拡張機能がプログラムからサイドバーを開くことはできないことに注意してください。サイドバーはユーザーのみが開くことができます。

サイドバーの設定
--------

サイドバーを設定するには、 `sidebar_action` キーを manifest.json に設定して、既定のドキュメントを、既定ののタイトルおよびアイコンとともに設定してください。


```json
"sidebar\_action": {
  "default\_title": "My sidebar",
  "default\_panel": "sidebar.html",
  "default\_icon": "sidebar\_icon.png"
}
```


これら 3 つは同時に、 `sidebarAction` API を使ってプログラム的に変更可能です。

タイトルとアイコンは、 UI としてブラウザーがサイドバーのリストアップをするときユーザーに示す内容です。例えば Firefox の「表示 → サイドバー」メニューで見ることができます。

サイドバーのデザイン
----------

サイドバーウェブページを Firefox のスタイルに合わせてデザインする方法については、 Photon Design System のドキュメントを参照してください。

例
-

GitHub 上の webextensions-examples リポジトリーに、サイドバーを実装した例として annotate-page があります。
ポップアップ
======

ポップアップはツールバーボタンやアドレスバーボタンに関連したダイアログです。このページでは、ポップアップの一般的な説明、指定方法、デバッグ、サイズ変更、デザインについて、使用例も含めて解説しています。

![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups/page_action_popup.png)

ユーザーがボタンをクリックした時、ポップアップが表示されます。ポップアップの外をクリックすると、ポップアップは閉じます。ポップアップは、そこで実行しているスクリプトから `window.close()` を呼ぶとプログラム的に閉じられます。しかし、拡張機能の JavaScript からプログラム的に開くことはできません。つまりユーザー操作への反応としてだけ開きます。

`"_execute_browser_action"` と `"_execute_page_action"` のショートカットを使って、ポップアップを開くキーボードショートカットを定義できます。 manifest.json の `commands` キーの文書を見てください。

ポップアップの設定
---------

通常のウェブページと同じく、ポップアップは HTML ファイルで定義され、 CSS や JavaScript も含めることが可能です。ただし、通常のページとは異なり、 JavaScript は WebExtension API のうち、この拡張機能が権限を持っているものすべてを使用することができます。

ポップアップの文書はポップアップが表示されるたびに読み込まれて、ポップアップが閉じるたびに解放されます。

HTML ファイルを拡張機能に入れるには、 `browser_action` または `page_action` キーを manifest.json 内の `"default_popup"` にて指定します。


```json
  "browser\_action": {
    "default\_icon": "icons/beasts-32.png",
    "default\_title": "Beastify",
    "default\_popup": "popup/choose\_beast.html"
  }
```


ブラウザーの UI と統一感を持たせるスタイルシートをポップアップに組み込めるようになりました。これを利用するためには、 `"browser_style": true` を `browser_action` または `page_action` キーで指定してください。

ポップアップにはコンテンツセキュリティポリシーがあり、リソースを読み込むことができるソースを制限したり、 `eval()` を使用するような安全でない行為を禁止したりすることができます。詳細はコンテンツセキュリティポリシーを参照してください。

ポップアップのデバッグ
-----------

ポップアップのマークアップと JavaScript は、アドオンデバッガーを使ってデバッグできます。しかしポップアップの自動非表示を不可として、ポップアップの外をクリックした時に隠れてしまうのを防ぐ必要があります。ポップアップのデバッグを読んでください。

ポップアップのリサイズ
-----------

ポップアップはその中身に合わせて自動的にリサイズされます。ブラウザーごとにこのアルゴリズムは違う場合があります。

Firefox では、サイズはポップアップが表示される直前に計算されて、最大で毎秒 10 回の DOM の変更があります。厳格モードの文書では、サイズは `<body>` 要素のレイアウトサイズに基いて計算されます。後方互換モードでは、これは `<html>` 要素です。 Firefox はその要素の好ましい幅を計算して、その幅にリフローして、縦のスクロールがないようにリサイズします。最大で **800x600 ピクセル**の範囲でユーザーの画面に合わせられます。（Firefox 60 以前では 680px まででした。）ユーザーが拡張機能のボタンをメニューに動かしたり、ツールバーからオーバーフローした場合、ポップアップはメニューのパネル内に出てきて、固定の幅となります。

ポップアップの `width` を CSS で設定する際、 `<body>` に設定し `:root` には設定しないでください。

Firefox Android 57 では、ポップアップは新規タブの通常ページとして表示されます。

ポップアップのデザイン
-----------

Firefox のスタイルに適合するポップアップのウェブページをデザインする方法は、 Photon Design System のドキュメントを見てください。

例
-

GitHub の webextensions-examples リポジトリーには、ポップアップ付きブラウザーアクションを使う拡張機能の beastify の例があります。
開発者ツールパネル
=========

**メモ:** この機能は Firefox 54 以降で利用できます。

拡張機能が開発者にとって有用なツールを提供する場合、その UI をブラウザーの開発者ツールに新しいパネルとして追加することが可能です。

![Simple example showing the addition of "My panel" to the Developer Tools tabs.](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels/developer_panel_tab.png)

開発ツールパネルの設定
-----------

開発ツールパネルは `devtools.panels` API を使って追加され、特別な開発ツールページから順番に実行されます。

開発ツールのページを追加するには、拡張機能の manifest.json に `devtools_page` キーを設定して、 拡張機能内のそのページの HTML ファイルの場所を与えます。


```json
"devtools\_page": "devtools-page.html"
```


開発ツールのページから、開発ツールパネルに追加するスクリプトを呼び出します。


```html
<body>
  <script src="devtools.js"></script>
</body>
```


スクリプトでは devtools パネルを、パネルのタイトル、アイコン、パネルのコンテンツを提供する HTML ファイルを指定して、作成します。


```js
function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "icons/star.png", // icon
    "devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });
```


拡張機能はインスペクターウィンドウの中で `devtools.inspectedWindow.eval()` を使うか、バックグラウンドスクリプトからメッセージを渡してコンテンツスクリプトに挿入することで、コードを実行することができます。この方法のより詳しくは開発ツールの拡張を参照してください。

開発パネルのデザイン
----------

開発パネルのウェブページを Firefox のスタイルに適合させる方法の詳細は Photon Design System の文書を参照してください。

アイコン
----

開発ツールパネルに使うアイコン作成方法の詳細は Iconography を Photon Design System のドキュメントで参照してください。

例
-

GitHub の webextensions-examples リポジトリーには、開発ツールパネルを実装した devtools-panels の例があります。
拡張機能ページ
=======

拡張機能には、フォーム、ヘルプ、その他拡張機能が必要とするコンテンツを提供するために、 HTML ページを設置することができます。

![Example of a simple bundled page displayed as a detached panel.](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages/bundled_page_as_panel_small.png)

拡張機能に含められた HTML ページは拡張機能がバックグラウンドで動作するのと同じ特権を持った JavaScript の API を利用できますが、これらのページにはそれぞれのタブ、 JavaScript イベントキュー、グローバル変数があります。

バックグラウンドのページは「隠れた拡張ページ」と考えてください。

拡張ページの設置
--------

HTML ファイルと関連づけられた CSS や JavaScript ファイルを拡張機能に含めることができます。これらのファイルはルートに置くこともできますし、サブディレクトリーに分けることもできます。
```

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

拡張ページの表示尾
---------

拡張ページを表示する際に 2 つの選択肢があります。それは、 `windows.create()` (en-US) と `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);
```


ウィンドウが必要なくなったときは、プログラムから閉じることができます。

例えば、以下の例では、ユーザーがボタンをクリックしたときに `windows.remove()` (en-US) にウィンドウ の ID を渡しています。


```js
document.getElementById("closeme").addEventListener("click", function () {
  let winId = browser.windows.WINDOW\_ID\_CURRENT;
  let removing = browser.windows.remove(winId);
});
```

拡張ページと履歴
--------

既定では、この方法で開かれたページは普通のウェブページを開いたときと同じように履歴に保存されます。履歴に保存したくない場合は、 `history.deleteUrl()` (en-US) を使ってブラウザーから履歴のレコードを削除することができます。


```js
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 のスタイルに適合するようなデザインの方法の詳細は、 Photon Design System およびブラウザースタイル (en-US) のドキュメントを参照してください。

例
-

GitHub の webextensions-examples リポジトリーには、ウィンドウの作成を実装した例である window-manipulator が含まれています。
通知
==

通知により、基本的なオペレーティングシステムの通知サービスを使用して、拡張機能またはそのコンテンツに関する情報を伝えることができます。

![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications/notify-shadowed.png)

通知にはユーザーへのアクションの呼びかけを入れることができて、アドオンではユーザーによる通知のクリックや通知を閉じるのをリッスンできます。

通知の設定
-----

`notifications` API を使うと、通知をプログラム的に管理できます。この API を使うには `notifications` 権限を manifest.json の中で要求する必要があります。


```json
"permissions": ["notifications"]
```


次に `notifications.create` (en-US) を使って通知を作成します。 notify-link-clicks-i18n の例では次の通りです。


```js
let title = browser.i18n.getMessage("notificationTitle");
let content = browser.i18n.getMessage("notificationContent", message.url);
browser.notifications.create({
  type: "basic",
  iconUrl: browser.extension.getURL("icons/link-48.png"),
  title: title,
  message: content,
});
```


このコードはアイコンや、タイトルや、メッセージつきの通知を作成します。

通知がアクションへの呼び出しを含む場合、ユーザーが通知をクリックするのを待ち受けし、アクションを処理する関数を呼び出すことができます。


```js
browser.notifications.onClicked.addListener(handleClick);
```


通知にてアクションの要求を発行している場合、オプションの通知の `id` を定義して、どのアクションをユーザーが選択したかがわかるようにすると良いでしょう。

アイコン
----

通知に使うアイコン作成方法の詳細は、 Iconography の記事を Photon Design System のドキュメント内で参照してください。

例
-

GitHub の webextensions-examples リポジトリーには、通知を実装した notify-link-clicks-i18n の例があります。
ツールバーボタン
========

 このユーザーインターフェイスオプションは、よくブラウザーアクションと呼ばれており、 ブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。

 ![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button/browser-action.png)

ツールバーボタン（ブラウザーアクション）はアドレスバーボタン（ページアクション）とよく似ています。違いと使用する場面ついてのガイダンスは、ページアクションとブラウザーアクションを参照してください。

ブラウザーアクションの指定
-------------

ブラウザーアクションのプロパティは manifest.json の `browser_action` キーで定義します。


```json
"browser\_action": {
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?"
}
```


唯一不可欠なキーは `default_icon` です。

ブラウザーアクションの指定には 2 つの方法があります。ポップアップつきのものと、なしのものです。ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信されます。これを拡張機能が `browserAction.onClicked` を使って待ち受けします。


```js
browser.browserAction.onClicked.addListener(handleClick);
```


ポップアップを指定すると、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができ、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。

なお、拡張機能が持つことができるブラウザーアクションは 1 つだけです。

ブラウザーアクションのプロパティの多くは、 `browserAction` API 使用してプログラムからも変更できます。

アイコン
----

ブラウザーアクションのアイコンの作成方法の詳細は、 Iconography を Photon Design System のドキュメントで参照してください。

例
-

Github の webextensions-examples リポジトリーには、ブラウザーアクションを使う拡張機能の例がいくつかあります。

* bookmark-it はポップアップなしのブラウザーアクションを使用します。
* beastify はポップアップ付きのブラウザーアクションを使用します。
コンテキストメニュー項目
============

このユーザーインターフェイスオプションは、ブラウザーのコンテキストメニューに 1 つ以上の項目を追加します。これはユーザーがウェブページを右クリックした時に利用できるコンテキストメニューです。タブも browser.menus API を通じてコンテキストメニューを持つことができます。

![Example of content menu items added by a WebExtension, from the context-menu-demo example](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items/context_menu_example.png)

このオプションは、特定のブラウザーやウェブページのコンテキストに関連する機能を公開するために使用します。例えば、ユーザーが画像をクリックしたときにグラフィックエディターを開く機能を表示したり、ページの一部が選択されたときに、ページの内容を保存する機能を提供したりすることができます。メニューには、ただのメニュー項目、チェックボックス項目、ラジオボタングループ、セパレーターを追加することができます。 `contextMenus.create` (en-US) を使ってコンテキストメニュー項目を追加すると、すべてのブラウザータブに表示されますが、 `contextMenus.remove` (en-US) で削除して非表示にすることが可能です。

対応しているコンテキストのすべての一覧は `menus.ContextType` (en-US) にあり、ブラウザー UI のブックマーク項目など、ウェブページ外のコンテキストも含まれます。例えば、"Open bookmark in Container Tab" 拡張機能は、ユーザーがブックマーク URL を新しいコンテナータブで開くことを可能にするメニュー項目を追加します。

![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items/extension_context_menu.png)

コンテキストメニュー項目の指定
---------------

コンテキストメニューを、 `contextMenus` (en-US) API を使ってブログラムから管理できます。しかし、この API の恩恵を受けるには、 manifest.json にて `contextMenus` 権限を要求する必要があります。


```json
"permissions": ["contextMenus"]
```


次に、拡張機能のバックグラウンドスクリプト内にコンテキストメニューを追加（および更新、削除）することもできます。メニュー項目を作成するには id、タイトル、表示するコンテキストメニューを指定します。


```js
browser.contextMenus.create(
  {
    id: "log-selection",
    title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
    contexts: ["selection"],
  },
  onCreated,
);
```


そして、拡張機能はメニュー項目がクリックされるのを待ち受けします。クリックされた項目、クリックされたコンテキスト、クリックされたタブの詳細に関する渡された情報は、適切な拡張機能を呼び出すために使用されます。


```js
browser.contextMenus.onClicked.addListener(function(info, tab) {
  switch (info.menuItemId) {
    case "log-selection":
      console.log(info.selectionText);
      break;
    ...
  }
})
```

アイコン
----

コンテキストメニューで使用するアイコンの作り方の詳細は、 Iconography を Photon Design System のドキュメントで参照してください。

例
-

GitHub の webextensions-examples リポジトリーには、コンテキストメニュー項目を実装した拡張機能の例が 2 つあります。

* menu-demo ではブラウザーのコンテキストメニューにいくつかの項目を追加しています。
* context-menu-copy-link-with-types では、リンクの URL を、プレーンテキストとリッチ HTML としてクリップボードにコピーするコンテキストメニュー項目を追加してます。
アドレスバーボタン
=========

このユーザーインターフェイスオプションは、ブラウザーのアドレスバーに追加されるボタンで、よくページアクション (en-US)と呼ばれます。ユーザーはボタンをクリックして拡張機能を操作します。

![](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions/address_bar_button.png)

ページアクションとブラウザーアクション
-------------------

アドレスバーボタン（またはページアクション）は、ツールバーボタン（またはブラウザーアクション）と似ています。

違いは次の通りです。

* **ボタンの位置**
    + ページアクションは、ブラウザーのアドレスバーの中に表示されます。
    + ブラウザーアクションは、ブラウザーのツールバー内で、アドレスバーの外側に表示されます。
* **ボタンの表示の有無**
    + ページアクションは既定で非表示であり（この既定値は `show_matches` および `hide_matches` マニフェストキープロパティで変更できます）、 `pageAction.show()` (en-US) および `pageAction.hide()` (en-US) を呼び出すことで、特定のタブを表示と非表示を切り替えることができます。
    + ブラウザーアクションは常に表示されます。

ページアクションは、現在のページに関連するアクションのときに使用します。ブラウザーアクションは、ブラウザー全体または複数のページに関連するアクションを実行するときに使用します。たとえば、以下のようになります。

| 種別 | ブックマークアクション | コンテンツアクション | タブ操作 |
| --- | --- | --- | --- |
| ページアクション | このページをブックマーク | 再編集の拡張 | タブの送信 |
| ブラウザーアクション | すべてのブックマークの表示 | 広告ブロックの有効化 | すべての開いているタブを同期 |

ページアクションの設定
-----------

ページアクションのプロパティは manifest.json の `page_action` キーで定義します。


```json
"page\_action": {
  "browser\_style": true,
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?"
}
```


唯一不可欠なキーは `default_icon` です。

ページアクションの設定には 2 つの方法があります。ポップアップがあるものと、ないものです。

* **ポップアップがない**場合、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信され、これを拡張機能が `pageAction.onClicked`を使って待ち受けします。

```js
browser.pageAction.onClicked.addListener(handleClick);
```

* **ポップアップがある**場合、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができます。ユーザーがポップアップの外をクリックした場合は、自動的に閉じます。ポップアップを作成したり管理したりすることについての詳細は、ポップアップの記事を参照してください。

なお、拡張機能が持つことができるページアクションは 1 つだけです。

ページアクションのプロパティはすべて、 `pageAction` (en-US)` API を使用してプログラムから変更することができます。

アイコン
----

For details on how to create icons to use with your page action, see Iconography in the Photon Design System documentation.

例
-

GitHub の webextensions-examples リポジトリには、ページアクションを使う拡張機能の例がいくつかあります。 chill-out はポップアップなしのページアクションを使います。