【個人開発】Chromeの新規タブを「ドラクエ5」風に改造して、自分専用の最強環境を作った話

⚠️ 注意：本記事について
この拡張機能は、既存のゲーム作品への愛とリスペクトを込めて作成した完全な個人利用（私的使用） のためのツールです。
著作権および知的財産権を遵守するため、拡張機能の配布やソースコードの公開（GitHub等）は行いません。
本記事では、Chrome拡張機能（Manifest V3）の技術的な実装手法と、レトロなUI表現のノウハウ共有を目的としています。

はじめに

「Chromeの新規タブ、無機質すぎませんか？」

エンジニアたるもの、ブラウザを開くたびにテンションが上がる環境が必要です。
「もっと大好きなRPGの世界に浸りたい」「でもRSSとかカレンダーとか実用性も欲しい」……。

そんなワガママな欲求を叶えるため、自分専用の「冒険の書（Dashboard）」 を自作しました。

結論：QOLが爆上がりしました。

この記事では、Chrome拡張機能（Manifest V3） と Vanilla JS を使って、推しのゲームの世界観を再現したダッシュボードを構築する際の技術的なこだわり（CSSでのブラウン管表現やAPI連携） を紹介します。

皆さんが「自分の好きなテーマ」でダッシュボードを作る際の参考になれば幸いです。

コンセプト・実装した機能

「勇者のための冒険の書」をテーマに、以下の機能を実装しました。

1. 動くドット絵：CanvasとGIFアニメを活用し、パーティーメンバーが行進するスクリーンセーバー機能。
2. 没入感を高めるUI：CSSによる走査線エフェクトで、ブラウン管テレビのような質感を再現。
3. 実用的なツール群：
   • 酒場の情報板: RSS API叩いて技術記事を表示
   • 冒険の書: Googleカレンダー（iframe）を羊皮紙風にCSS加工して埋め込み
   • ルーラ: ブックマークツリーの表示
4. 隠し要素: 特定のコマンド入力で「あの隠しボス」が出現する無駄機能

技術スタック

フレームワークは使いません。Vanilla JS こそが最強の装備です。

カテゴリ	技術・ツール	備考
プラットフォーム	Chrome Extension (Manifest V3)	chrome_url_overrides を使用
言語	Vanilla JS (ES6+)	軽量化のためFWなし
スタイル	CSS3 (Variables, Grid)	DotGothic16 フォント活用
API	Open-Meteo, RSS2JSON	天気、ニュース取得

実装のポイント (Code & Tips)

著作権の関係で全コードは公開できませんが、汎用的に使える「技術的なエッセンス」を抜粋して解説します。

1. Manifest V3で「新規タブ」を乗っ取る

manifest.json で chrome_url_overrides を設定するだけで、新規タブを自作HTMLに置き換えられます。これは自分好みのポータルサイトを作るための基本テクニックです。

manifest.json

{
  "manifest_version": 3,
  "name": "My RPG Dashboard",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "bookmarks",
    "storage",
    "geolocation"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

2. CSSで「あの頃のブラウン管」を再現する

ここが今回の一番のこだわりです。
ただ画像を貼るだけでは足りません。「走査線（Scanline）」 と 「画面の四隅の暗さ（Vignette）」 をCSSで最前面にオーバーレイさせることで、実家のような安心感を演出しています。

styles.css

/* 走査線エフェクト: 画面全体に薄い横縞を入れる */
.crt-lines {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  z-index: 8000;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px; /* 4px間隔で描画 */
  pointer-events: none; /* クリックを邪魔しない */
  opacity: 0.4;
}

/* 画面端を暗くして没入感を出す */
.crt-vignette {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  z-index: 8001;
  background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

このCSSクラスを適用した div を画面全体に被せるだけで、どんなWebサイトも一瞬でレトロゲーム風になります。

3. コマンドパレットと「隠しボス」

エンジニアならキーボード操作へのこだわりも捨てられません。
Cmd + K (Windowsなら Ctrl + K) でコマンドパレットが開くように実装しました。

さらに、特定のコマンド（例：> エスターク）を入力すると、CSSアニメーションで隠しボスが出現する処理を仕込んでいます。

script.js

// --- Command Palette (コマンド検索) ---
function initCommandPalette() {
  document.addEventListener('keydown', e => {
    // Cmd + K で起動
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { 
      e.preventDefault(); 
      openPalette(); 
    }
  });

  function renderResults(query) {
    const q = query.toLowerCase();
    
    // ⚠️ 特定の文字列で隠しイベント発火
    if (q === '> secret_boss') { // 実際はボス名など
      triggerHiddenBoss();
      return;
    }
    // ... 通常の検索処理
  }
}

実用性ゼロですが、自分しか使わないツールだからこそ、こういう遊び心を全力で実装できます。

4. ハマりポイント：CORSとRSS取得

ニュースフィードを表示するためにRSSを取得したかったのですが、JavaScriptから直接外部のRSS(XML)を叩くと CORS (Cross-Origin Resource Sharing) エラー が発生します。

これを回避するため、Manifest V3の background.js (Service Worker) をプロキシとして利用する設計にしました。

background.js

// バックグラウンド側でFetchを代行する
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchFeed') {
    fetch(request.url)
      .then(response => response.text())
      .then(text => {
        sendResponse({ success: true, data: text });
      })
      .return = true; // 非同期レスポンスのために必須
  }
});

結果・成果

こうして完成したダッシュボードのおかげで、新規タブを開くたびに「冒険の書」を開いている感覚になれました。
「ビアンカかフローラか」論争も、日替わりで画像を切り替えることで解決（？）しています。

なにより、「欲しい機能を自分で作る」 というエンジニアの原点的な楽しさを再確認できました。

まとめ

今回は Chrome Extension (Manifest V3) で、完全に趣味全開のダッシュボードを作りました。

• 技術の学び: Service Worker間通信、Canvas描画、レトロCSSの実装。
• 私的使用の範囲で楽しむ: 著作権のある素材を使う場合、絶対に配布せず、ローカル環境だけで楽しむのが鉄則です。

皆さんも、好きなアニメやゲームをモチーフに、自分だけの最強ダッシュボード（配布不可） を作ってみてはいかがでしょうか？

---

最後まで読んでいただきありがとうございます！
「技術の無駄遣い（褒め言葉）」「参考になった」と思ったら、ぜひ LGTM 🚀 をお願いします！