【Chrome拡張機能】シンプルなToDoリスト・メモ帳を開発してみた

個人的に開発して使っていた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ストレージ内を全て削除する場合は

localストレージ内に登録する場合は

localストレージ内から取り出す場合は

以上でlocalストレージエリアを操作することができます。

本拡張機能が呼び出された際に、ストレージに格納されているデータが入ったDOMを生成します。

タスクの登録処理は以下のように行なっています。

 

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があるのかは以下から確認できます。

以上を踏まえた上で、本拡張機能のマニフェストファイルは以下のようになりました。

以上で、Chrome拡張機能の登録準備は完了です。

あとは、Chrome ウェブストアからデベロッパーダッシュボードにアクセスし、登録手続きをするだけです。最初に登録する場合は5$払ってデベロッパー登録する必要があります。

具体的な手順は以下の記事が参考になりました。

 

思った以上に簡単にできるので、また何か思いついたら作って登録してみようと思います。

「Simple ToDo List」のChrome拡張機能追加はこちら。よかったら使ってみてください。