MS-ToDo Hub — 产品介绍

MS-ToDo Hub — 产品介绍

MS-ToDo Hub 产品速览:一页看懂核心功能与亮点,完整的产品说明与技术实现见系列文章。

浏览器插件Microsoft To Do作者:Stars发布:项目:MS-ToDo Hub
MS-ToDo Hub产品速览

MS-ToDo Hub — 产品介绍

新标签,新起点,新世界

将微软待办的强大功能、精美的桌面新标签页、RSS 信息聚合与极致简洁的设计完美结合,让每一次浏览器打开都成为效率与灵感的起点!


一、产品概述

MS-ToDo Hub 是一款基于 Chrome MV3 架构的效率型浏览器扩展,以替代浏览器默认新标签页为入口,集成了 微软待办云端同步、桌面导航首页、RSS 信息聚合、思维导图、数据看板 五大核心模块,辅以天气、时钟、番茄钟、便签、每日一言、节日特效等丰富的桌面小组件,致力于打造一站式的工作与生活效率平台。

  • 当前版本:v5.4.8
  • 支持浏览器:Chrome / Edge / Firefox
  • 支持语言:中文 / English
  • 官网地址:https://mstodo.dpdns.org

二、核心功能模块

2.1 微软待办 — 云端同步任务管理

与 Microsoft To-Do 深度集成,通过 Microsoft Graph API 实现任务的云端双向实时同步,让任务管理跨设备无缝衔接。

核心能力

功能 说明
OAuth 安全登录 通过微软官方 OAuth 2.0 授权,支持国际版与中国版账号切换
双向实时同步 在线时自动与微软待办云端同步,离线时本地照常使用
智能冲突解决 基于时间戳的智能合并机制,数据永不丢失
操作级增量同步 只同步变更内容,省流量更高效
离线无忧使用 基于 IndexedDB(Dexie.js)的本地缓存,网络中断不影响核心功能

任务管理

  • 多级任务体系:支持列表 → 任务 → 子任务三级结构,复杂项目轻松拆解
  • 智能排序筛选:按创建时间、重要性、截止日期、名称排序,支持手动拖拽排序
  • 列表锁定保护:私密列表一键加锁,需通过眼睛图标解锁才能查看内容
  • 任务到期提醒:基于 chrome.alarms 的精准提醒,到期自动推送桌面通知,点击通知可直接跳转到对应任务
  • 全局搜索:支持列表名称、任务标题、子任务标题的全文搜索,搜索结果高亮显示,快捷键 Ctrl/Cmd + F 一键唤起
  • Emoji 图标:为任务自动匹配精美 Emoji 图标,视觉识别更直观
  • 拖拽排序:支持任务与子任务的拖拽排序,操作流畅自然

隐私与安全

  • 敏感数据始终存储在本地
  • 加锁列表保护隐私内容
  • 透明数据流向,完全掌控个人信息
  • 退出登录时清除所有本地缓存数据

2.2 桌面模式 — 精美新标签导航首页

将浏览器新标签页打造为个性化的效率桌面,集网站导航、搜索引擎、实用小组件于一体。

网站导航

  • 标签分组管理:收藏网站按标签分组(如视频、AI、图片等),左侧标签栏一键切换
  • 拖拽排序:支持网站卡片与标签分组的拖拽排序
  • 自定义网站:添加、编辑、删除收藏网站,支持自定义图标(自动获取 / 网络链接 / 本地上传三种模式)
  • 标签快捷选择:编辑网站时可从已有标签快捷选择,也可输入新标签
  • 云端同步:收藏网站数据通过 Microsoft To-Do 的 “Todo-Desktop” 列表实现云端同步,多设备共享

搜索引擎

  • 内置 6 大引擎:Bing、百度、Google、DuckDuckGo、ChatGPT、DeepSeek
  • 自定义引擎:支持添加自定义搜索引擎
  • 引擎快捷切换:搜索框下方横排展示引擎栏,一键切换
  • 引擎管理:支持编辑内置引擎名称与地址、删除不需要的引擎

背景个性化

  • 4 种背景来源:内置精选壁纸(4 张)、必应每日一图、纯色背景、自定义上传图片
  • 背景透明度调节:滑块控制背景不透明度(10%~100%)
  • 图片切换:一键切换下一张背景图

