個人的に開発して使っていたToDoリストをたくさんの方に使ってもらうにはどうしたらよいかと考えた結果、Chromeの拡張機能として提供しようと思い至りました。
元々はサーバサイドをPHPで書いていたので、JSに書き直してChrome拡張機能で使えるようにしました。
目次
Chrome拡張機能「Simple ToDo List」を開発してみた
「Simple ToDo List」の概要
やることをシンプルに管理できるToDoリスト。
簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、優先順位を変更したり、ワンクリックで削除できます。
「Simple ToDo List」のChrome追加はこちら。
「Simple ToDo List」の使い方
＋(追加ボタン)を押下して、タスクを生成します。
タスクを入力します。タスクの内容は入力する段階で保存されます。
タスクの優先順位を変更する場合は、↑↓ボタンを押下します。
タスクを削除する場合は、ゴミ箱マークをクリックします。(削除時に確認ダイアログは出ないので注意)
Chrome拡張機能のDBってどうなってるの？
Chrome拡張機能開発をしようと思った時に疑問に思ったのがDBってどうなってるんだろう？ということです。ということでChrome拡張機能のDBを調べてみました。
sync
Chromeにより同期されるストレージエリアです
Chromeにログインしていれば、どのパソコンからでもアクセスすることができます。
local
ブラウザ内に閉じたストレージエリアです.
パソコン単位で保存しているため、例えログインアカウントが一緒でも異なるパソコンからではアクセスできません。
managed
ドメイン管理者によって設定され、読み取り専用のストレージエリアです。
以上の3つが、Chrome拡張機能のDB(ストレージエリア)となっています。詳しくはこちらの公式サイトに記載されています。
本拡張機能では制限の少ないlocalを使用しました。
localストレージ内を全て削除する場合は
1 | chrome.storage.local.clear(); |
localストレージ内に登録する場合は
1 | chrome.storage.local.set(); |
localストレージ内から取り出す場合は
1 | chrome.storage.local.get(); |
以上でlocalストレージエリアを操作することができます。
本拡張機能が呼び出された際に、ストレージに格納されているデータが入ったDOMを生成します。
1 2 3 4 5 6 7 8 9 | chrome.storage.local.get(function(items) { if (items !== undefined) { $.each(items, function (index, elm) { ... // DOM生成処理 ... }); } }); |
タスクの登録処理は以下のように行なっています。
1 2 3 4 5 6 7 | // タスク登録処理 $(".smoothswap_form").each(function(i, elm){ var $content = { content : $(elm).find('*[name=content]').val() }; chrome.storage.local.set({[i]: $content}, function() { console.log('content stored'); }); }); |
Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方
Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方をまとめておきます。
マニフェストファイルには、拡張機能名や説明文、アイコン画像などの設定を記述します。
manifest_version
マニフェストファイルのバージョンを示しています。最新版は2なため、2を使用しています。
version
拡張機能のバージョンを示しています。1から4つまでの数値で区切ることができます。
また、拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。
name
提供する拡張機能の名称です。45文字までですが、short_nameで略称を定義することもできます。
description
拡張機能を紹介する説明文です。132文字までです。
browser_action
・default_icon
アドレスバーの右に表示するアイコンを指定します。サイズは19pxが推奨されます。Retina用に38ピクセルのアイコンも用意しておきます。
・default_title
アドレスバーの右に表示するアイコンにカーソルをかざした時に表示されるツールチップです。省略するとname が使われます。
・default_popup
アドレスバーの右に表示するアイコンをクリックした時にに表示されるポップアップのHTMLファイルを指定します。
icons
拡張機能のアイコンです。Chrome Web Storeやファビコンなどに使われます。また、画像の形式はpngが推奨されています。
permissions
特定のAPIを使うためにあらかじめ設定する必要があります。
どんなAPIがあるのかは以下から確認できます。
Declare permissions | Extensions | Chrome for Developers
以上を踏まえた上で、本拡張機能のマニフェストファイルは以下のようになりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { "manifest_version": 2, "version": "1.0.0", "name": "Simple ToDo List", "description": "やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、タスクの優先順位を変更したり、ワンクリックで削除できます。", "browser_action": { "default_icon": { "19": "images/icon/19.png", "38": "images/icon/38.png" }, "default_title": "Simple ToDo List", "default_popup": "index.html" }, "icons":{ "16": "images/icon/16.png", "48": "images/icon/48.png", "128": "images/icon/128.png" }, "permissions": [ "storage" ] } |
以上で、Chrome拡張機能の登録準備は完了です。
あとは、Chrome ウェブストアからデベロッパーダッシュボードにアクセスし、登録手続きをするだけです。最初に登録する場合は5$払ってデベロッパー登録する必要があります。
具体的な手順は以下の記事が参考になりました。
超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 #JavaScript - Qiita
思った以上に簡単にできるので、また何か思いついたら作って登録してみようと思います。
「Simple ToDo List」のChrome拡張機能追加はこちら。よかったら使ってみてください。