[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法 #JavaScript

拡張機能内で値を保持したい場合、Chrome拡張ではchrome.storageが利用できます。
今回は、そのchrome.storageを利用する方法をご紹介します。

なお、chrome.storageに保存できる最大容量は、約5Mbyteまでになります。
このサイズを超える場合は、
manifest.jsのpermissionsに「unlimitedStorage」を追加してください。

新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
こちらがそのChrome拡張の記事です。ご興味があれば

用意するファイル

root/
 　├ manifest.json
 　├ popup.html
 　├ js/
 　│　 ├ popup.js
 　│　 └ jquery-3.5.1.min.js
 　└ img/
 　　  ├ icon32.png
  　　 └ icon48.png

popup.html

ポップアップメニューのソースです。
p#titleに保存したタブのタイトルを表示します。
button#btn(「ストレージクリア」ボタン)を押すと保存していたタイトルを消します。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/popup.js"></script>
  </head>
  <body>
    <p id="title" style="min-width: 520px;"></p>
    <button id="btn" type="button" style="margin-top:10px;">ストレージクリア</button>
  </body>
</html>
<!DOCTYPE HTML>

popup.js

popup.htmlを開いたときと、
button#btnを押したときに実行する処理を記述します。
1.chrome.tabs.query
　現在のウィンドウ(currentWindow:true)で表示中のタブ(active:true)を取得します。
　ここではタブのタイトル名を取得しています。
2.chrome.storage.local.get
　ストレージから保存しているタイトル名を取得します。
　指定している"title"は、コールバックで返されるvalueのキー値になります。
　もし、複数取得したい場合は、配列で["title","other",..]と指定します。
3.chrome.storage.local.set
　ストレージにタイトル名を保存します。
　タイトル名が保存されていなかった場合は、現在のタブタイトル名を
　タイトル名が保存済みの場合は、取得したタイトル名に現在のタブタイトル名を付け足しています。

$(function(){
  chrome.tabs.query({ active: true, currentWindow: true },function(tab){
    //ストレージから保存されているデータを取得
    chrome.storage.local.get("title", function(value) {
      var title = (value.title ? value.title+"<br>" : "")+tab[0].title;
      //ストレージにデータを保存
      chrome.storage.local.set({"title": title},function(){
        $("#title").html(title);
      });
    });
  });
  $(document).on("click","#btn",function(){
    $("#title").html("");
    //ストレージをクリア
    chrome.storage.local.clear();
  });
});

manifest.json

permissions
　storage：ストレージを使用するための権限
　　　　　5Mbyteを超えるサイズを取り扱いたい場合、
　　　　「unlimitedStorage」を追加してください。
　tabs：タブの情報を取得するための権限
　　　　この権限がなくともタブの情報は取得できますが、
　　　　ない場合は「url,pendingUrl,title,favIconUrl」は取得できません。
　　　　　url：タブのURL
　　　　　pendingUrl：タブが完全に開かれる(コミットされる)前のタブURL
　　　　　title：タブのタイトル
　　　　　favIconUrl：タブのファビコンURL
action - default_popup
　chrome拡張のアイコンをクリックした際に呼び出すHTML(popup.html)を指定します。

{
  "name": "ストレージテスト",
  "version": "1.00",
  "description": "ストレージテスト",
  "permissions": ["storage","tabs"],
  "action": {
    "default_icon": {
      "32": "images/icon32.png"
    },
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "images/icon48.png"
  },
  "manifest_version": 3
}

実行結果

1.Chrome拡張のポップアップメニューを開くと。。タブのタイトル名が取れている

2.続けてタブ切替、ポップアップメニューを開くを繰り返すと。。開いたタブのタイトル名が全て取れている。

3.ウィンドウを閉じて、再びポップアップメニューを開くと。。閉じる前のタイトル名も残っている

ちなみに。。。。

プログラム以外から保存されているストレージの内容をみたい場合は
1.Chrome拡張アイコンを右クリック
2.メニューの「ポップアップ検証」をクリック

3.DevToolsが開かれるので、コンソールで下記を実行

chrome.storage.local.get("title", function (data) { console.info(data) });

おしまい。。

その他のChrome拡張の実装方法

以下はこれまでに投稿したChrome拡張の記事です。用途に応じてご覧ください。
[Chrome拡張]　ツールバーのアイコンをクリックしてHTMLページを表示する方法
 [Chrome拡張]　Chrome拡張メニューからページを操作する方法
 [Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法
 [Chrome拡張]　Chrome拡張画面でタイマー(定期実行処理)を使用する方法
 [Chrome拡張]　Content Scriptsでタイマー(定期実行処理)を使用する方法
 [Chrome拡張]　Chrome拡張メニューからWebページを操作する方法
 [Chrome拡張]　Chrome拡張メニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法
 [Chrome拡張]　Chrome拡張メニューとWebページでやりとりする方法(Content Scriptsを使う)
[Chrome拡張]　Chrome拡張メニューから開いていないWebページの情報を取得する方法
 [Chrome拡張]　ポップアップメニューを表示する方法
 [Chrome拡張]　ポップアップメニューからWebページを操作する方法
 [Chrome拡張]　ポップアップメニューからWebページを操作する方法(jQueryを使う)
[Chrome拡張]　ポップアップメニューからWebページを操作する方法(スタイル変更)
[Chrome拡張]　ストレージ(chrome.storage.local)を利用する方法
 [Chrome拡張]　オプションページを表示する方法

[Chrome拡張] ストレージ(chrome.storage.local)を利用する方法