【Chrome拡張機能】シンプルなToDoリスト・メモ帳を開発してみた2018年12月30日TwitterFacebookはてブPocketLINEFeedlyフィード個人的に開発して使っていたToDoリストをたくさんの方に使ってもらうにはどうしたらよいかと考えた結果、Chromeの拡張機能として提供しようと思い至りました。元々はサーバサイドをPHPで書いていたので、JSに書き直してChrome拡張機能で使えるようにしました。List」の概要やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、優先順位を変更したり、ワンクリックで削除できます。List」のChrome追加はこちら。ウェブストアやることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。List」の使い方+(追加ボタン)を押下して、タスクを生成します。タスクの内容は入力する段階で保存されます。タスクの優先順位を変更する場合は、↑↓ボタンを押下します。タスクを削除する場合は、ゴミ箱マークをクリックします。(削除時に確認ダイアログは出ないので注意)Chrome拡張機能のDBってどうなってるの?Chrome拡張機能開発をしようと思った時に疑問に思ったのがDBってどうなってるんだろう?ということです。いうことでChrome拡張機能のDBを調べてみました。syncChromeにより同期されるストレージエリアですChromeにログインしていれば、どのパソコンからでもアクセスすることができます。localブラウザ内に閉じたストレージエリアです.パソコン単位で保存しているため、例えログインアカウントが一緒でも異なるパソコンからではアクセスできません。managedドメイン管理者によって設定され、読み取り専用のストレージエリアです。以上の3つが、Chrome拡張機能のDB(ストレージエリア)となっています。詳しくはこちらの公式サイトに記載されています。Chromedeveloper.chrome.com本拡張機能では制限の少ないlocalを使用しました。localストレージ内を全て削除する場合は1chrome.storage.local.clear();localストレージ内に登録する場合は1chrome.storage.local.set();localストレージ内から取り出す場合は1chrome.storage.local.get();以上でlocalストレージエリアを操作することができます。本拡張機能が呼び出された際に、ストレージに格納されているデータが入ったDOMを生成します。DOM生成処理...});}});タスクの登録処理は以下のように行なっています。stored');});});Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方をまとめておきます。マニフェストファイルには、拡張機能名や説明文、アイコン画像などの設定を記述します。manifest_versionマニフェストファイルのバージョンを示しています。最新版は2なため、2を使用しています。version拡張機能のバージョンを示しています。1から4つまでの数値で区切ることができます。拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。name提供する拡張機能の名称です。45文字までですが、short_nameで略称を定義することもできます。description拡張機能を紹介する説明文です。browser_action・default_iconアドレスバーの右に表示するアイコンを指定します。サイズは19pxが推奨されます。Retina用に38ピクセルのアイコンも用意しておきます。・default_titleアドレスバーの右に表示するアイコンにカーソルをかざした時に表示されるツールチップです。・default_popupアドレスバーの右に表示するアイコンをクリックした時にに表示されるポップアップのHTMLファイルを指定します。icons拡張機能のアイコンです。Storeやファビコンなどに使われます。画像の形式はpngが推奨されています。permissions特定のAPIを使うためにあらかじめ設定する必要があります。どんなAPIがあるのかは以下から確認できます。Chromedeveloper.chrome.com以上を踏まえた上で、本拡張機能のマニフェストファイルは以下のようになりました。"やることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、タスクの優先順位を変更したり、ワンクリックで削除できます。["storage"]}以上で、Chrome拡張機能の登録準備は完了です。ウェブストアからデベロッパーダッシュボードにアクセスし、登録手続きをするだけです。最初に登録する場合は5$払ってデベロッパー登録する必要があります。具体的な手順は以下の記事が参考になりました。はてブ対応さ...qiita.com思った以上に簡単にできるので、また何か思いついたら作って登録してみようと思います。List」のChrome拡張機能追加はこちら。よかったら使ってみてください。ウェブストアやることをシンプルに管理できるToDoリスト。簡易的なメモ帳としても使うことができます。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。