閲覧中のページをダークテーマ風にする Chrome 拡張機能を作った

背景

現代を生きる我々はコードを書いたり様々な設定ファイルを書いたりするために大量のドキュメントを読む必要があるが, Web 上のドキュメントは白い背景に黒い文字という色使いで提供されているものが多く, 長時間読んでいると眩しくて目が疲れてきてしまう.

そこで閲覧中のページを, 暗めの背景にグレーの文字というようなダークテーマ風に変えられたら便利だし助かる, と思うようになった.

たぶん検索すれば無限にその手の拡張機能は見つかると思うが, ES6 の勉強も兼ねて自分で作ってみることにした.

つくった

Chrome Darkener - Chrome Web Store

リポジトリ:

github.com

ボタン 1 つで閲覧中のページをダークテーマ風に変えられるようにした.

雑な実装なので元の配色を記憶したりなどはしておらず, ボタンを OFF にするとただの白背景黒文字ページになる. しかし元の配色が嫌でこの拡張機能を使うのだから, そもそも記憶しておく意味は無いと考えての手抜きである (雑)

よかった

ES6 以降で JS の文法がモダンになったりツール群が乱立したりしていることは話としては知っていたが, 真面目に足を踏み入れてはいなかった. しかし気になってはいたので良い機会だと思い, 公式ドキュメントや先人の記事を読みつつやっていきをすることにした.

Babel, Browserify / Babelify / Watchify を経て, 最終的に webpack に落ち着いた.

理由としては Chrome 拡張機能の性質上, popup.html 自体に対する .js と, 現在閲覧中のタブに chrome.tabs.executeScript で送り込む .js という 2 つのエントリポイントがあり, Browserify には複数エントリポイントを登録して各々出力したり watch したりする機構がデフォルトでは無く, webpack にはデフォルトで存在した, というのが大きかった.

それ以外にも特徴的な機能が豊富に存在することが使い続けるうちにわかってきたので, たぶんもうしばらくは webpack を使うだろうと思う.

拡張機能の実装自体は <html> ルートノード以下のすべての Element を探索して color と backgroundColor を変更するだけの極めて雑な実装であり大したことをしていないけれど, 簡単なモノを通して現代のフロントエンド事情 (?) に入門できたことは素直に良かった.

エモ

せっかく入門的な知識を得たので, 何か web サービスをつくってみたい気がする. TypeScript, React, Redux, Vue も真面目に触りたい気持ちになっている. 書いておいてあれだがこういう風に書くと口先だけのフェイク野郎っぽいので入門時のエモは書かなくても良いかもしれないと思ってきた.

今後もやっていきを...