Chrome拡張機能を作っていると、ユーザー設定とその保存を行うオプション機能が必要となる場面が出てくるかと思います。
そこで本ページでは、Chrome拡張機能にオプションページを実装する方法を解説します。
なお、Chrome拡張機能の概要についてはChrome拡張機能の開発入門（概要編）をご覧ください。
Option Page
Option Pageは拡張機能に関する設定変更を行うためのページです。
オプションページのhtmlファイルを用意し、Manifest Fileに以下の記述をすることで、拡張機能にオプションページを実装することができます。
（ブラウザで「拡張機能のオプション」を選択すると、options.htmlが表示されます。）
|
1 2 3 |
"options_ui": { "page": "options.html" } |
オプションページ用のhtmlファイルで、一般的に必要なものは次の通りです。
・設定項目を入力するフォーム
・chrome.storageからgetしてフォームにセットする処理（設定データ読み取り）※次項参照
・保存ボタンを押した時にフォームの値をchrome.storageにsetする処理（設定データ保存）※次項参照
なお、”chrome_style”はオプションページにChromeスタイルシートを適用するかどうかを設定します。
Chromeとスタイルの一貫性を保つため、通常はtrueで良いでしょう。
chrome.storage API
前項でオプションページは用意されましたが、ここでのユーザー設定項目など、特定の値を保存しておき次回ブラウザ起動時にも反映させるようにする必要があります。
そこで使われるのがchrome.storage APIとなります。
chrome.storage APIは、拡張機能内で特定の値の保存と読み取りを実現するAPIです。
chrome.storage APIを利用するには、Manifest Fileの”permission”設定で”storage”を記述する必要があります。
|
1 |
"permissions": ["storage"] |
chrome.storageの保存領域
chrome.storageの保存領域にはsyncとlocalの2種類があります。
syncを利用するとGoogleアカウントを用いてデータが同期され、同じアカウントでログインしている異なるPCのChrome上で同じデータを共有することができます（ユーザーが同期を有効にしている場合）。
syncはlocalに比べて記録できる量や書き込みの頻度などが制限されています。（公式ドキュメント参照）
localは、実行されたコンピューター上にのみデータが記録されます。
保存できるデータ容量は5MBとなりますが、それ以外の制限はありません。
chrome.storageの使い方は簡単で、保存するときはset、読み取る時はgetを用います。
なお、chrome.storageで保存されたデータは、ブラウザでクッキーやキャッシュを削除しても消えることはありません。
chrome.storageを使ったデータ保存（set）
chrome.storageを使ってデータを保存するにはsetを使います。
保存するデータは、任意のキーとそれに対する値（”key”:”value”）という形式で記録されます。
以下は、chrome.storage.syncを使ったデータの保存の例です。
（chrome.storage.localを利用する場合は、chrome.storage.local.setに置き換えてください。）
|
1 2 3 4 5 6 7 |
// chrome.storage.syncを使ったデータの保存（指定したkeyに対して、任意のvalueを保存） chrome.storage.sync.set( { "key1": "value1", "key2": "value2" } ); |
chrome.storageを使ったデータ読み取り（get）
chrome.storageを使ってデータを保存するにはgetを使います。
以下は、chrome.storage.syncを使ったデータの保存と読み取りの例です。
（chrome.storage.localを利用する場合は、chrome.storage.local.set、chrome.storage.local.getにそれぞれ置き換えてください。）
データ読み取りのgetでは、第一引数に読み取りたい値のkeyを指定すると、コールバックの引数itemsに、そのkeyの対となる値（value）が入ります。
|
1 2 3 4 5 |
// chrome.storage.syncを使ったデータの読み取り（指定したkeyの対となる値valueを返す） chrome.storage.sync.get(["key1", "key2"], function(items) { var data1 = items.key1; // value1 var data2 = items.key2; // value2 }); |
Option Pageの実装例
Chrome拡張機能の開発入門（概要編）で紹介した拡張機能のサンプル（Sample extension）に、オプションページを実装してみたいと思います。
以前のサンプルはあらかじめ決められた文字列をアラートに出力するだけでしたが、ここではオプションページを追加しユーザが文字列を自由に設定できるようにします。
まずは拡張機能の構成ですが、今回はオプションページ用のhtmlファイルとjsファイルが追加されています。
sample_extension/（拡張機能のルートフォルダ）
└ manifest.json ← 拡張機能のManifest File（JSON）
└ script.js ← 拡張機能で実行するスクリプト（Javascript）
└ options.html ← オプションページ（HTML）
└ options.js ← オプションページで実行されるスクリプト（Javascript）
Manifest File（manifest.json）
Manifest File（manifest.json）の中身は、以下のように記述します。
以前のサンプルに、オプションページを設定するための”options_ui”と、chrome.storage APIを使用するための”permissions”を追加しています。
※ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "manifest_version": 3, "name": "Sample extension", "version": "1.0.0", "description": "拡張機能のサンプルです。", "content_scripts": [ { "matches": [ "<all_urls>" ], // Content Scriptを実行するURL（この場合はあらゆるURLで実行） "js": [ "script.js" ] // 上記URLへのアクセス時に実行されるスクリプト } ], "options_ui": { "page": "options.html" // オプションページを指定 }, "permissions": [ "storage" ] // オプションページでデータを保存するのでstorageを設定 } |
Option Page（options.html）
次は、新たに追加するオプションページ（options.html）です。
こちらはアラートに出力させる文字列を入力するためのテキストボックスと、それを保存するためのボタンで構成されています。
そして最後に、オプションページで実行させるスクリプト（options.js）を指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </head> <body> <div> <input type="textbox" id="input_message"> <button id="save_button">保存</button> </div> <script src="options.js"></script> </body> </html> |
Option Page（options.js）
次は、先ほどオプションページで設定したスクリプト（options.js）です。
保存ボタンを押した時に、テキストボックスに入力された文字列を保存する処理と、次回オプションページが表示された時に、前回入力した文字列をテキストボックスに再表示する処理を記述します。
なおコードを見ると分かるように、文字列の保存と読み込みにはchrome.storage APIが使われています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Save() { var message = document.getElementById('input_message').value; // テキストボックス（input_message）に入力された文字列をmessage変数に格納 chrome.storage.local.set({'Alertmsg': message}, function () { }); // Alertキーとmessageの文字列を対にして記録 } function Load() { chrome.storage.local.get('Alertmsg', function (items) { document.getElementById('input_message').value = items.Alertmsg; // Alertmsgキーと対に記録された文字列を、idがinput_messageのテキストボックスに出力 }); } document.addEventListener('DOMContentLoaded', Load); // オプションページ（options.html）の読み込みと解析が完了したらLoad関数を実行 document.getElementById('save_button').addEventListener('click', Save); // 保存ボタン（save_button）がクリックされたらSave関数を実行 |
Content Scrpits（script.js）
最後はContent Scrpits（script.js）です。
chrome.storage APIを使ってオプションページで保存された文字列を読み込み、それをアラートに表示させます。
|
1 2 3 |
chrome.storage.local.get('Alertmsg', function (items) { // Alertmsgキーの対になる値をitemsとして返す alert(items.Alertmsg); // itemsに格納されたAlertmsgキーの値（文字列）をアラートに表示 }); |
動作確認
これまでのファイルが全て準備できたら、Chrome拡張機能の開発入門（概要編）で紹介した方法でデベロッパーモードから拡張機能（Sample extension）をインストールします。
この拡張機能を有効にした状態で何らかのWebページを開いてみると、アラートには”undefined”と表示されたかと思います。
これはまだオプションページで文字列が何も設定されていないため、未定義（undefined）となっているためです。
オプションページ未設定のアラート
そこで、次に拡張機能のオプションページを開き、テキストボックスに適当な文字を入力して「保存」ボタンを押します。
ここでは「あいうえお」と入力してみました。
オプションページで文字列を入力
「保存」ボタンを押したらオプションページを閉じて、もう一度Webページを開いてみてください。
先ほどオプションページで入力した文字列がアラートに表示されていれば成功です！
オプションページで入力した文字列がアラートに表示
コメント