Chrome Extensionを作ってみた！

1. CHROME EXTENSIONで効率アップ！
Wedding Park メディア開発本部
東 和樹
LT会 2016/08/26

2. 自己紹介
Wedding Park メディア開発本部
東 和樹（呼称： あずめん）
サーバサイドエンジニア
サイトのパフォーマンスチューニン
グ

3. お題「技術で効率改善」について考える

4. せっかくなので、これを機に、
業務で使える効率改善について考えてみた

5. 開発以外
スケジュール確認
メール確認
ミーティング
コードレビュー

6. 何にストレスを感じるか。
Gmailで自分宛の通知が来ない
Chromeのタブ開きすぎ
イイLGTM画像がなかなか見つからない
開発没頭してMTG忘れる

7. 全部ブラウザのせい
ならばブラウザで解決しよう

8. みなさん、CHROME 拡張機能使ってますか？

9. では、作ったことある人！！

10. CHROME EXTENSIONとは
Google Chromeで動く拡張機能
OSに依存しない
HTML, css, javascriptで手軽に書ける

11. CHROME EXTENSIONの開発
Manifest ... 設定ファイル
Content Script ... 任意のページでスクリプトを実行する
Background Page ... バックグラウンドで処理を行う
Browser Action ... ツールバー上にボタンを追加
Option Page ... 設定変更等行えるページ
これらの要素間についてデータを”メッセージ”として
やり取りすることで様々なことができる。

12. GMAILの特定ラベルの
未読数を通知をしたい

13. GMAILの未読数通知
現状
受信箱の未読数がタブアイコンに通知される（不要）
早めに知りたいのは自分のメールアドレスへのメール
コードレビュー依頼など結構見逃す
レスポンス遅れてしまいがち
固定タブの１つにGmailがある
（固定タブが多すぎてタブのサイズが小さい...）

14. GMAILの未読数通知
やりたいこと：
Extensionのバッチに指定ラベルの未読数表示
定期的に指定されたラベルの未読数をチェック
未読数が増えたタイミングでデスクトップ通知される
実装してみた。

15. GITLABでLGTM
現状
コードレビューでMR承認時LGTM画像を貼っている
LGTM画像をサイト上でランダムで探すのが大変（重い）
github用のLGTM画像をコメントに張り付ける拡張機能はあった
やりたいこと
GitlabでLGTMをコメントに張り付けるようにしたい
他サイトで無効にしてGitlab専用の拡張にしたい
ブラッシュアップしてみた

16. まとめ
CHROME拡張機能で自分用にカスタマイズ
Gmailの改善！
gitlab用のLGTM画像作成ツール
所感
ブラッシュアップは、結構簡単。
皆さんもぜひ面倒なこと自動化しましょ！

17. ご静聴ありがとうございました！