ブラウザ拡張機能を開発している際に、変数などの値を次回以降の起動時にも呼び出して使用したり、ユーザーが別端末からも同じデータを取得して使用したりしたい状況、ありますよね。そんなときに必要になるのがChrome Storage APIです。
下準備
まずは機能を使用するためにManifest.jsonに下記の記述が必要です。これが無いとストレージがそもそも使用できません。
"permissions": [
"storage"
],コードの基本構成
下記のコードが基本構成となり、その後に保存や読み込みをするデータに関してのコードが続きます。
chrome.storage.保存方法.モード
では青字と赤字部分の説明です。
保存方法
保存方法にはそのデータを、
- オフラインに保存する(永続)
- オフラインに保存し、同時にオンラインでの同期する(永続・アカウント同期)
- ブラウザセッション中のみ保存する(一時)
の３つから選べ、コードに書くときは下記の表のようになります。
| 保存方法 | 書き方 | 使用可能な容量 |
|---|---|---|
| 1.オフライン | local | 5MB(後述の方法で拡張が可能) |
| 2.オンライン同期 | sync | 100KB(項目ごとに8KB) |
| 3.セッション | session | 10MB |
また、上記の表にも記載しましたが、ストレージの容量には制限があり、保存方法により容量が変わるので気をつけましょう。
※以降は書き方の名前で呼称します。
モード
モードにはデータの読み込か、書き込みを指定します。
読み込みの場合は”get”、書き込みの場合は”set”を使用します。
localの容量の増やし方
localでは5MBまでのデータしか扱えませんが、このようにManifest.jsonのpermissionsにunlimitedStorageを追記することで容量制限を解除できます。
"permissions": [
"storage",
"unlimitedStorage"
],実際に使ってみる
今回はlocalでHello Worldという文字列を保存して、呼び出した後に表示するところまでを行っていきます。
(習うより慣れろと言いますし)
まずは書き込みです。
保存先をlocal、モードをsetにし、続く{}の中にデータを入れます。
chrome.storage.local.set{
"test":"Hello World",
}testはKeyで、後で呼び出す際に使用します。実質的に変数名です。
Keyの後に”:”を挟んで、保存したい値を入れます。文字や数字はダブルコーテーションで囲います。
別の変数に入っている値を入れたい場合は下記のように変数を入れます。
var hogehoge = 0;
chrome.storage.local.set{
"test": hogehoge,
}以上で書き込みは完了です。
それでは、読み込んでみましょう。
chrome.storage.local.get(["test"]).then((result) => {
});localに保存されているデータなので、.local、読み込みなので.getを指定します。
.get([“”])の中には取得したいデータに紐づけたKeyを入れます。.then((result)のresultは取得したデータの値が入る場所なので、storage_dataなど別の名前に変更しても良いです。
これで読み込みは終わったので、最後にコンソールに表示してみましょう。
先程のコードの{}の中に書いていきます。
これは、ここで呼び出した値は同一のブロック内でしか、使用できないからです。
取得したデータの名前.Keyを参照するとデータの中身が見れるので、今回の場合はresult.testになります。
chrome.storage.local.get(["test"]).then((result) => {
console.log(result.test);
});上記のように書き、実行するとコンソールにHello Worldと表示されます。
毎回、result.testと書いて呼び出すのは面倒なので、下記のように別の変数に入れておくと楽にコードが書けて良いですね。
var hugahuga = result.testまとめ
以上がChrome Storage APIの使い方です。
尚、2023年6月12日時点ではAPIの名前にChromeと入っていますがFirefoxではlocalとsyncでの書き込み読み込みが可能でした。
(“session”は文献が見当たらないので不明ですが、後日検証して追記します)
コメント