Google Scholar DarkMode
💻

Google Scholar DarkMode

Google Scholarを開くと画面が白く光ります。論文を読みたいだけなのに、長く見ていると目が疲れてくる。その一点を消すために作ったChrome拡張です。インストールするとGoogle Scholarの配色だけが暗くなります。設定はありません。

きっかけは研究室での目の疲れ

当時、私は大学の研究室で論文を探す毎日を送っていました。Google Scholarはよく使う道具でしたが、ライトモードしか用意されていません。白い画面を長時間見続けていると、だんだん目が疲れてきます。これをどうにかしたいと思ったのが出発点でした。

Chrome拡張はそれ以前から作っていたので、「これくらいならすぐ作れるだろう」と思えたのも大きかったです。困りごとがあったとき、自分で直すという選択肢が最初から手元にありました。

設定画面もオン/オフボタンも作らなかった

この拡張には設定画面がありません。オン/オフの切り替えボタンもありません。インストールした瞬間から、ただGoogle Scholarが暗くなるだけです。

できるだけシンプルにしたくて、そういうものは削りました。保守のことも考えた上での判断です。機能を足せばコードは増えますし、壊れる場所も増えます。やりたいのは論文を読むことであって、拡張の設定をいじることではありません。

オン/オフについても、わざわざ自分で用意する必要はないと考えました。使いたくないときは、ブラウザ側で拡張機能のオン/オフを切り替えればいいだけだからです。ブラウザにもともとある仕組みを信頼して、同じものを自分で作らない。シンプルさの理由は手抜きではなく、重複をなくすことにあります。

AIのない時代、CSSを一つずつ当てた

中身はCSSだけでできています。画面全体をフィルタで一括反転させる方法もありますが、それだと論文のサムネイルやアイコンまで色が反転して、かえって見づらくなります。そこでツールバーや検索ボックスといった部位ごとに、暗い配色を手で当てていきました。

当時はまだ生成AIがありません。ChromeのデベロッパーツールでHTMLを開き、要素のクラス名を一つずつ確かめては、対応するCSSを書いていきました。GoogleのHTMLはクラス名が短く意味を読み取りにくいので、この特定作業は地道なものでした。今ならAIに任せられる部分かもしれませんが、当時は手で一つずつ潰していくしかありませんでした。

ダークモードを適用したGoogle Scholarの検索結果画面

「CSSを変えているだけ」だからOSSにした

作ったものは、同じ研究室の人にも使ってもらっていました。自分のために作ったものではありましたが、やっていることはCSSを変えているだけです。だから気負いなくOSSにして、Chrome Web Storeにも公開しました。使いたい人がいれば使ってほしい、くらいの気持ちでした。

その拡張が、公開から2年で4,000人に使われるまでになりました。

シンプルだけど、誰も作っていなかった

振り返って実感するのは、すごくシンプルなのに誰も作っていなかったから、これだけの人に使ってもらえたということです。複雑なものが求められているかというと、そうではありません。目の前の小さな困りごとを最短で解決する。それがそのまま、同じことで困っている誰かに届く。この拡張は、そのことを教えてくれました。

リンク

ほかの制作物

  • mihon | App Store ScreenShotWebApp

    mihon: A curated gallery of App Store screenshots by Japanese developers. A central hub for UI inspiration and design trends.

    • WebApp
  • Password Generator for SafariMobile App

    A simple password generator accessible directly from Safari. Instantly customize criteria to meet any site’s requirements—secure, flexible, and always at your fingertips.

    • Mobile App
  • Binary ClockiOS

    A binary clock that redefines time through logic and minimalism. Its sleek, simple design blends seamlessly into your daily life, adding a modern, intellectual touch to any space.

    • iOS
  • ReactNative StyleSheet Lens

    Track React Native StyleSheet references instantly. Display usage counts via CodeLens to streamline refactoring and keep your styles clean.