chromeの拡張機能を作った話

さて、12月も終盤にさしかかってきて、アドベントカレンダーの季節も終わりが見えてきましたね。
このアドベントカレンダーもいろんなジャンルで、難しい内容だったり（僕には全然わからないものもありました）、プログラミング関係ないだろって感じのものもあっておもしろかったです。

そんな感じで僕は、がっつりプログラミングの技術的な話ではないですけど、先日友達とノリで作った拡張機能について話していきながら拡張機能を作る上で僕が思った事とかを書いていけたらなと思います。（要するに宣伝ですね）
あんまり、作り方の細かい話とかしても作る人ほとんどいないと思うんで簡単に書きます。

chromeユーザーじゃない方には全く関係ない話ですね、さっさと読み飛ばしてください

0. 動機

まあ、なんで拡張機能を作ろうっていう話になったかというと、Chromeのブックマークが使いにくいなっていうを前から話てました。
それで、もう一人の友達が学校の授業で拡張機能を作った事があって、使いやすいようにできるっていう事は分かってて、ちょうど制作物にけりがついたタイミングで、じゃあ作ろうかということで作ってみました。

1. そもそも拡張機能って

簡単に言うと、JSで書けてChromeが便利になるものです。Chrome ストアで、いろいろな拡張機能が公開されていて、有名どころでいうとAdblockとかでしょうか？　
そんなのがあって、ブラウザが便利になる反面、重くなるという弊害もあります。もちろん拡張機能の中身によるのでほぼ影響がないものもあるのですが、少なくともないよりは少し重くなる可能性があります。

2.作り方

基本的にWhat are extensions? - Google Chrome（googleのページ（英語））を読めば作ることができます。
さらに、拡張機能で使えるAPI（ブックマークやタブ、通知などのブラウザの機能をいじるためのもの）がいろいろあって、これらはextension APIをみれば全て乗っています。
簡単ですね。
まあ、もうちょっと説明すると、基本的にはWebページを作るのとほとんど同じで、その他に特別なページ
拡張機能の構造は

	説明
manifest	拡張機能の概要を示したファイル
background(event)	裏側で動くスクリプト
content	ウェブページを表示した時に動くスクリプト
popup	画面の右上からひょこって出るウィンドウ

こんな感じです。
各場所でAPIを叩いていくだけです。

参考になるサイトなど
- 1000chさんのハンズオン資料
- LIG Blog

3. 作った拡張機能

BookmarkerというアプリですでにChromeアプリストアで公開されています（是非使ってください！！！）
どんなアプリかというと、みんなプログラマーならキーボーから手を離したくないですよね？
そこで、この拡張機能はキーボードから手を離さずにブックマークやタブ遷移ができるのです。

他にもいろんな機能があるのですが、正直説明めんどくさくなってしまったし、あんまり宣伝するのも良くないのでやめましたw。

4. 作ってみて思った事

非同期通信

拡張機能は全部非同期通信で動いているので、何をしようにもPromiseだったりを使わなくちゃいけないのでかなりめんどくさいです。
また、非同期通信でかつスクリプトが実行されるタイミングを制御できない部分もあるので、実行する順番や同時に起きた場合などをかなり考えておかないと簡単にバグります。

APIが微妙

拡張機能の場合APIで決められている事以上の事は出来ないのでAPIがクソだともうどうしようもないです。
例えば、ストレージのAPIがあるのですが、ストレージ全体が一つの大きなJSON形式で保存されるのですが、ネストして保存する事が出来ないません。
ネストしたい場合、毎回一番親のオブジェクトを取ってきて保存する必要があるのですが、上記の非同期通信のせいでイベントで発火してストレージを変更するなどの場合、上書き保存されていくので結局最後のイベントの変更しか保存されないなどの自体が発生します。（説明が下手くそで申し訳ないですが、要するにイベントでストレージ保存するのができない）
他にも特にイベント関連でAPIの実装の微妙な部分が多々あり使いにくいところもあってなんとも言えないところがあります。

おすすめ拡張機能

正直このためにこの記事を書きましたw
開発が捗る便利な拡張機能を紹介します。

Auto pager

自動で次のページを読み込んでくれる拡張機能。
うざい時があるので、適宜オフにするといいです。
あと結構重い。

Bookolio

新しいタブを開いた時に、ブックマークとか各種検索エンジンとかいろいろ使いやすいものを並べてくれる
Bookmaker+Bookolioで最強

goodbye”Zenkaku” – さよなら全角英数

名前の通り全角英数字をなくしてくれます。
いらない人にはメモリの無駄なのでお勧めしません。

Google Mail Checker

開発関係ないですけど、Gmail使ってる人は未読メッセージを表示してくれるので便利です。

Twitcher - Twitter Account Switcher

みなさんツイッターやってますよね
複数のアカウントを切り替えるのが便利になる拡張機能です。

SearchPreview

google検索結果のページのリンクの横にページのスクリーンショットを表示してくれます。

DevTools Theme: Zero Dark Matrix

chromeのデベロッパーツールを黒くかっこよくしてくれるやつです。
導入するのにデベロッパツールの設定を変える必要があるのでそれをしないと何も変わらないです。

Google Similar Pages

開いているページと似たページを取ってきてくれる拡張機能です。
結構取ってきてくれるページのセンスがよくて、調べ物がものすごくはかどります。
これはめちゃくちゃお勧め

広告非表示系のアプリは使わない

adblockなどの広告非表示系はあまり使わない方がいいと思っています。結構ブラウザ重くなりますし、広告こみでデザイン組んでるページとかだとたまにページ崩壊することがあるので。

最後に

忙しくて本当に雑な感じになっちゃって申し訳ありません。
紹介した拡張機能は結構便利なものが多いので是非使って欲しいです。（後、できればBookmarkerも便利なんで使って欲しいです！！）
拡張機能は結構簡単に作れるし、リリースにもiOSアプリなどと違って500円でリリースすることができるので、オススメです。しかしながら、APIが微妙だったり、非同期通信がめんどくさかったりとちょっとマイナスな面もあります。もし気が向いたら作ってみてください。
作らなくても、アプリストアで公開されている拡張機能は便利なもののも多く、ブラウジングが非常に快適になります。アプリストアを漁るのも結構楽しいですので、ぜひいろんな拡張機能に挑戦してみてください！！

明日はHappa8さんのRe:ゼロから始めるVisualStudioCodeです。
僕はリゼロもVisualStudioCodeも使っていないので（ちなみに僕はWebStorm・RubyMine派です）、なんとも言えませんが、皆さん楽しみにしてください！！！