Chromeの拡張機能の勉強をするために、マネーフォワードの拡張機能を作りました。

マネーフォワードの拡張機能　moneyfoward extention

きっかけ

Chrome拡張で何かしたいなぁと思っていたところで、普段からPCのマネーフォワードを見ていて不便だなぁと思うことを改善するためにやってみました。必要は発明の母。

Chrome拡張の準備

• エディタ：Visual Studio Code
  使いやすいのでVisual Studio Codeを使いました。拡張機能も充実してるので、こことかこことか見ながら環境作りました。
• コード管理：Git
  普通なので、これは割愛。
  これだけかも、、、、 #参考になった情報
• Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
• Chromeのオリジナル拡張機能を開発しよう
• Chrome拡張を簡単に作れるテンプレとライブラリ造ったので紹介

などなど

使ったもの

• JQuery 基本JQueryベースで作成しました。
• Bootstrap オプションページなどで利用してます。

機能

現在までに作っている機能です。

メモ機能

我が家では毎月その月がどうだったのかを簡単に振り返りをしています。その振り返りの内容が話し合うだけでなくて何に気を付けるとかそういうことをちゃんと記録として残しておきたかったので、家計簿のページの下に毎月の家計に関してのメモが残せるようなメモ機能を作成しました。
Chromeのstorage機能でsyncに保存するので、Chromeでログインしていればデバイスが変わってもメモの内容を閲覧できます。
storage機能は結構簡単に使えるのでChrome拡張でもおススメの機能です。
manifest.jsonのpermissionsに

"permissions": [
    "storage"
  ],

と書いておけば、後はsetやgetで利用できます。
メモ機能は日付のキーとして利用しています。

    //メモの保存
    memo[memoKey] = memoText;
    chrome.storage.sync.set(memo, function() {
        alert('メモを保存しました。');
    });
    // メモの取り出し
    chrome.storage.sync.get(dayMonth, function(result) {
        $('#memo_area').val(result[dayMonth]);
    });

storageの詳しい機能はこちら

期間収入合計を表示する

マネーフォワードの家計のメニューに[月次推移]があり、そこで毎月の収入と支出と収支の合計が6か月間表示されているのですが、結局6か月でいくらくらい貯蓄できてて、毎月平均どれくらい収支がプラスなのか？がよくわからないので、それを表示するようにしました。
これでここを見れば、お金がたまってる感は味わえるはずです。
ここはほんとにJQueryの機能だけで実現できています。難しいことはほとんどしていません。Chrome拡張ほんと簡単ですぐ改善できるので楽しい。

流動資産と固定資産を分けで表示

資産のページを見ると合計の資産はわかるのですが、流動資産がいくらで固定資産がいくらか？が項目ごとに合計しないとわからないので、それも表示するようにしました。また、マネーフォワードはあくまで個人のツールなので人によって保険とかは固定資産としていたり流動資産としたりする場合もあると思いますので、オプションページでそれを設定できるようにしています。

HTMLの読み込みについて

各機能を作るにあたり、複雑なHTMLをJQueryにべた書きしたくなかったので、HTMLファイルに別に保存し、ajaxを使って挿入するようにしました。これで、コードもだいぶ見やすくすることができました。
メモ機能のHTML

<div id="memo">
    <form class="pure-form">
        <fieldset>
            <textarea id="memo_area" class="pure-input-1-2" placeholder="メモ" rows="10" maxlength="1000"></textarea>
            <p>1000文字まで入力可</p>
        </fieldset>
        <button id="btn_memo" class="pure-button pure-input-1-1 pure-button-primary">保存する</button>
        <a id="lnk_reload" style="margin-left: 10pt">リロード</a>
    </form>
</div>

HTMLをajax挿入する

$(function(){
    var textareaUrl = chrome.extension.getURL("textarea.html");
    $.ajax({
        type:'GET',
        url: textareaUrl,
        datatype: 'html',
        success: function(data) {
            $('#daily-info-contents').after(data);
        },
        error:function() {
            alert('問題がありました。');
        }
    });
}

こんな感じで他のHTML部分も全部別にして別途ajaxでロードするようにしています。

まとめ

Chrome拡張は本当に簡単に作成できかつ、改善効果も大きいのでとてもおススメです。自分も初めてやってみてJSだけでさらっとできてしまうとは思ってませんでした。
皆さん良かったら是非拡張機能を使っていただき、こんな機能があったらなとかご意見くれると嬉しいです。