视觉效果

  • 空闲特效:用户空闲一段时间后自动触发沉浸式视觉效果
    • ❄️ 雪花飘落
    • 🌧️ 下雨效果
    • 🌸 樱花飘落
    • ✨ 萤火虫闪烁
  • 空闲触发时间:可自定义空闲等待时间(30 秒 ~ 10 分钟)
  • 毛玻璃效果:UI 组件采用毛玻璃风格,视觉更通透

展示设置

  • 网站图标大小调节(32px ~ 72px)
  • 宫格间距调节(4px ~ 32px)
  • 宫格宽度调节(860px ~ 1600px)
  • 网站名称字体颜色自定义
  • 隐藏/显示网站卡片背景
  • 网站导航栏显示/隐藏

2.3 桌面小组件

🌤️ 天气预报

  • 数据源:通过 Cloudflare Worker 代理访问 Open-Meteo 免费接口,无需 API Key
  • 当前天气:左上角展示天气图标、实时温度、城市名称
  • 悬浮详情面板:
    • 体感温度、相对湿度、风速详情
    • 今天 + 未来 5 天天气预报(逐日:星期 + 图标 + 温度区间)
  • 城市设置:支持城市搜索与浏览器自动定位
  • 智能缓存:1 小时缓存有效期,30 分钟自动刷新,切回前台自动检查数据新鲜度
  • 昼夜区分:天气图标根据白天/夜晚自动切换

🕐 时钟组件

  • 搜索框下方展示实时时间与日期
  • 支持 24H / 12H 格式切换
  • 时钟颜色自定义(支持恢复默认)
  • 每分钟自动刷新

💬 每日一言

  • 100+ 精选语录:涵盖励志、人生、智慧、成长、平静、圣经箴言六大分类
  • 中英双语:界面语言自动跟随,同一条语录提供中英双版本
  • 分类筛选:可选择只看某一分类
  • 字号调节:滑块控制语录字号(12px ~ 20px)
  • 颜色自定义:语录字体颜色可自由设定
  • 每日更新:基于日期种子算法,同一天显示同一条语录

🍅 番茄钟

  • 25 分钟专注计时:全屏沉浸式覆盖层,SVG 圆环进度动画
  • 持久化计时:基于时间戳,刷新页面或打开新标签页自动恢复倒计时
  • 完成提醒:计时结束播放提示音 + 脉冲动画
  • 今日统计:显示今日完成的番茄数量

📝 便签

  • 富文本编辑:支持文字 + 图片的便签编辑
  • 多栏布局:支持单栏、双栏、三栏三种布局切换
  • 新增/删除便签:自由管理多条便签
  • 自动保存:输入防抖 500ms,内容自动持久化到 IndexedDB
  • 图片支持:便签中可插入图片,图片 Blob 与文本分离存储
  • 本地存储:所有便签数据存储在本地,保护隐私

📡 RSS 阅读入口

  • 在桌面模式的“全部”标签页中,RSS 作为工具卡片入口展示
  • 点击即可打开独立的 RSS 阅读器页面

2.4 RSS 信息聚合阅读器

独立的 RSS/Atom 订阅阅读器,三列布局设计,提供沉浸式的阅读体验。

核心功能

功能 说明
订阅管理 添加、编辑、删除 RSS 订阅源,支持自定义标签分组
RSS/Atom 解析 完整支持 RSS 2.0 与 Atom 格式的自动识别与解析
OPML 导入/导出 支持从 OPML 文件批量导入订阅,也可导出为 OPML 备份
云端同步 订阅数据通过 Microsoft To-Do 的 “Todo-RSS” 列表实现云端同步
批量刷新 一键刷新所有订阅源,后台并行抓取,高效快速
三列布局 订阅源列表 → 文章列表 → 文章详情,阅读体验清晰流畅
标签分组 订阅源按标签分组,侧边栏标签导航快速筛选
已读/未读管理 自动标记已读文章,支持一键全部标记已读
收藏功能 重要文章一键收藏,独立收藏视图查看
全文搜索 支持在标题、摘要、正文中搜索关键词
多种排序 按日期降序/升序、标题升序排列
系统默认源 首次使用自动订阅 IT之家、爱范儿、少数派、Solidot 等 10+ 优质科技资讯源

