WebサイトをWebGLでブラウズするChrome拡張機能を作った

このエクステンションは、ブラウザ画面の横にウェブページ全体をサムネイルとして表示する。
また、その中で現在表示してる箇所は特に明るく示される。

これは、記事を読むときなど、全体の分量や現在の位置をひと目で把握するのに使える。
また、ミニマップ中の気になるところをクリックすると、その箇所にジャンプすることもできる。
そのため、移動したい場所の内容を表示するスクロールバーとしても利用できる。

ミニマップが表示されているパネルは、端をドラッグして自由にサムネイルのサイズを変更できたりする。
また、スクロールに伴ってミニマップ中の明るいエリアが移動する。
こうした処理をスムーズに行うために、ミニマップの描画にはWebGLを用いている。
当初は普通に2dのcanvasで描画をするつもりだったのだが、これで実装すると動作がカクカクになってしまった。
WebGLだと全く処理落ちすることなく描画できた。
WebGLすごい。

また、サイトのキャプチャにはhtml2canvasというJSライブラリを利用した。
これもすごい。