Chrome拡張の作り方を紹介します。Chrome拡張の作り方(その3:ポップアップ表示とバックグラウンドスクリプトとの連携)」までで作成した拡張にオプション画面を追加します。オプション画面の完成イメージそして、下記に示すようなオプションデータの連携方法について解説します。オプション画面で保存したデータをポップアップに表示オプション画面で保存したデータをバックグラウンドで利用1.オプション画面の追加オプション画面するには、表示のためのHTMLファイルが必要です。ここではoption.htmlという名前でsampleフォルダに配置します。option.htmloption.htmlの中身はとりあえず以下の内容にしておきます。<h1>Option</h1>そして、このHTMLファイルをマニフェストファイルに設定します。"options.html"}これで、この拡張をインストールすると、拡張一覧の「サンプル」に「オプション」リンクが表示されます。リンクをクリックするとOptions.htmlの内容が表示されます。Chrome拡張の作り方(その3:ポップアップ表示とバックグラウンドスクリプトとの連携)」で作成したサンプルをもとに、次のようなものを完成させるまで過程を説明します。開いているタブ数が最大タブ数を超えたら、アイコンバッジの色とオプションの文字色を変更まず、オプション画面に最大タブ数を設定するフォームを表示させ、設定したデータを保存するところまでを実装します。オプション画面で設定したデータを保存するにはlocalStorageを利用します。localStorageを利用するにはJavaScriptが必要なので、option.htmlが扱うスクリプトファイルoptions.jsを資材に追加します。option.htmloptions.htmlは、次のようにオプションの最大タブ数を入力できるフォームを追加します。/>options.jsではlocalStorageにアクセスし、オプションの最大タブ数を保存するようにします。showStorage();});options.jsのサンプルは「HTML5のlocalStorageの使い方のまとめ」から抜粋したもので、localStorageの詳細を知りたい方はこちらのエントリーを参考にしてください。これで、この拡張をインストールすると、オプション画面にフォームが表示されます。OK」のアラートを表示すると同時に、データをlocalStorageに保存します。保存後、オプション画面を閉じて再度開くと、前回設定した値が表示されます。拡張を削除すると、保存したデータは削除されます。3.オプションデータをポップアップに表示する次に、ポップアップ画面にオプションデータを表示する方法を説明します。popup.htmlは最大タブ数を表示するよう、前回エントリーのサンプルをマークアップし直します。id="maxtab"></span></div>popup.jsは、localStorageからデータを取得してポップアップ画面に最大タブ数を表示するよう、全面変更します。showOption();});これでこの拡張をインストールし、オプションに最大タブ数を設定したあとアイコンクリックすると。オプションの最大タブ数が表示されます。オプション設定前オプション設定後4.バックグラウンドでオプションデータを受信する最後に、開いているタブ数がオプションで設定した最大タブ数を超えたら、アイコンのバッジ色とポップアップの文字色を変更する実装を行います。background.jsは前回エントリーのサンプルに赤色部分を追加し、最大タブ数を超えたとき(またはその逆)に変数limitの値を設定する処理および、バッジの色を変更する処理を追加します。3行目でバッジのデフォルト色を青に変更しています。obj['tab'];};popup.jsは赤色で示すBG.isLimit()を判定し、判定結果によって文字色を変更する処理を追加します。}});これでこの拡張をインストールし、オプションに最大タブ数を設定したあと、開いているタブ数がオプションで設定したタブ数を超えるとタブ数の色が赤に変わります。開いているタブ数が最大タブ数を超えた状態さらにポップアップの最大タブ数も色が赤色に変わります。*必須(非表示)URL(U):情報を保存する?コメントへの返信ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。すべてのご質問にはお答えできない可能性があります。Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。