技术特点

  • 通过 Background Service Worker 代理抓取 RSS,绕过 CORS 限制
  • 批量 IPC 消息通信,减少通信开销
  • 文章去重机制,基于内容哈希
  • 自动提取文章封面图
  • 相对时间展示(刚刚、几分钟前、几小时前等)

2.5 思维导图

将任务列表转化为可视化思维导图,帮助梳理复杂项目的逻辑结构。

核心功能

  • 一键切换:待办列表与思维导图视图一键切换
  • 节点层级:支持最多 5 层深度的节点结构
  • 节点操作:
    • Enter 创建同级(兄弟)节点
    • Tab 创建子节点
    • 拖拽空白处平移画布
    • Ctrl/Cmd + 滚轮 缩放画布
  • Markdown 支持:节点内容支持 Markdown 格式
  • 懒加载:首次点击时才加载 ~310KB 模块,不影响首屏性能
  • 基于 MindElixir:使用 MindElixir 开源引擎渲染

2.6 数据看板

基于 ECharts 的数据可视化面板,全方位展示任务统计数据。

看板内容

图表 说明
概览统计 列表数量、任务总数、子任务总数、任务/子任务完成率
完成趋势 近 7 天任务完成趋势折线图(优先使用完成日志精确数据)
状态分布 已完成/进行中任务饼图
列表分布 各列表任务数量柱状图(Top 6)
完成率 各列表完成率对比
操作统计 今日/累计操作明细(列表点击、任务新增/编辑/完成/删除、子任务操作、API 请求等)

技术特点

  • ECharts ~1MB 懒加载,不影响首屏性能
  • 数据来源:IndexedDB 本地缓存 + 完成日志
  • 自动日期变更重置今日统计

三、特色功能

3.1 提醒日期与节日系统

  • 自定义提醒日期:最多添加 10 个重要日期(如生日、纪念日、节假日)
  • 节日自动识别:内置中西方主要节日日历(春节、情人节、圣诞节、元旦等)
  • 烟花特效:在提醒日期当天触发全屏烟花庆祝动画
  • 节日礼物:节日当天显示礼物按钮,点击弹出节日祝福图片 + 触发烟花特效
  • 任务提醒联动:提醒日期与 chrome.alarms 联动,到期自动推送桌面通知

3.2 主题与个性化

  • 深色/浅色主题:一键切换,护眼模式随心用
  • 30+ 颜色主题:丰富的预设配色方案,满足个性化需求
  • 全屏模式:沉浸式全屏体验
  • 主题防闪烁:在 CSS/JS 加载完成前预先应用主题,避免白屏闪烁

3.3 快捷键支持

快捷键 功能
Ctrl/Cmd + F 打开全局搜索
ESC 收起/展开侧边栏、关闭弹窗
Enter 保存/提交、思维导图创建兄弟节点
Shift + Enter 任务编辑换行
Tab 思维导图创建子节点
Ctrl/Cmd + 滚轮 思维导图画布缩放

3.4 多语言支持

  • 完整的中文 / English 双语支持
  • 基于 _locales 目录的标准化 i18n 方案
  • 界面语言一键切换,所有模块文案同步切换
  • 天气组件、每日一言等均支持中英双语

3.5 帮助中心

  • 点击帮助中心按钮,播放小 T 故事视频
  • 视频播放完成后自动展示故事图片
  • 支持点击遮罩或 ESC 键关闭

3.6 打赏支持

  • 支持支付宝、微信支付、PayPal 三种打赏方式
  • 弹窗展示二维码,扫码即可打赏

四、技术架构

4.1 整体架构

