从零打造极简浏览器起始页：Quick Dial 开发实战
本文记录了我使用 Svelte 5 + TypeScript + Vite 6 开发一个极简浏览器新标签页扩展的完整过程。
为什么自己造轮子？
每次打开 Chrome 新标签页，映入眼帘的是：
- 广告横幅：某购物节大促
- 推荐文章：标题党新闻
- 搜索框：输入内容被追踪记录
作为一名开发者，我想要的是：
- 干净的界面
- 快捷的导航
- 实用的信息（天气、日历）
- 我的数据我做主
于是，Quick Dial（极速导航）诞生了。
技术选型
Svelte 5 - 编译时框架，零运行时，新 runes 响应式系统优雅且高效
TypeScript - 类型安全，重构有底气
Vite 6 - 开发体验极佳，HMR 秒级响应
LocalStorage - 数据本地化，隐私优先
Manifest V3 - Chrome 扩展最新标准
打包体积：~135KB（gzip ~45KB），零外部运行时依赖。
核心功能实现
1. 多引擎搜索
支持 12 种搜索引擎，包括 Google、百度、Bing、知乎、Bilibili、GitHub 等，可一键切换。Ctrl + K 快捷键全局聚焦，搜索体验丝滑。
2. 快捷导航卡片
支持拖拽排序、分组管理、自动获取网站图标。使用自建 Favicon API 服务，粘贴网址自动识别。
3. 天气与农历组件
天气组件：调用 api.ruseo.cn 接口，自动根据 IP 定位，显示实时天气和 3 天预报。
农历组件：显示农历日期、干支年份、生肖、节气、节日，点击展开还能看到今日宜忌和财神方位。
4. 6 种时钟样式
Digital - 经典数字时钟，秒数跳动
Minimal - 极简风格，只显示时:分
Classic - 12 小时制 + AM/PM + 进度条
Flip - 翻页时钟，复古感
Neon - 霓虹灯效果，赛博朋克风
Binary - 二进制时钟，极客最爱
5. 壁纸系统
12 种预设渐变壁纸 + 自定义上传 + 随机壁纸 API。根据壁纸亮度自动切换深/浅色文字，保证可读性。
6. 数据导入导出
一键备份所有配置，支持导入浏览器书签（按文件夹自动分组）。
项目亮点
Svelte 5 Runes 响应式：全新 runes 响应式系统，让状态管理更加显式和可控
本地存储分片：智能分片存储，避免 LocalStorage 超出 5MB 限制
无障碍支持：所有弹窗支持 Escape 关闭，交互元素添加 aria-label
遇到的坑
1. Manifest V3 不支持 background script：需使用 Service Worker
2. Font Awesome 图标加载：从 emoji 改用 Font Awesome CDN
3. 天气 API 数据嵌套：API 返回两层 data，需解析 result.data.data
性能优化
1. 图片懒加载：导航卡片图标使用 loading=lazy
2. API 缓存：天气 30 分钟、农历 24 小时本地缓存
3. 防抖保存：数据变更后 300ms 防抖写入 LocalStorage
4. CSS Variables：主题切换无需重绘，直接修改变量
开源地址
Gitee：https://gitee.com/corbancc/quick-dial
安装方式
git clone https://gitee.com/corbancc/quick-dial.git cd quick-dial npm install npm run dev npm run build
安装为 Chrome 扩展：
1. 打开 chrome://extensions/
2. 开启开发者模式
3. 点击加载已解压的扩展程序
4. 选择 dist/ 目录
总结
这个项目从零开始，历时一周，最终实现了一个功能完整、体验流畅的浏览器起始页。过程中深入学习了 Svelte 5 新特性、Chrome 扩展开发、TypeScript 类型系统、响应式设计和无障碍。
最大的收获：做产品要从用户角度思考，每个细节都要打磨。比如农历组件，不只是显示日期，还要考虑节气、节日、宜忌，让信息更有价值。
如果你也受够了广告轰炸的新标签页，欢迎体验 Quick Dial！