files/ja/mozilla/add-ons/webextensions/user_interface/options_pages/index.html


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

---
title: オプションページ
slug: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages
tags:
  - WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Options_pages
---
<div>{{AddonSidebar}}</div>

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

<p>{{EmbedYouTube("eODy24csH5M")}}</p>

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

<ul>
</ul>

<p>このページは、プログラムから <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/Runtime/openOptionsPage" title="If your add-on does not have an options page, or the browser failed to create one for some other reason, runtime.lastError will be set."><code>runtime.openOptionsPage()</code></a> を呼び出して開くこともできます。</p>
オプションページにおけるリソースの読み込み元や、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> のように安全でない処理は Content Security Policy によって制限されます。詳細は <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a> を参照してください。

<h2 id="Specifying_the_options_page" name="Specifying_the_options_page">オプションページを指定する</h2>

<p>オプションページを作成するには、ページを定義する HTML を書きます。このページは通常のページと同様に、CSS と JavaScript ファイルを入れることができます。このページは、 <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> の例から取ってきていて、JavaScript ファイルが含まれます:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;

&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;

&lt;body&gt;
  &lt;form&gt;
      &lt;label&gt;Favourite colour&lt;/label&gt;
      &lt;input type="text" id="colour" &gt;
      &lt;button type="submit"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  &lt;script src="options.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</pre>

<p>ページ内で動く JavaScript はアドオンが<a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">権限</a>を持つすべての <a href="/ja/Add-ons/WebExtensions/API">WebExtension APIs</a> を使うことができます。特に、設定を保管する <a href="/ja/docs/Mozilla/Add-ons/WebExtensions/API/Storage" title="Enables WebExtensions to store and retrieve data, and listen for changes to stored items."><code>storage</code></a> API を使えます。</p>

<p>ページファイルを拡張機能の中にパッケージします.</p>

<p>manifest.json 内に <code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> キーも必要です、ここではページの URL を与えます。</p>

<pre class="brush: json">"options_ui": {
  "page": "options.html",
  "browser_style": true
},</pre>

<p><code><a href="/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> ページを見てオプションページとバックグラウンド/コンテンツスクリプトとの間で<strong>オプションを共有する</strong>ことができます。</p>

<h2 id="Examples" name="Examples">オプションコンテンツのデザイン</h2>

<p>Firefox のスタイルにマッチするオプションコンテンツをデザインする方法は <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> の文書を見てください。</p>

<h2 id="Examples" name="Examples">例</h2>

<p>GitHub の <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> リポジトリでは、オプションページを使う拡張機能の <a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a> の例があります。</p>
</div>