MS-ToDo Hub
├── 入口页面
│   ├── main.html          — 待办列表主页面
│   ├── main-desk.html     — 桌面模式独立页面
│   └── main-rss.html      — RSS 阅读器独立页面
│
├── 核心模块 (js/core/)
│   ├── api.js             — Microsoft Graph API 封装(OAuth + Token + CRUD)
│   ├── main-storage.js    — IndexedDB 本地存储(Dexie.js)
│   ├── main-sync.js       — 双向同步 + 冲突解决 + 同步锁
│   ├── main-offline.js    — 离线管理(本地 CRUD + 同步触发)
│   └── main-i18n.js       — 国际化翻译
│
├── 功能模块 (js/functions/)
│   ├── desktop/           — 桌面模式(导航、天气、时钟、番茄钟、便签、特效等)
│   ├── rss/               — RSS 阅读(数据层、云端同步、UI 渲染、检测)
│   ├── search/            — 全局搜索(搜索逻辑 + UI)
│   ├── dashboard/         — 数据看板(统计 + 图表)
│   └── ...                — 提醒日期、烟花效果、节日礼物、快捷键、帮助中心
│
├── 支撑模块 (js/support/)
│   ├── background.js      — Service Worker(闹钟通知、RSS 代理、OAuth)
│   ├── theme-loader.js    — 主题预加载(防闪烁)
│   ├── alarms.js          — 任务到期提醒调度
│   └── desktop-*.js       — 桌面模式支撑脚本
│
└── 第三方库 (js/plugins/)
    ├── jquery.min.js      — DOM 操作与事件委托
    ├── dexie.min.js       — IndexedDB 封装
    ├── echarts.min.js     — 数据可视化图表
    ├── MindElixir.iife.*  — 思维导图引擎
    ├── fontawesome.js     — 图标库
    └── emoji-*.js         — Emoji 选择器

4.2 数据存储方案

存储方式 用途
IndexedDB(Dexie.js) 列表、任务、子任务缓存,同步队列,完成日志,便签数据,自定义背景图
localStorage 用户设置(主题、语言、排序、桌面配置等),提醒日期,网站收藏(未登录时)
chrome.storage.local RSS 文章缓存、已读/收藏状态,用户操作统计,RSS 检测开关
Microsoft To-Do 云端 登录用户的完整数据同步(待办列表、桌面网站、RSS 订阅)

4.3 性能优化

  • 懒加载:思维导图(~310KB)与数据看板 ECharts(~1MB)按需加载
  • 防抖机制:网站变更 500ms 防抖合并后同步,避免频繁 API 调用
  • 批量操作:RSS 批量抓取(单次 IPC 消息)、批量统计记录
  • 缓存策略:天气数据 1 小时缓存,Bing 背景图按日缓存
  • 增量同步:桌面网站变更采用增量同步策略(添加/删除/更新),减少 API 调用
  • 字体预加载:<link rel="preload"> 确保首帧渲染前字体就绪,消除字抖动
  • CSP 兼容:全面适配 MV3 CSP 策略,无内联脚本,所有预加载逻辑使用外部文件

五、权限说明

权限 用途
identity Microsoft OAuth 登录授权
storage 本地数据缓存与设置存储
alarms 任务到期提醒闹钟调度
notifications 任务到期桌面通知推送

六、适用场景

场景 说明
个人任务管理 日常待办、购物清单、学习计划,云端同步多设备无缝切换
效率桌面 替代浏览器默认新标签页,集合导航、搜索、天气、时钟于一体
信息聚合 RSS 订阅感兴趣的科技、资讯、博客源,一站式阅读
专注工作 番茄钟 25 分钟专注计时,便签随手记录灵感
项目梳理 思维导图可视化拆解复杂项目结构
数据洞察 数据看板直观了解任务完成趋势与效率统计
隐私保护 列表加锁、离线使用,敏感数据安全自主掌控

七、产品亮点总结

  1. 一站式效率平台:待办管理 + 桌面导航 + RSS 阅读 + 思维导图 + 数据看板,五大模块深度整合
  2. 云端同步:基于 Microsoft Graph API 的双向实时同步,支持离线使用
  3. 精美桌面:丰富的背景、特效、小组件,让每次打开新标签页都是享受
  4. 信息聚合:RSS 阅读器 + 天气预报 + 每日一言,一个页面掌握全局
  5. 隐私优先:本地存储 + 列表加锁 + 透明数据流向
  6. 极致性能:懒加载 + 防抖 + 批量操作 + 增量同步,流畅不卡顿
  7. 中英双语:完整的国际化支持,全球用户友好
  8. 免费使用:核心功能完全免费,无广告干扰

免费使用 · 隐私安全 · 极致体验

每一次打开新标签页,都是一段全新旅程的起点。

关于作者

Stars · 独立开发者

专注于浏览器扩展、AI 编程、Web 开发与 3D / 游戏开发。

正在开发:MS-ToDo Hub ·极速狂飙

关于作者 →