拡張機能内で値を保持したい場合、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拡張] オプションページを表示する方法