From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../implement_a_settings_page/index.html | 221 +++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html (limited to 'files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html') diff --git a/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..b07cf5c99e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,221 @@ +--- +title: 設定ページを実装する +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

設定ページは、ユーザーに拡張機能の設定を確認して変える方法を与えます(「プリファレンス」や「オプション」とも呼ばれます)。

+ +

WebExtension API では一般に、設定は storage API で保存されます。設定ページの実装は次の 3 ステップの手順です:

+ + + +
+

runtime.openOptionsPage() 関数を使ってプログラム的に開くこともできます。

+
+ +

簡単な拡張機能

+ +

まずは、ユーザーが訪問するページに青い枠をつける拡張機能を書きます。

+ +

"settings" というディレクトリーを作り、そこに "manifest.json" という名前のファイルを作って下記の中身を入れます:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ +

この拡張機能はブラウザーに対し、"borderify.js" というコンテンツスクリプトを、ユーザーが訪問するすべてのウェブページで読み込むよう指示します。

+ +

次に、"settings" ディレクトリー内に "borderify.js" というファイルを作り、次の中身を入れます:

+ +
document.body.style.border = "10px solid blue";
+ +

これは単にページに青い枠をつけます。

+ +

この拡張機能をインストールしてテストします — お好みのあらゆるウェブページを開きます:

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

設定を追加する

+ +

今度は枠の色をユーザーが設定できるような設定ページを作りましょう。

+ +

まずは "manifest.json" を次の中身に更新します:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"],
+
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com"
+    }
+  }
+
+}
+ +

新しく次の 3 つのキーを追加しました:

+ + + +

次に "options.html" を提供する約束をしたので、作成します。"settings" ディレクトリー内にその名前でファイルを作成して、次の中身を与えます:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

これは {{htmlelement("form")}} と、そこにラベル付きのテキスト {{htmlelement("input")}} と送信 {{htmlelement("button")}} を定義します。また "options.js" というスクリプトも入っています。

+ +

もう一度 "options.js"を "settings" ディレクトリーに作り、次の中身を与えます:

+ +
function saveOptions(e) {
+  e.preventDefault();
+  browser.storage.sync.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+
+  function setCurrentChoice(result) {
+    document.querySelector("#color").value = result.color || "blue";
+  }
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var getting = browser.storage.sync.get("color");
+  getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+
+ +

これは 2 つのことをします:

+ + + +
+

記: 別々の .js ファイルの指定が必要です。インライン JavaScript は使用できません。

+
+ +

ローカルストレージがふさわしいと感じる場合、代わりにローカルストレージに設定値を保存できます。

+ +
+

Firefox の storage.sync の実装はアドオン ID に依存しているのに注意します。storage.sync を使う場合、上記manifest にあるように、manifest.json の applications キーに拡張機能の ID をセットしておく必要があります。

+
+ +

最後に、ストレージから枠の色を読むのに "borderify.js" を更新します:

+ +
+

バージョン 52 より前の Firefox の browser.storage.local.get() のバグにより、下記のコードは機能しません。バージョン 52 より前の Firefox で動作させるには、onGot() の中で 2 回出てくる item.color を item[0].color に変えないといけません。

+
+ +
 function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function onGot(item) {
+  var color = "blue";
+  if (item.color) {
+    color = item.color;
+  }
+  document.body.style.border = "10px solid " + color;
+}
+
+var getting = browser.storage.sync.get("color");
+getting.then(onGot, onError);
+
+ +

この時点で、拡張機能はこのようになります:

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

いま、次を行ってみます:

+ + + +

Firefox で設定ページにアクセスするには about:addons に移動して拡張機能のエントリーの隣の "Preferences" ボタンをクリックします。

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

詳しく学ぶ

+ + -- cgit v1.2.3-54-g00ecf