做一个浏览器新标签页：自定义导航

为什么自己做新标签页

每次打开浏览器新标签页，看到的是什么？Chrome显示最近访问的网站缩略图，Edge推一堆新闻。但你真正想看到的可能是：你最常用的几个网站，一个搜索框，也许再加上时间和天气。

今天我们做一个极简的个人导航页，打开浏览器就能看到。

设计思路

我们的新标签页包含：

当前时间（大字显示）

一个搜索框

常用网站快捷方式（图标+名字）

好看的背景

第一步：创建HTML

渐变背景加上大字时钟，一打开就很有高级感。

第二步：实现时钟

function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, "0");
var minutes = now.getMinutes().toString().padStart(2, "0");
document.getElementById("clock").textContent =
hours + ":" + minutes;

var options = {
year: "numeric", month: "long",
day: "numeric", weekday: "long"
};
document.getElementById("date").textContent =
now.toLocaleDateString("zh-CN", options);
}
updateClock();
setInterval(updateClock, 1000);

setInterval 每秒钟执行一次，这样时钟就会实时更新。padStart(2, "0") 保证个位数前面补零，比如 9 显示为 09。

第三步：配置常用网站

var sites = [
{ name: "微博", url: "https://weibo.com", icon: "W" },
{ name: "知乎", url: "https://zhihu.com", icon: "Z" },
{ name: "B站", url: "https://bilibili.com", icon: "B" },
{ name: "GitHub", url: "https://github.com", icon: "G" },
{ name: "掘金", url: "https://juejin.cn", icon: "J" },
{ name: "邮箱", url: "https://mail.qq.com", icon: "M" }
];

var linksHtml = "";
for (var i = 0; i < sites.length; i++) {
linksHtml += "";
linksHtml += "

";
linksHtml += "

" + sites[i].name + "

";
linksHtml += "";
}
document.getElementById("links").innerHTML = linksHtml;

修改sites数组就能自定义你的常用网站，想加多少加多少。

第四步：实现搜索功能

function handleSearch(event) {
if (event.key === "Enter") {
var query = document.getElementById("search").value;
if (query) {
window.location.href =
"https://www.google.com/search?q=" +
encodeURIComponent(query);
}
}
}

按回车就跳转到搜索引擎。你可以把Google换成百度或其他搜索引擎。

怎么设为浏览器新标签页

最简单的方法：安装一个叫 Custom New Tab URL 的Chrome插件，把你的HTML文件地址填进去。或者把这个页面部署到网上，用插件指向那个网址。

这样每次打开新标签页，看到的就是你自己设计的导航页了。极简、好用、独一无二。