この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Google Chrome Extention講座 第八回「オプションページに保存する1」

前回はバックグラウンドでの通信を学びましたが、取得したデータはブラウザを閉じるとなくなってしまいます。
そこで、取得したデータを保存するにはどうすればいいか? ということになるのですが、Chrome Extentionではいくつかの方法があります。

1.オプションページにHTML5のlocal.strageで保存する
2.オプションページにChrome独自のchrome.storageで保存する
3.オンラインストレージにAPIを通じて保存する
4.ajaxで他のプログラムと通信して保存する
もっとも手っ取り早いのが「1.オプションページにHTML5のlocal.strageで保存する」となります。
(ただし、5MB以上は保存できないといった制約があるようです)
というわけで、まずはオプションページに保存してみましょう。
オプションページは存在すれば、Google Chromeのメニューから [ 設定 ] → [ 拡張機能 ] → [ (該当エクステンションの)オプション ] で開くことができます。

オプションページは例によって普通のHTMLで作ることができ、これまで学んできた方法と作り方は一緒です。
まずはオプションページを使うために「manifest.json」にオプションページを追加してみましょう。

以下のようになります。

{
	"manifest_version": 2,
	"name": "sample7",
	"description": "sample description",
	"version": "1.0",
	"browser_action":
	{
		"default_icon"	: "icon128.png",
		"default_title"	: "Scrap Book",
		"default_popup"	: "popup.html"
	},
	"content_scripts": [
		{
		  "matches": [
			"http://*/*",
			"https://*/*"
		  ],
		  "js": [ "jquery-2.1.4.min.js" , "script.js" ],
		  "css": [ "style.css" ] 
		}
	],
	"background": {
		"page": "background.html"
	},
	"options_page": "options.html",
	"permissions": [
		"tabs",
		"https://*/*",
		"http://*/*",
		"storage"
	  ]
}

一行加えるだけですね。
あと既に書き加えられていますが「permissions」に「storage」を許可しておく必要があります。
次に宣言したファイル「options.html」を用意します。これは「manifest.json」と同じフォルダに入れます。
オプションページも直接jsファイルを読み込めないためポップアップページを作った時同様に、外部ファイルリンクとして呼び出します。

では、「options.html」の中身ですが、これはシンプルに行きましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>オプションページ</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="options.js"></script>
</head>

<body>

<h1>Optionテスト</h1>

	テキスト <input id="text" type="text" /><br />

	<input id="save" type="submit" value="保存する" />

	<div id="msg"></div>

</body>
</html>

次に「options.js」は以下のようになります。

関連記事