Chrome 拡張機能「Motivation」の使い方とカスタマイズ

先日ライフハッカーで紹介されていた Chrome の拡張機能，
「Motivation」が結構気に入ってます。

Chromeの「新しいタブ」に自分が何年生きたか表示できる拡張機能「Motivation」 | ライフハッカー［日本版］

自分の年齢がどんどんカウントアップしていくのを見ると，
時間を無駄にしてはいけないなという気持ちになりますね。

早速ですが Motivation の使い方とちょっとした
カスタマイズ方法についてご紹介します。

まずは Chrome Web Store の Motivation ページからインストールします。
Motivation - Chrome Web Store

インストール後，新しいタブを開くと初回のみ設定画面が表示されます。

生年月日を入力してボタンをクリックすると，

設定完了です！！
これでいつでもタブを開くときは
意識的にモチベーションを維持することができますね！

・・・って，あれ？Chrome Web Store のデザインとちょっと違う？？

背景色が白のみで，編集画面にも設定ページがないですね。。
黒背景の方が落ち着いたイメージでいいんだけど。

ということで拡張機能をサクッとカスタマイズしてみました。

Mac の場合，拡張機能は下記のディレクトリに保存されています。

~/Library/Application Support/Google/Chrome/Default/Extensions

Chrome でユーザプロファイルを作っている人は下記のディレクトリになります。

~/Library/Application Support/Google/Chrome/Profile 1/Extensions 

（Windows は UserData の下のフォルダにあったと思います。）

Extensions というディレクトリの下に実際に拡張機能のファイルが置いてあります。
拡張機能のフォルダはランダム英数字になっているので，地道に該当するディレクトリを探していく必要があります。

Motivation の場合，2014/8/17 時点でバージョンが 0.6 なので，
下記のようなディレクトリを探していくと分かりやすいです。

ofdgfpchbidcgncgfpdlpclnpaemakoj/0.6_0

次に下記のファイルを開きます。

css/style.css

そうすると下記のような CSS があります。

body, input {
  display: -webkit-flex;
  font-family: 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
}

ここをこんな感じに変更すると，，

body, input {
  display: -webkit-flex;
  font-family: 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
  background-color: #1D242E;
}

背景色が変更されました！

これで好きなデザインにカスタマイズができますね！
同じディレクトリ内にある html ファイルもちょっとカスタマイズすれば，
表示のデザインも簡単にカスタマイズできそうですね。

ちょっと自分好みに変えたいなーって思ってる人は，
是非とも参考にしてみてください。