【Chrome拡張機能開発入門】設定画面などで情報をローカルに保存する、また読み込む
Chromeブラウザの拡張機能を開発する際、ポップアップ画面や設定画面にて設定項目のデータをローカルに保存したり、また読み込む方法を取り上げてみたいと思います。
用意するファイル
今回は下記のdeveloper.chrome.comのソースコードを主に参照しつつ、解説したいと思います。
設定画面ですが、こちらのHTMLファイル「options.html」を使用します。
<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
好みの色:
<select id="color">
<option value="red">赤</option>
<option value="green">緑</option>
<option value="blue">青</option>
<option value="yellow">黄色</option>
</select>
<br>
<label>
<input type="checkbox" id="like">
色占いを信じる
</label>
<br>
<div id="status"></div>
<button id="save">保存</button>
<script src="options.js"></script>
</body>
</html>
設定画面を表示させるとこのようになると思います。今回例として使用するデータのタイプとしては、リストタイプとチェックボックスタイプになります。
次はJavaScriptの「options.js」です。
// Saves options to chrome.storage
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;
chrome.storage.sync.set({
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = '保存されました';
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);今回のポイント
今回注目するべきポイントですが、関数としてはデータの保存やデータの読み込み、また設定画面が表示されたタイミングでデータの読みを行う、また設定画面の保存ボタンが押されたタイミングでデータの保存を行う形となります。
データを保存する
chrome.storage.sync.setデータを読み込む
chrome.storage.sync.get設定画面が表示される際のイベントリスナー
document.addEventListener('DOMContentLoaded', restore_options);設定画面内の保存ボタンが押された際のイベントリスナー
document.getElementById('save').addEventListener('click',
save_options);また、ローカルにデータを保存する際はmanifestにその旨を記載する必要がありますので忘れずに。
"permissions": [ "storage" ],
デバッグに関する注意点
通常であれば、console.logにて吐き出したい情報をChromeブラウザのコンソール画面に出力できますが、今回のような設定画面では利用することができないため、代わりに下記の関数を使うことでコンソール画面に出力ことができます。
chrome.extension.getBackgroundPage().console.log("デバッグメッセージ");この記事が気に入ったらサポートをしてみませんか？