【個人發展】我是如何把 Chrome 新標籤頁改成「勇者鬥惡龍 5」的樣子，並打造屬於我自己的終極環境的

⚠️ 注意：關於本文
本擴充功能是以對於現有遊戲作品的愛與尊重所創作的完全個人使用（私的使用）的工具。
為了遵守版權及智慧財產權，不進行擴充功能的發佈或源代碼的公開（GitHub等）。
本文旨在介紹Chrome擴充功能（Manifest V3）的技術實現手法及復古UI表現的技巧分享。

前言

「Chrome的新標籤頁，是不是太毫無生氣了？」

作為工程師，每次打開瀏覽器都需要一個能讓人提振心情的環境。
「我想更沉浸於我最熱愛的RPG世界」「但也想要RSS或日曆等實用功能」……。

為了滿足這樣的任性需求，我自製了屬於自己的「冒險書（Dashboard）」。

結論：生活品質大幅提升。

本文將介紹如何使用Chrome擴充功能（Manifest V3）和原生JS來構建一個再現喜愛遊戲世界觀的儀表板，並分享在技術上的追求（如CSS的顯示器效果及API整合）。

希望能為大家在製作「自己喜歡的主題」儀表板時提供參考。

概念與實現的功能

以「勇者的冒險書」為主題，實現了以下功能。

動態像素畫：利用Canvas和GIF動畫，實現隊伍成員行進的螢幕保護程式功能。
提高沉浸感的UI：通過CSS的掃描線特效，重現類似於舊款顯示器的質感。
實用工具組：
- 酒館信息板: 可以透過RSS API顯示技術文章
- 冒險書: 將Google日曆（iframe）用羊皮紙風格的CSS處理後嵌入
- 傳送門: 顯示書籤樹
隱藏元素: 輸入特定指令可出現「隱藏的Boss」的無用功能

技術棧

不使用框架。原生JS才是最強的裝備。

類別	技術・工具	備註
平台	Chrome擴充功能 (Manifest V3)	使用 `chrome_url_overrides`
語言	原生JS (ES6+)	為了輕量化不使用框架
樣式	CSS3 (變數, Grid)	使用 `DotGothic16` 字體
API	Open-Meteo, RSS2JSON	取得天氣及新聞

實現重點 (代碼與技巧)

由於版權關係無法公開全部代碼，這裡將挑選出可通用的「技術精髓」進行解釋。

1. 使用Manifest V3「重寫新標籤頁」

只需在manifest.json中設置 chrome_url_overrides ，就可以將新標籤頁替換為自製HTML。這是打造個人化入口網站的基本技巧。

{
  "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最前面覆蓋來創造出像在自家安心感的效果。

/* 掃描線特效: 在螢幕上加入淺橫條 */
.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上，任何網站都能瞬間變成復古遊戲風格。

3. 命令面板與「隱藏的Boss」

作為工程師，對鍵盤操作的專注是不可或缺的。
我實現了能讓Cmd + K（Windows則是Ctrl + K）開啟命令面板的功能。

此外，若輸入特定命令（例如：> エスターク），則會觸發用CSS動畫出現隱藏Boss的操作。

// --- 命令面板 (命令搜尋) ---
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') { // 實際上是Boss名稱等
      triggerHiddenBoss();
      return;
    }
    // ... 正常搜尋處理
  }
}

雖然實用性不高，但正因為這是自己專用的工具，才更能全力實現這種遊戲心態。

4. 障礙點：CORS與RSS取得

我想顯示新聞資訊，因此希望能取得RSS資料，但是若直接從JavaScript請求外部的RSS(XML)會產生 CORS (Cross-Origin Resource Sharing) 錯誤。

為了避免這種情況，設計上利用Manifest V3的 background.js（Service Worker）作為代理。

// 在背景中代行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; // 因為是非同步回應，這個是必需的
  }
});