【Chrome拡張機能】ストレージを使ったデータの扱い

2022年4月3日2023年3月6日

satoshiii

対象読者

Chrome拡張機能について知りたい方
ストレージを使ったブラウザアクションやバックグランドページなどの共通データを使う方法を知りたい方

ブラウザアクションとバックグランドページでのデータの送受信については他の記事にもまとめてますのでそちらも参照ください。

2022年3月30日【Chrome拡張機能】メッセージパッシング（バックグランドページ→ブラウザアクション）

ストレージとは？

storageを使うと、メモリ上にデータを保存できます。
通常のstorageはバックグラウンドページとコンテンツスクリプト間でのやり取りはできません。

ただし、chrome.storage APIを使用すると保存したデータを相互にやり取りすることができるようになります。

また、storageを使うことで以下のようなメリットもあります。

オブジェクトも渡せる
早い（メモリの値を展開するため、バックグランドなどとやり取りする必要がないため）

サンプルと動作

裏での処理がメインなので表上はアラートを表示するだけです。

バックグランドページ側で、storage登録。

ブラウザアクション側で、登録したstorageを読み込んでアラート表示しているだけになります。

2022年3月21日【Chrome拡張機能】ブラウザアクション

2022年3月24日【Chrome拡張機能】バックグランドページ

コードと解説

マニフェストファイル

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "Helloを表示"
  },
  "permissions": [
    "storage"
  ]
}

storageを使うようにするために、permissionsを追加する必要があります。

HTML

<!DOCTYPE html>
<meta charset="UTF-8" />
<html>
<head>
    <title></title>
    <script type="text/javascript" src="myscript.js"></script>
</head>

<body>

<p id="hello">Hello!</p>

</body>
</html>

ブラウザアクションでpopup.htmlを読み込み。
html内でmyscript.jsファイルを読み込んでます。

2022年3月21日【Chrome拡張機能】ブラウザアクション

JavaScriptファイル

chrome.storage.local.set({hoge : "hoge-------!!!!"});

chrome.storage.local.set({piyo : "piyo--------!!!!!"});

chrome.storage.local.set

名前と値をセットしています。

hogeと名前で、「hoge——-!!!!」という値をセット。

piyoと名前で、「piyo——-!!!!」という値をセット。

chrome.storage.local.get("hoge", function(items) {
    console.log(items.hoge);
    alert(items.hoge)
});

chrome.storage.local.get(null, function(items) {
    console.log(items.piyo);
    alert(items.piyo)
});

chrome.storage.local.get

このメソッドを使うことで、storegeに登録した値を取得することができます。

第１引数をnullにすると、すべてのstoregeに登録した内容が取得できます。

今回のメソッドでは、

hogeは、第1引数を指定。piyoは、第2引数を指定せずに取得しています。