2020 年，我刚接触浏览器扩展，安装的第一个扩展是青柠起始页。那时每次打开新标签页，看到精美的界面和流畅的交互，都会感叹：这也太好看了吧。
五年后，我决定用自己的方式，向那份初心致敬。
缘起
2020 年的某个下午，作为一个刚入门的开发者，我第一次打开了青柠起始页。
那种感觉至今难忘——简洁却不简单，优雅且功能齐全。
时钟在屏幕中央跳动，搜索框静静等待，壁纸在背后若隐若现。没有花里胡哨的广告，没有乱七八糟的推荐，就是一个纯粹的起始页。
五年过去了，青柠起始页依然在更新，而我也从一个小白成长为能独立开发项目的开发者。
是时候用自己的方式，做一个属于自己的起始页了。
获取小鱼起始页
📦 快速下载
| 浏览器 | 下载链接 |
|---|---|
| Chrome / Edge | xiaoyu-newtab-chrome-v1.0.0.zip |
| Firefox | xiaoyu-newtab-firefox-v1.0.0.zip |
下载后解压，按照下方「安装使用」部分的说明加载到浏览器即可。
功能一览
核心特性
功能详解
🕐 实时时钟
时钟是起始页的灵魂。小鱼起始页提供了高度自定义的时钟组件：
| 设置项 | 选项 |
|---|---|
| 时间格式 | 24 小时制 / 12 小时制 |
| 秒数显示 | 开启 / 关闭 |
| 分隔符闪烁 | 开启 / 关闭 |
| 字体粗细 | 正常 / 中等 / 半粗 / 粗体 |
点击时间可以在搜索视图和应用网格视图之间切换，右键也能实现同样的效果。
🔍 多搜索引擎支持
内置 5 大主流搜索引擎，按 Tab 键即可快速切换：
- Google - 国际搜索首选
- Bing - 微软搜索引擎
- 百度 - 中文搜索利器
- DuckDuckGo - 隐私保护搜索
- GitHub - 代码搜索神器
聚焦搜索框时，底部会显示随机古诗词 一言，为你的搜索增添一份诗意。
🖼️ 壁纸系统
这是我最用心打磨的功能，提供了多种壁纸来源：
预设壁纸
- 15 张精选静态壁纸
- 3 套动态视频壁纸（默认启用）
在线壁纸
- Bing 每日壁纸（自动缓存，支持下载原图）
- 自定义 URL 链接
本地壁纸
- 支持上传多张图片
- 支持上传视频文件
- 每次打开随机显示
壁纸还支持 模糊效果 和 暗角滤镜。
📱 应用快捷方式
类似 iOS 的应用网格设计：
- 拖拽排序 - 长按拖动调整位置
- 自定义图标 - 支持 Iconify 图标库、图片 URL、文字图标
- 颜色自定义 - 背景色和图标色独立设置
- Dock 栏 - 常用应用固定在底部
内置 10 个默认应用，包括应用商店、翻译、豆瓣、图库、ProductHunt、GitHub、哔哩哔哩、日历、邮箱和主题切换。
技术架构
技术选型理由
| 技术 | 选择原因 |
|---|---|
| Vue 3 | Composition API 更灵活，响应式系统更高效 |
| TypeScript | 类型安全，IDE 提示更友好 |
| Vite | 开发体验极佳，HMR 秒级刷新 |
| Pinia | 比 Vuex 更简洁，完美支持 TypeScript |
| TailwindCSS | 原子化 CSS，快速构建响应式界面 |
| vite-plugin-web-extension | 一套代码，多浏览器适配 |
核心组件设计
使用体验
视图切换
小鱼起始页有两个主要视图：
性能优化
为了保证流畅的使用体验，我做了这些优化：
安装使用
从源码构建
bash
安装到浏览器
Chrome / Edge 安装
- 打开
chrome://extensions/(Chrome) 或edge://extensions/(Edge) - 启用「开发者模式」
- 点击「加载已解压的扩展程序」
- 选择
dist/chrome目录
Firefox 安装
- 打开
about:debugging#/runtime/this-firefox - 点击「临时载入附加组件」
- 选择
dist/firefox/manifest.json
多语言支持
小鱼起始页支持 4 种语言：
| 语言 | 代码 | 完成度 |
|---|---|---|
| 简体中文 | zh-CN | 100% |
| 繁体中文 | zh-TW | 100% |
| English | en | 100% |
语言设置跟随系统，也可在设置中手动切换。
开发时间线
致谢
首先要感谢 青柠起始页，是它让我知道了浏览器起始页可以如此优雅。功能和 UI 设计都参考了青柠起始页，在此基础上融入了自己的理解和优化。
其次要感谢以下开源项目：
写在最后
「人生若只如初见，何事秋风悲画扇。」
五年前的那个下午，我第一次打开青柠起始页时的惊艳，至今记忆犹新。
现在，小鱼起始页也许还很稚嫩，但它承载了我对「简洁」和「优雅」的理解。
每次打开新标签页，看到熟悉的时钟和搜索框，就像回到了五年前那个充满好奇心的下午。
这就是我做这个项目的意义——致敬初心，不忘来路。
相关链接
