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 代码，再加上一点努力，就能轻松取代多个繁琐的扩展程序，最终打造一个完美契合您日常使用的解决方案。考虑到您每天在浏览器上花费的时间，多花几个小时打造一个独一无二的浏览器绝对是值得的。
发表回复