今回は、ユーザーが入力したデータを「保存」する機能を実装します。
Webページを閉じたり、ブラウザを再起動したりしても消えない簡単なメモ機能を作ってみましょう。
まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は storage-panel 等、何でも大丈夫です。
このフォルダの中に「manifest.json」、「background.js」、「sidepanel.html」、「sidepanel.js」という４つのファイルを作成します。
テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。
manifest.json （設定ファイル）
{
"manifest_version": 3,
"name": "メモ保存パネル",
"version": "1.0",
"permissions": [
"sidePanel",
"storage"
],
"action": {
"default_title": "メモを開く"
},
"background": {
"service_worker": "background.js"
},
"side_panel": {
"default_path": "sidepanel.html"
}
}
１． permissions: [“storage”]
今回最も重要な設定です。
Chromeブラウザが提供する保存場所（ストレージ）を使用するために、"storage" という権限を追加しています。これがないと保存も読み込みもできません。
background.js （サービスワーカー）
chrome.runtime.onInstalled.addListener(() => {
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});
これは前回までと同じです。
アイコンをクリックした時に、サイドパネルを一発で開くための設定です。
sidepanel.html （表示画面）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Memo Panel</title> </head> <body> <h3>一言メモ</h3> <input type="text" id="memo-input" placeholder="ここに入力..." style="width: 90%;"> <br><br> <button id="save-btn">保存する</button> <script src="sidepanel.js"></script> </body> </html>
１． <input type=”text” id=”memo-input” ・・・
ユーザーが文字を入力するためのテキストボックスです。
JavaScriptから操作するために、id="memo-input" という名前を付けています。
２． <button id=”save-btn”>保存する</button>
保存を実行するためのボタンです。こちらにもIDを振っています。
sidepanel.js （ロジック）
chrome.storage.local.get(["userMemo"], function(result) {
if (result.userMemo) {
document.getElementById("memo-input").value = result.userMemo;
}
});
document.getElementById("save-btn").addEventListener("click", function() {
// テキストボックスの中身を取得
const text = document.getElementById("memo-input").value;
chrome.storage.local.set({ "userMemo": text }, function() {
alert("保存しました！");
});
});
「読み込み」と「保存」の２つの処理を行っています。
１． chrome.storage.local.get
保存場所からデータを取り出す命令です。
["userMemo"] というキー（合言葉）を使ってデータを検索し、もし見つかれば、それをテキストボックス（memo-input）に表示させます。
これにより、次にサイドパネルを開いた時も、前回の内容が残っている状態になります。
２． chrome.storage.local.set
保存場所にデータを書き込む命令です。
{ "userMemo": text } という形で、入力されたテキストを "userMemo" という名前で保存しています。
実行
「拡張機能をインストールして実行する」を参考にして拡張機能インストールして、アイコンをクリックしてください。
サイドパネルが開いたらテキストボックスに適当な文字を入力して「保存する」を押します。
一度サイドパネルを閉じるか、ブラウザを再起動しして、もう一度サイドパネルを開くと、入力した文字がそのまま残っていれば成功です！
