Chrome 預設的新分頁雖然達到了預期目的，但缺乏美感和個人化功能。對於希望提升線上體驗的使用者來說，自訂主頁可以顯著提升功能性。
在如今許多現代瀏覽器都不再支援傳統新分頁的時代，我探索了 Chrome 的自訂選項。事實證明，建立一個包含天氣更新、RSS 訂閱和待辦事項清單等元素的客製化主頁是一項簡單卻又有益的嘗試。
為什麼要建立自訂主頁？
擴充功能很有幫助，但個人儀錶板更出色
Chrome 內建的新分頁雖然提供了極簡的體驗，可以存取最近的標籤頁和書籤，但它往往無法滿足用戶尋求全面資訊的需求。對於那些渴望更多功能的用戶來說，僅依賴 Chrome 的功能可能會令人沮喪。
對我來說，新分頁就像一個重要的個人儀錶板，每次啟動瀏覽器時都會顯示重要資訊。雖然許多擴充功能（例如 Tab Widgets、start.me 和 Momentum）可以提供儀錶板功能，但它們通常會限制使用者的自訂。創建一個獨特的主頁，可以讓你完全掌控其內容和外觀，同時提升你的 HTML、CSS 和 JavaScript 技能。
建立您的自訂頁面
改造 Chrome 只需四個文件
您無需複雜的開發工具即可建立自訂主頁。它主要由一個 HTML 檔案、用於設計的 CSS 和用於互動的 JavaScript 組成。首先建立一個包含以下文件的目錄：
- index.html：主頁佈局的主幹。
- style.css：管理頁面的樣式、字體和顏色。
- main.js：介紹互動功能和腳本。
- manifest.json：向 Chrome 說明擴充功能用途的設定檔。
這個項目本質上是一個靜態網頁。 index.html檔案概述了一個佈局，頂部顯示天氣，中間是一個醒目的數字時鐘，底部是勵志名言、RSS 訂閱和任務清單的部分。 manifest.json 檔案至關重要——它允許該頁面透過一行程式碼覆蓋預設的新分頁，從而將此頁面轉換為 Chrome 擴充功能：
"chrome_url_overrides": { "newtab": "index.html"}
為了顯示新德里目前的天氣狀況，我使用了OpenWeather API。此腳本會擷取最新的天氣數據，包括基於當前狀況的溫度和圖示調整，並在每次頁面重新載入時刷新。
const OPENWEATHER_KEY = 'enterAPIkeyhere';fetch(`https://api.openweathermap.org/data/2.5/weather?q=New Delhi&appid=${OPENWEATHER_KEY}&units=metric`).then(res => res.json()).then(data => { document.getElementById('mini-weather').textContent = `${Math.round(data.main.temp)}°`; document.getElementById('mini-location').textContent = data.name; });
此外，我還整合了一個大時鐘，以增強頁面的實用性，因為我經常在新標籤頁上開啟瀏覽器。時鐘使用setInterval()進行更新，以可識別的 AM/PM 格式顯示目前時間，為佈局增添了動態元素。
對於 RSS 來源，我自動新增了 MakeUseOf 來源，同時允許使用者靈活添加更多來源。編寫一個解析 RSS 來源的函數被證明是一個不小的挑戰，但程式設計助手幫助我有效率地編寫了一個提取文章資訊的函數。
const DEFAULT_FEEDS = ['https://www.makeuseof.com/feed/'];fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(DEFAULT_FEEDS[0])}`).then(res => res.json()).then(data => parseRSS(data.contents));
此設定顯示可點擊的標題，並附帶縮圖、作者姓名、摘錄和出版日期。如果因內容或 CORS（跨網域資源共享）問題導致資訊流載入出現問題，則後備代理可確保效能穩定。
最後一個元件是待辦事項列表，利用 Chrome 的同步儲存功能。這表示您的任務在連結到您 Google 帳戶的所有裝置上均可存取。其簡潔性確保任務在瀏覽會話之間持續保存。
const storageSet = async (key, value) => { if (window.chrome?.storage?.sync) { return new Promise(res => chrome.storage.sync.set({ [key]: value }, res)); } localStorage.setItem(key, JSON.stringify(value));};
您可以輕鬆新增任務，這些任務將以清單形式顯示並自動儲存。您也可以選擇清除已完成的任務或在活動任務和已完成任務之間切換。要使用我的結構，請查看官方 GitHub 倉庫以取得完整的程式碼和指南。
增強視覺吸引力
儀錶板的美觀至關重要
雖然功能至關重要，但呈現效果對於愉悅的使用者體驗也至關重要。一個有吸引力的主頁不僅應包含賞心悅目的色彩，還應實現均衡的設計。我選擇利用 Bootstrap 的響應式功能和圖標來創建一個簡潔美觀的視覺介面。
我選擇了暗色系和柔和的色調，以提供舒適的觀看體驗，尤其是在低光源環境下。透過 CSS 引入柔和的垂直漸層和模糊的暈影，為頁面外觀增添了深度和對比。
body { background-image: linear-gradient(180deg, #040607 0%, #071017 100%); color: #eef6f8; overflow: hidden;}.card { border-radius: 1rem; background: rgba(255, 255, 255, 0.1);}
最終呈現的效果是一個流暢、無幹擾的介面，與 Chrome 的原始設計完美融合。在保持熟悉外觀的同時，最大限度地減少過多的資源佔用是關鍵所在。
將自訂主頁新增至 Chrome
實作自訂擴展
編碼完成後，請按照以下步驟將自訂主頁作為擴充功能載入到 Chrome 中：
- 導覽至chrome://extensions並啟動右上角的開發者模式切換。
- 選擇載入解壓縮後的按鈕。
- 找到包含您的主頁文件的資料夾，然後按一下「選擇資料夾」。
就這樣！您的自訂主頁現在將作為 Chrome 擴充功能使用。您對擴充功能資料夾中的檔案所做的任何修改都會在刷新頁面時自動反映在 Chrome 中。
根據程式碼所需的權限，擴充功能可能會在首次啟動時或稍後透過chrome://extensions頁面提示輸入權限。此擴充功能也相容於其他基於 Chromium 的瀏覽器，例如 Edge、Brave、Opera、Vivaldi 等，無需進行任何調整。
刷新瀏覽器的外觀
依照您的喜好客製的主頁
現在，每次我打開新標籤時，都會看到日期、天氣狀況、新聞標題和我正在進行的任務的快速概覽——所有這些都以我個人設計的佈局呈現，沒有任何分散注意力的元素。
創建您自己的自訂 Chrome 主頁比您想像的更容易實現。如果您對 HTML、CSS 和 JavaScript 有基本的了解，那麼這個專案將是您磨練技能並製作實用工具的絕佳方式。即使對於初學者來說，這也是一個堅實的起點。
只需幾行 HTML、CSS 和 JavaScript 程式碼，再加上一點努力，就能輕鬆取代多個繁瑣的擴充程序，最終打造一個完美契合您日常使用的解決方案。考慮到您每天在瀏覽器上花費的時間，多花幾個小時打造獨一無二的瀏覽器絕對是值得的。
發佈留言