Chrome拡張機能の「メモ帳」を手探りで開発してみました（後編）

こんにちは、はちです。

Chrome拡張機能の「メモ帳」を手探りで開発してみました（前編）では、Chrome拡張機能を開発するにあたって必要な「仕様書」の部分、”manifest.json”の作成まで行いました。
（まだ見ていない人は前編も御覧ください！）

後編では、中身をサクッと作って、仮で動かしパッケージ化する所まで進んでみたいと思います。

では早速中身を作っていきましょう。

Chrome拡張機能を作る

1.目に見える所から。HTML部分の作成

ここからの作り方は基本的に通常のWebアプリと同じです。
まずはHTMLから作りましょう。manifest.jsonの”browser_action”で指定した「popup.html」を作ります。
といってもただのテキストボックスと保存ボタンがあれば良いので、こんな感じのHTMLが出来上がると思います。

この中にある「load.js」と「save.js」は後ほど作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<script src="js/load.js"></script>
</head>
<body style="min-width:500px">
<form id="form">
	<textarea rows="10" name="contents"></textarea>
	<input type="submit" class="btn btn-primary" value="保存">
</form>
</body>
<script src="js/save.js"></script>
</html>

2.テキストボックス内の文字を保存する機能の作成

フォームのボタンが押されたら、テキストボックス内にあるデータを取得して、Chromeが用意するストレージに保存してあげる機能を作ります。
そのためにchromeAPIの“storage”を使用します。使い方は以下の通り。

今回はメモ帳なので、制限なく使える「local」を採用します。
“save.js”というファイルを用意して、まずは「保存ボタンが押された時」というJavascriptを書いて…

document.getElementById('form').onsubmit = function(){

}

次にid=contentsに書かれたテキストを取得します。

document.getElementById('form').onsubmit = function(){
	var contents = document.getElementById('form').contents.value;
}

そして、chrome.storage のset関数でローカルストレージのhold_contentに保存します。

document.getElementById('form').onsubmit = function(){
	var contents = document.getElementById('form').contents.value;
	chrome.storage.local.set({hold_content:contents});
	return false;
}

以上で保存する処理が完成しました。

3.保存した文章を取り出す機能の作成

さて、このメモ帳アプリは起動した（拡張機能のマークを押した）時点で文章が読み込まれている、という機能にしてあげたいです。
そこで使用する関数はget関数になります。
“load.js”というファイルを用意して、以下のように書き込んでください。

chrome.storage.local.get("hold_content", function(items) {
    document.getElementById('form').contents.value = items.hold_content; 
});

取り出された値は、すべてfunction(items)のitemsに格納されます。
後はid=contentsがついているテキストボックスに取得した値を適用すると無事起動時に表示されるようになります。

いかがでしょうか。これでメモ帳アプリが完成しました。簡単ですね！

実際に作ったアプリを仮で動かしてみる

では、実際に作ったアプリをChromeに読み込ませて、テストしてみましょう。

インストールに失敗した場合は、親切にChromeがどこが駄目だったかを教えてくれます。
インストールに成功したら、ひとまず動かしてみて気になった所を修正していきましょう。

完成した拡張機能を実際に公開してみる

開発した拡張機能を皆に使ってもらう場合でも、特定の人にだけ使ってもらう場合でもChrome拡張機能を実際に公開（ChromeWebストアにUP）しなければいけません。

まず完成したChrome拡張機能をzipファイルに収めます。
manifest.jsonが入っているフォルダをそのままお手持ちのソフトでzip化すれば大丈夫です。
その時、バージョン番号がリリースしたい番号になっているかを確認して下さい。

完了したら、実際にアップロード作業に移ります。

長々と書きましたが、これでChrome拡張機能を実際にインストールして使えるようになりました。

最後に（おまけもあるよ！）

前編、後編に分けてChrome拡張機能の開発方法について書きましたが、いかがだったでしょうか。
メモ帳で開発でき、Webアプリのように開発できるけど、自身のサーバーも用意する必要なし、ミニアプリでも十分活躍できるフィールド、Chromeの需要も大きい！
と、なんとも至れり尽くせりな場所のようです。

と、実はここまでに仮で開発していたメモ帳アプリですが、実はそれに機能をグリグリと加えてChrome拡張機能として実は公開しています！
その名も「ぱっと保存メモ帳」！です。
よかったらインストールして使ってみて下さい。それでは。

Chrome拡張機能「ぱっと保存メモ帳」の紹介ページへ