这是一个功能丰富的浏览器新标签页扩展,提供了自定义背景、应用快捷方式、天气、待办事项等功能,旨在提升用户的浏览体验和工作效率。 同时也是个chrome插件框架封装,方便开发者快速搭建chrome插件项目,可以删除不需要的功能模块后直接使用。
├── newTab/ # 构建输出目录
│ ├── assets/ # 静态资源
│ ├── src/ # 源代码
│ └── manifest.json # 扩展配置文件
├── public/ # 公共资源
├── src/ # 源代码目录
│ ├── _components/ # 通用组件
│ │ ├── icons/ # 图标组件
│ │ └── Button.vue # 按钮组件
│ ├── _hooks/ # 自定义钩子
│ ├── _stores/ # 状态管理
│ ├── _utils/ # 工具函数
│ ├── assets/ # 静态资源
│ ├── background/ # 后台脚本
│ ├── contentScript/ # 内容脚本
│ │ └── iframe/ # 内嵌框架
│ ├── offscreen/ # 离屏文档
│ ├── overrides/ # 覆盖页面
│ │ ├── assets/ # 覆盖页面资源
│ │ ├── components/ # 覆盖页面组件
│ │ ├── hooks/ # 覆盖页面钩子
│ │ └── views/ # 覆盖页面视图
│ └── popup/ # 弹出页面
├── .gitignore # Git 忽略文件
├── eslint.config.mjs # ESLint 配置
├── manifest.js # 扩展配置
├── package.json # 项目依赖
├── vite.config.js # Vite 配置
└── README.md # 项目说明
- 自定义背景:支持设置自定义背景图片
- 应用快捷方式:添加和管理常用应用的快捷方式
- 天气组件:显示当前天气信息
- 待办事项:管理个人待办任务
- 下班提醒:设置下班时间提醒
- 提供扩展的基本设置和功能入口
- 处理扩展的后台逻辑
- 管理扩展的生命周期
- 在网页中注入脚本
- 提供页面交互功能
- 处理需要在后台运行的脚本
- 避免阻塞主进程
- 前端框架:Vue 3
- 构建工具:Vite
- 样式:Tailwind CSS
- 状态管理:自定义状态管理
- 存储:IndexedDB (通过 useIndexDb 钩子)
- 浏览器扩展 API:使用 Chrome 扩展 API
- 克隆项目到本地
- 安装依赖:
npm install - 构建项目:
npm run build - 在浏览器中打开扩展管理页面
- 启用开发者模式
- 加载已解压的扩展,选择
newTab目录
- 开发模式:
npm run dev - 构建生产版本:
npm run build - 代码格式化:
npm run format - 代码检查:
npm run lint
- 模块化设计:清晰的目录结构和模块化代码组织
- 响应式布局:适配不同屏幕尺寸
- 丰富的功能:集成多种实用功能
- 自定义能力:支持用户个性化配置
- 性能优化:使用离屏文档等技术提升性能
支持 Chrome 90+ 及其他基于 Chromium 的浏览器。
- 点击页面右下角的设置按钮
- 在背景设置选项中选择喜欢的背景图片
- 可以上传本地图片或使用预设背景
- 点击页面上的「添加应用」按钮
- 输入应用名称和 URL
- 选择应用图标
- 点击保存即可添加到主页面
- 首次使用时,系统会请求位置权限
- 允许权限后,天气组件会自动显示当前位置的天气信息
- 可以在设置中手动修改位置
- 点击待办事项卡片上的「添加」按钮
- 输入任务内容和截止时间
- 完成任务后,点击任务前的复选框标记为已完成
- 点击下班提醒卡片上的设置按钮
- 设置下班时间
- 到设定时间后,系统会显示提醒通知
- 在搜索框中输入搜索内容
- 点击搜索框右侧的搜索引擎图标切换搜索引擎
- 按 Enter 键执行搜索
Ctrl + K:聚焦到搜索框Esc:关闭当前打开的对话框Enter:执行搜索或确认操作