前段时间我写过《别再无脑装插件了，你的浏览器可能在偷家》juejin.cn/post/755347... ，提醒大家：浏览器插件的权限远比想象大。
结果没过多久，就看到有些标签页插件被曝偷偷上传数据的新闻。
女朋友问我："那我们还敢装吗？
我说："别慌，要不我们自己做一个？
实话讲，浏览器扩展不是小玩具。它能读写你的本地存储、拦截网络请求、看你的标签页和历史，甚至通过特权接口拿到一些你以为安全的东西；一旦失守，隐私就是敞开的大门。与其盲装、把钥匙交给别人，不如把门锁装回自己手里，做一个干净透明的浏览器标签页，知根知底。
做一个新标签页其实不难：一份 manifest，几行 HTML/CSS，再加一丢丢 JS，就能把主页改成你喜欢的样子。权限只留必要的、能不发网请求就不发、数据都放在本地；代码简单到你一眼能审、每一步都看得懂。
如果你读过那篇"别再无脑装插件"的提醒，这就是它的行动版。而且写标签页这事跟写网站页面没啥区别：本质就是"一个普通网页 + 一份清单"。
这篇文章用不到100行代码，带你做一个干净透明的新标签页，做完你会发现：新标签页并不复杂，更不必神秘------最重要的是，你清楚每一行代码在做什么，安心又可控。
先看效果
项目结构
bash
newtab
├── icons # 插件的"图标"
├── index.html # 标签页页面
├── manifest.json # 插件身份证
├── newtab.js # 标签页页面脚本
└── style.css # 标签页页面样式快速开始
从github仓库拉代码，本地安装
5分钟搞定安装：下载仓库代码 → 加载扩展 → 开始使用！
🚀 浏览项目的完整代码可以点击这里 github.com/Teernage/ne...，如果对你有帮助欢迎Star。
一步步来
创建文件夹 newtab
创建manifest.json文件
这个文件是插件的身份证，告诉浏览器你的插件是谁、能干啥。
json
{
"manifest_version": 3,
"name": "极简新标签页",
"version": "1.0.0",
"icons": {
"16": "icons/16.png",
"32": "icons/32.png",
"48": "icons/48.png",
"128": "icons/128.png"
},
"chrome_url_overrides": {
"newtab": "index.html"
}
} 关键点解读：
| 字段 | 说明 |
|---|---|
| manifest_version: 3 | 使用最新的 Manifest V3 扩展规范 |
| name | 插件名称 |
| version | 插件版本号 |
| icons | 图标集 |
| chrome_url_overrides | 覆盖新标签页入口 |
最关键的是 chrome_url_overrides ：它会把 Chrome 的内置页面（最常见是 chrome://newtab ）换成你插件包里的 HTML 页面。只需在manifest文件中把 newtab 指向 index.html ，用户每次打开新标签页看到的就是你的 index.html 内容，这就是插件自定义新标签页的核心原理。
创建index.html文件
index.html就是你要自定义的标签页
🔗 文件源码链接：
创建manifest.json文件
🔗 文件源码链接：
newtab.js文件
作用：时间更新、搜索行为、图标数据驱动渲染
🔗 文件源码链接：
style.css文件
作用：标签页的样式
🔗 文件源码链接：
创建文件夹 icons，文件夹中的图标在下面的仓库中下载
作用：扩展展示用图标集
🔗 源码链接：
一键安装
- 打开Chrome浏览器
- 地址栏输入：
chrome://extensions/ - 打开右上角"开发者模式"
- 点击"加载已解压的扩展程序"
- 选择newtab文件夹
- 搞定！扩展安装完成！
操作演示图:
以上只是一个入门级的新标签页demo，你可以按喜好继续扩展成自己的版本。如果觉得纯原生 JS 在维护性上不够友好，推荐使用我的Vue 的插件脚手架：juejin.cn/post/754380... ：内置基于 Vue 的新标签页模板、侧边栏模板、Popup 弹窗模板等，用 Vue 开发更顺手、代码组织更清晰。若想实现类似 Infinity 新标签页的图标列表拖拽效果，也可以参考我的拖拽指令一个Vue自定义指令搞定丝滑拖拽列表，告别复杂组件封装 juejin.cn/post/751133...
总结
- 核心原理：用一份 manifest.json 把 chrome://newtab 指向你的 index.html ，本质就是"一个普通网页 + 一份清单"，不需要额外权限即可接管新标签页。
- 目录职责清晰： manifest.json 负责接管入口， index.html 提供骨架， style.css 管视觉， newtab.js 管交互与数据， icons/ 放扩展图标。
- 安全与隐私：尽量使用本地资源、最小权限、不做不必要的网络请求；每一行代码看得懂、改得动，才能放心使用。
- 可扩展建议：如果需要更强的可维护性与组件化，使用基于 Vue 的插件脚手架；若要实现类似 Infinity 的图标拖拽，参考拖拽指令即可快速增强交互。
如果觉得对您有帮助，欢迎点赞 👍 收藏 ⭐ 关注 🔔 支持一下！
往期实战推荐：