Chromeの"新しいタブページ"でVimiumが動かないので、Next.jsで代替サイトを作り、Github Pagesにデプロイした

背景

Vimiumという偉大な拡張機能があるけど、Chromeの新しいタブページでは、これが動かない。
これにストレスを感じている者も多いのではないかな。
ここにあるように、vimiumのNew tab URLにpages/blank.htmlを設定することで、Chrome標準の新しいタブページではなく、空白のページを開くことで、vimiumの機能だけは維持できるという解決策がある。
でもやっぱり、それだと味気ないので、必要十分の機能を持った、新しいタブページ用の静的サイトを作ることにした。
作ったものはこちら↓
https://github.com/UUGTech/NewTab
実際のサイトはこちら↓
https://uugtech.github.io/NewTab/
カラーテーマや背景画像はCatppuccinという素晴らしいテーマを使用させていただいた
https://github.com/catppuccin/catppuccin

Next.jsによる静的サイトの作成

詳しい作り方は各情報をあたってほしいけれど、create-next-appを用いてテンプレートを作り、最低限の機能を作成した。
具体的には

• デジタル時計(あった方が雰囲気がいい)
• Google検索バー(Chrome標準の新しいタブページにもある)
• 主要サイトへのブックマーク(とありあえずGitHub, YouTube, Amazon, Twitter)

GitHub Pagesへのデプロイ

GitHub Pagesへのデプロイは専らこちらのサイトを参考にした。
特に画像のパスの通し方について、とても参考になった。
GitHub Pagesへデプロイすると、URLがトップから始まらない関係で、画像へのパスが通らないことがある。それを、環境変数によって画像のURLを変えることで解決している。

各種設定を整えて快適なvimium生活へ

代用サイトが出来上がったら、以下の設定を整えることで快適なVimium生活を送ることができる。

• vimiumのNew tab URLをデプロイした静的サイトのURLに設定する
  • これによってtで開かれるページが作成したページになる
• Chromeの起動時に開くページをデプロイしたサイトのURLに設定する
  • これは、設定>起動時>特定のページまたはページセットを開くにURLを設定する

まとめ

これで、Chrome起動時・vimiumで新しいタブを作成した時に、Vimiumの機能を失うことなく、快適なVimium生活を送ることが出来る。