Skip to content

fuwenjiang1997/new-tab

Repository files navigation

新标签页浏览器扩展

项目简介

这是一个功能丰富的浏览器新标签页扩展,提供了自定义背景、应用快捷方式、天气、待办事项等功能,旨在提升用户的浏览体验和工作效率。 同时也是个chrome插件框架封装,方便开发者快速搭建chrome插件项目,可以删除不需要的功能模块后直接使用。

new Tab 演示效果

演示效果 6 演示效果 7 演示效果 8 演示效果 9

演示效果 1 演示效果 2 演示效果 3 演示效果 4 演示效果 5

目录结构

├── 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           # 项目说明

主要功能模块

1. 覆盖页面 (overrides)

  • 自定义背景:支持设置自定义背景图片
  • 应用快捷方式:添加和管理常用应用的快捷方式
  • 天气组件:显示当前天气信息
  • 待办事项:管理个人待办任务
  • 下班提醒:设置下班时间提醒

2. 弹出页面 (popup)

  • 提供扩展的基本设置和功能入口

3. 后台脚本 (background)

  • 处理扩展的后台逻辑
  • 管理扩展的生命周期

4. 内容脚本 (contentScript)

  • 在网页中注入脚本
  • 提供页面交互功能

5. 离屏文档 (offscreen)

  • 处理需要在后台运行的脚本
  • 避免阻塞主进程

技术栈

  • 前端框架:Vue 3
  • 构建工具:Vite
  • 样式:Tailwind CSS
  • 状态管理:自定义状态管理
  • 存储:IndexedDB (通过 useIndexDb 钩子)
  • 浏览器扩展 API:使用 Chrome 扩展 API

安装说明

  1. 克隆项目到本地
  2. 安装依赖:npm install
  3. 构建项目:npm run build
  4. 在浏览器中打开扩展管理页面
  5. 启用开发者模式
  6. 加载已解压的扩展,选择 newTab 目录

开发说明

  • 开发模式:npm run dev
  • 构建生产版本:npm run build
  • 代码格式化:npm run format
  • 代码检查:npm run lint

项目特点

  • 模块化设计:清晰的目录结构和模块化代码组织
  • 响应式布局:适配不同屏幕尺寸
  • 丰富的功能:集成多种实用功能
  • 自定义能力:支持用户个性化配置
  • 性能优化:使用离屏文档等技术提升性能

浏览器兼容性

支持 Chrome 90+ 及其他基于 Chromium 的浏览器。

使用说明

1. 自定义背景

  1. 点击页面右下角的设置按钮
  2. 在背景设置选项中选择喜欢的背景图片
  3. 可以上传本地图片或使用预设背景

2. 应用快捷方式

  1. 点击页面上的「添加应用」按钮
  2. 输入应用名称和 URL
  3. 选择应用图标
  4. 点击保存即可添加到主页面

3. 天气组件

  1. 首次使用时,系统会请求位置权限
  2. 允许权限后,天气组件会自动显示当前位置的天气信息
  3. 可以在设置中手动修改位置

4. 待办事项

  1. 点击待办事项卡片上的「添加」按钮
  2. 输入任务内容和截止时间
  3. 完成任务后,点击任务前的复选框标记为已完成

5. 下班提醒

  1. 点击下班提醒卡片上的设置按钮
  2. 设置下班时间
  3. 到设定时间后,系统会显示提醒通知

6. 快捷搜索

  1. 在搜索框中输入搜索内容
  2. 点击搜索框右侧的搜索引擎图标切换搜索引擎
  3. 按 Enter 键执行搜索

快捷键

  • Ctrl + K:聚焦到搜索框
  • Esc:关闭当前打开的对话框
  • Enter:执行搜索或确认操作

About

基于 Vue3+Vite 开发的 Chrome 新标签页扩展,同时也是一套可直接复用的 Chrome 插件开发框架

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors