ずっと家でアプリ作っていたい

業務効率化小ネタなど

【入門】Google Chrome Extension (拡張機能)でデータを保存する

f:id:chang_app_dev:20210202223130j:plain

はじめに

データの保存ができる様になると機能の幅がグッと広がります。

そこで今回はGoogle Chrome拡張機能のStorage APIを使用してデータを保存する方法をシェアします。

データ保存をするために使用するStorage APIとは

developer.chrome.com

Storage APIGoogle Chromeブラウザにデータを保存するためのAPIです。

Storageには

  • Sync
  • Local

の2種類の利用方法があります。

Sync

Syncは公式サイトの説明によりますと、

When using storage.sync, the stored data will automatically be synced to any Chrome browser that the user is logged into, provided the user has sync enabled.

When Chrome is offline, Chrome stores the data locally. The next time the browser is online, Chrome syncs the data. Even if a user disables syncing, storage.sync will still work. In this case, it will behave identically to storage.local.

と説明されています。

Syncとは「同期」という意味でして、その名の通りユーザーアカウントに紐付けてデータを保存します。ですので別のデバイスChromeブラウザにログインしていればデータは同期され利用することができます。

またオフラインの場合一旦データはLocalに保存されますが、他のブラウザからはデータにアクセスできません。 次回オンラインになった時、ユーザーに紐づいてデータが保存されます。

Local

Localは単純にブラウザ内の保存スペースにデータが格納されます。 ですので他のブラウザで同じユーザーを使用してもデータは同期できません。

「じゃあSyncの方がいいじゃん」と思うかもしれませんが Syncは容量が512バイトと結構小さいです。 一方Localは5メガバイト程度保存できます。

まとめると次の表の様な感じ。

Sync Local
他のブラウザでデータ利用 ×
オフラインでのデータ保存
保存上限サイズ(byte) 512 5 M

ご自身の用途に合わせて、保存形式を使い分けていきましょう。

完成品

f:id:chang_app_dev:20210207081256p:plain:w400

機能としてはtextareaに文章を入力してもらい、 「SAVE」で文章をブラウザのLocal Storageに保存、 「LOAD」でその値を読み出すというものです。

ソースコード

manifest.json

{
  "name": "one click copy memo",
  "version": "1.0",
  "manifest_version": 2,
  "permissions":[
    "storage"
  ],
  "browser_action":{
    "default_popup": "index.html"
  },
  "icons": {
    "128": "memo.png"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <div class="container p-0 bg-light">
    <div class="form-group ps-4 pe-4 pt-4 pb-4">
      <textarea class="form-control" id="textarea" rows="8" placeholder="input here"></textarea>
    </div>
    <div class="ps-4 pe-4 pb-4">
      <!-- <div class="btn btn-outline-primary" id="copy-button">COPY</div>
      <div class="btn btn-outline-danger" id="clear-button">CLEAR</div> -->
      <div class="btn btn-outline-danger" id="save-button">SAVE</div>
      <!-- <div class="btn btn-outline-secondary" id="add-button">ADD</div> -->
      <div class="btn btn-outline-secondary" id="load-button">LOAD</div>
    </div>
    <div>
      <p class="h-1" id="input-text"></p>
    </div>
    
  </div>
  <script src="main.js"></script>
</body>
</html>

main.js

document.getElementById("save-button").addEventListener("click", ()=>{

  var inputValue = document.getElementById("textarea").value;

  chrome.storage.local.set({"memo1": inputValue}, function(){ });

});

document.getElementById("load-button").addEventListener("click", ()=>{

  chrome.storage.local.get("memo1", function(result){

    document.getElementById("textarea").value = result.memo1;

  });

});

アイコンはお好きな物を使用してください。 僕は以下のサイトでメモっぽい奴を適当に選びました。

icooon-mono.com

コード解説

今回はSyncではなくLocalを使用しての実装になります。 ですのでSyncを使用してのデータ保存に関しては他の記事等を 参考にしてください。(基本的にはあまり変わりませんが)

データを永続化して保存する上で必要なのは manifest.json内のpermissionsです。

Storage APIなどのAPIは、使用する際にはAPIサーバーに クライアントが使用する旨を伝える必要があります。 そこでpermissionsにstorageと記述することで APIが使用できる様になります。

また実際の保存・読み出し処理は以下の様に行います。

データ保存

chrome.storage.local.set({"memo1": inputValue}, function(){ });

setメソッドを使用します。第一引数には保存するデータを オブジェクト形式で渡します。

今回ですと、キーがmemo1で値がinputValueになります。 inputValueは前述したtextareaで入力された値になります。 呼び出す際にはキー名で値を呼び出すので、データの中身が判別しやすい 名前だといいですね。

第二引数には保存の際に行う処理をコールバックで渡します。 今回は特に行う処理がないので空です。

データ読み出し

  chrome.storage.local.get("memo1", function(result){

    document.getElementById("textarea").value = result.memo1;

  });

getメソッドを使用します。第一引数には読み出すデータのキーを渡し、 第二引数には読み出した際に実行する処理をコールバック関数で記載します。

今回読み出す値のキーはmemo1です。

また第二引数のコールバックには、Storage APIの仕様として 引数に読み出したデータが渡されます。 読み出した値はオブジェクト形式で渡されますので、 キー名を指定して上げることで値を受け取ることができます。 今回ですと、result.memo1ですね。

最後に受け取った値をtextareaのvalueに渡すことで表示できる様になります。

まとめ

以上がStorage APIを使用してのデータ永続化方法です。 個人的な感想としては思ったよりも簡単に実装できたと感じてます。

重要なポイントはAPIを使用するためにpermissionsにstorageを記載し、 仕様書の通りに実装することです。 この実装の流れはStorageだけに限らずあらゆるAPIで同じですので、 是非APIを使い方に慣れていきましょう。

本記事がお役に立てたら嬉しいです。