MS-ToDo Hub 产品说明书

版本：5.5.1
发布日期：2026年9月
Slogan：新标签，新起点，新世界 / New Tab, New Start, New World

产品概述
目标用户与使用场景
产品定位与核心价值
功能架构总览
功能模块详细说明
- 5.1 智能任务管理（待办模式）
- 5.2 桌面新标签页（桌面模式）
- 5.3 RSS 信息聚合阅读
- 5.4 思维导图
- 5.5 数据看板
- 5.6 个性化定制系统
- 5.7 辅助功能
技术架构
数据存储架构
多浏览器适配
后端服务架构
权限与安全
性能优化策略
隐私保护
发布渠道与运营

1. 产品概述

MS-ToDo Hub 是一款基于 Chrome Extension Manifest V3（MV3）标准的浏览器扩展，以浏览器新标签页为入口，将 Microsoft To-Do 任务管理、桌面新标签页、RSS 信息聚合阅读、思维导图 与 数据看板 五大核心能力深度融合，打造一站式个人效率工作台。

产品核心理念：每一次浏览器打开，都是效率与灵感的起点。

1.1 产品形态

属性	说明
产品类型	浏览器扩展（Chrome Extension）
技术标准	Manifest V3（MV3）
入口方式	覆盖浏览器新标签页（chrome_url_overrides.newtab）
版本	5.5.1
支持浏览器	Chrome / Edge / Firefox
前端框架	原生 JavaScript + jQuery
后端服务	Cloudflare Worker（api.mstodo.dpdns.org）

1.2 产品页面结构

产品由四个独立页面组成，各页面职责分明：

页面	文件	职责
待办模式主页	`main.html`	任务管理主界面，新标签页默认入口
桌面模式	`main-desk.html`	桌面新标签页，收藏网站导航 + 小组件
RSS 阅读器	`main-rss.html`	独立三列布局 RSS 信息聚合阅读
便签页面	`main-desk-notes.html`	独立富文本便签编辑器

2. 目标用户与使用场景

2.1 目标用户画像

用户类型	特征描述
效率爱好者	追求工作与学习的高效管理，习惯使用待办清单规划日程
信息重度消费者	每日浏览大量资讯，需要聚合阅读工具节省时间
Microsoft 生态用户	已使用 Microsoft To-Do 管理任务，希望获得更优质的交互界面
个性化追求者	喜欢自定义浏览器界面，追求视觉美感与个性化体验
知识工作者	需要将任务可视化（思维导图）、追踪效率数据（数据看板）

2.2 核心使用场景

场景	描述
晨间启动	打开新标签页 → 查看天气与时钟 → 浏览每日一言获取灵感 → 查看今日待办任务
任务管理	在待办模式中创建/编辑任务 → 设置截止日期与提醒 → 通过子任务拆解复杂工作
信息获取	收到 RSS 检测提示 → 一键订阅感兴趣的网站 → 在 RSS 阅读器中集中阅读
专注工作	打开番茄钟 → 25 分钟全屏沉浸式专注 → 完成后记录番茄数
快速导航	桌面模式下浏览收藏网站 → 按标签分组快速定位 → 使用搜索引擎即时查询
效率复盘	打开数据看板 → 查看 7 天完成趋势 → 分析各列表任务分布

3. 产品定位与核心价值

3.1 产品定位

以浏览器新标签页为入口的个人效率工作台

区别于传统待办应用或新标签页美化插件，MS-ToDo Hub 将五大能力有机整合：

不是一个独立的待办应用 → 而是与 Microsoft To-Do 深度集成的浏览器入口
不是简单的新标签页美化 → 而是功能完整的桌面效率工作台
不是独立的 RSS 阅读器 → 而是与任务管理无缝衔接的信息聚合工具

3.2 核心价值主张

价值维度	具体体现
效率提升	每次打开新标签页即进入工作状态，无需切换应用
数据自主	离线优先架构，网络中断不影响核心功能
隐私安全	敏感数据本地存储，透明数据流向
跨设备同步	基于 Microsoft Graph API 的双向实时同步
视觉体验	30+ 颜色主题 + 深色/浅色模式 + 防闪烁加载
免费使用	所有功能完全免费，无付费墙

4. 功能架构总览

MS-ToDo Hub
├── 🎯 智能任务管理（待办模式 · main.html）
│   ├── 双向实时同步（Microsoft Graph API）
│   ├── 离线优先架构（IndexedDB 本地缓存）
│   ├── 三级同步策略（操作级/列表级/全量）
│   ├── 多级任务管理（列表→任务→子任务）
│   ├── 列表锁定保护（本地加锁 + 内容隐藏）
│   ├── 智能排序筛选（5种排序 + 拖拽排序）
│   ├── 全局搜索（Ctrl/Cmd+F 全文检索）
│   ├── 🧠 思维导图（懒加载 · MindElixir 引擎）
│   └── 📊 数据看板（懒加载 · ECharts 引擎）
│
├── 🖥️ 桌面新标签页（桌面模式 · main-desk.html）
│   ├── 收藏网站导航（标签分组 + 拖拽排序 + 自定义图标）
│   ├── 搜索引擎（6 内置 + 自定义引擎）
│   ├── 🌤️ 天气组件（Open-Meteo 免费 API）
│   ├── 🕐 时钟组件（12H/24H + 日期显示）
│   ├── 💬 每日一言（6 类语录 + 自定义样式）
│   ├── 🍅 番茄钟（25分钟专注 + 全屏沉浸）
│   ├── 📝 便签（独立页面 · 富文本 + 图片）
│   ├── ❄️🌧️🌸✨ 空闲特效（雪花/雨/樱花/萤火虫）
│   └── 🖼️ 背景图片（4默认/必应每日一图/自定义上传）
│
├── 📡 RSS 信息聚合阅读（main-rss.html）
│   ├── 三列布局（订阅源/文章列表/文章详情）
│   ├── 7 层检测管道（自动发现网页 RSS 源）
│   ├── 平台专属规则（CSDN/博客园/V2EX/YouTube 等）
│   ├── 标签分组管理 + 拖拽排序
│   ├── 云端同步（Todo-RSS 列表跨设备）
│   └── 后台抓取代理（Service Worker 绕过 CORS）
│
├── 🎨 个性化定制系统
│   ├── 深色/浅色主题（一键切换 + 防闪烁）
│   ├── 30+ 颜色主题（8 大色系）
│   ├── 全屏模式
│   ├── 中英文双语界面
│   ├── 🎁 节日礼物弹窗 + 🎆 烟花效果
│   └── 📅 提醒日期管理（最多10条 + 到期烟花）
│
└── 🔧 后端服务（Cloudflare Worker）
    ├── OAuth 认证代理（Token 换取/刷新）
    ├── 天气代理（可选，前端已直连上游）
    ├── Favicon 代理（Google Favicon 转发）
    └── 用户信息管理（HMAC-SHA256 签名认证）

5. 功能模块详细说明

5.1 智能任务管理（待办模式）

待办模式是产品的核心功能模块，通过 main.html 页面呈现，提供完整的 Microsoft To-Do 任务管理能力。

5.1.1 用户认证与登录

特性	说明
认证方式	Microsoft OAuth 2.0 授权码流程
登录入口	左侧边栏顶部「登录微软待办」按钮
Token 管理	TokenManager 类自动管理 AccessToken/RefreshToken 生命周期
自动刷新	AccessToken 过期前 5 分钟自动刷新，用户无感知
并发刷新保护	isRefreshing + refreshQueue 机制防止重复刷新
刷新失败处理	400/401 响应时自动清除 Token，触发重新登录
地区选择	支持国际版/中国版切换（影响 OAuth 端点和回调 URI）

登录流程：

用户点击登录按钮 → 弹出 Microsoft 授权窗口
用户授权后 → 通过 Cloudflare Worker 代理用授权码换取 Token
Token 存储到 chrome.storage.local → 初始化 API 连接
优先同步 Todo-Desktop 和 Todo-RSS 列表 → 确保桌面模式数据就绪
全量同步所有列表/任务/子任务 → 写入 IndexedDB 本地缓存

5.1.2 页面布局

待办模式采用经典的双栏布局：

左侧边栏（#sidebar）：

用户头像（可点击刷新）+ 问候语（用户名/邮箱）
登录按钮区（未登录时显示）
离线模式指示器（断网时显示地球图标）
登录天数展示
列表导航（动态渲染所有待办列表）
底部操作区：收起侧边栏 / 本地锁定 / 删除列表 / 新增列表

右侧主内容区（#main-content）：

列表头部栏：眼睛图标（配合锁定） + 列表标题 + 功能按钮组
功能按钮组：思维导图 / 礼物 / 搜索 / 新增任务 / 数据看板 / 桌面模式 / 设置菜单
任务列表容器（支持拖拽排序）
思维导图容器（默认隐藏，切换显示）

5.1.3 列表管理

功能	说明
创建列表	底部输入框输入名称后回车创建
删除列表	底部垃圾桶按钮删除当前选中列表
列表导航	侧边栏动态渲染，点击切换当前列表
列表锁定	点击锁按钮加锁，需点击眼睛图标才能查看内容
列表可见性	三种状态：持久显示 / 临时显示 / 隐藏（会话级不持久化）
列表排序	系统列表（我的日程/重要/计划/任务）+ 自定义列表 + Flagged Emails 置底

5.1.4 任务管理

功能	说明
创建任务	点击 + 按钮或输入后回车
编辑任务	支持修改标题、截止日期、提醒日期、重要性标记
完成任务	点击复选框标记完成/取消完成
删除任务	编辑弹窗中删除，需确认
子任务	每个任务支持多个子任务（checklist items）
任务图标	支持 Emoji 选择器为任务添加图标
排序方式	创建时间 / 重要性 / 截止日期 / 名称 / 手动拖拽（5种）

5.1.5 三级同步策略

同步是产品的核心技术能力，通过 main-sync.js 模块实现：

同步级别	优先级	延迟	触发场景
操作级同步	高	2秒	单个任务/子任务创建/编辑/删除
列表级同步	中	3秒	切换列表时同步当前列表数据
全量同步	低	60分钟	定时全量双向同步所有数据

同步锁机制（SyncLock）：

_isSyncing 标志防止并发同步
超时自动释放（默认 30 秒，最大 5 分钟）
待处理操作队列：同步进行中的新操作进入队列，同步完成后自动触发
列表级同步独立追踪（_listSyncPending Map）

冲突解决：

基于时间戳（lastModifiedDateTime）的自动合并
本地与服务器数据对比，保留最新修改
数据永不丢失，冲突双方均保留

5.1.6 离线优先架构

通过 main-offline.js 模块实现离线优先：

写入操作：先写入 IndexedDB（TodoIDBStorage），再触发同步
读取操作：优先从本地缓存获取，确保离线可用
智能同步触发：根据实体类型委托 SyncLock 调度不同级别同步
降级策略：SyncLock 不可用时尝试 SyncManager 兜底

5.1.7 全局搜索

通过 main-search.js + search-ui.js 实现：

快捷键：Ctrl/Cmd + F
搜索范围：列表名称 / 任务标题 / 子任务标题
数据来源：IndexedDB 本地缓存（离线可用）
结果展示：分类显示匹配的列表、任务、子任务
高亮标记：搜索关键词在结果中高亮显示

5.2 桌面新标签页（桌面模式）

桌面模式通过 main-desk.html 独立页面呈现，提供完整的桌面新标签页体验。

5.2.1 页面布局

桌面模式采用三栏式布局：

左侧标签轨边栏（#desktop-tag-sidebar）：

图标+文字竖排菜单，点击切换网站分组
底部工具区：图片切换 / 网站编辑 / 设置

顶部工具栏（.desktop-top-bar）：

左上角：天气组件（图标 + 温度 + 城市）
中部：搜索框 + 搜索引擎快捷栏 + 时钟 + 每日一言
右上角：节日礼物按钮 / 组件工具切换 / MS-ToDo 返回按钮

主内容区（.desktop-main）：

收藏网站网格（.desktop-sites-grid）
标签名称提示（切换标签时滑入展示，3s 自动消失）

5.2.2 收藏网站导航

功能	说明
添加网站	弹窗表单：名称（30字）+ URL（200字）+ 标签（12字）
编辑网站	支持修改所有字段 + 图标设置
删除网站	确认后删除
标签分组	左侧标签轨切换分组，支持「全部」视图
标签管理	输入框可新增标签，也可点击选择已有标签
拖拽排序	网站在分组内可拖拽调整顺序
图标设置	三种模式：自动获取（Favicon）/ 网络链接 / 本地上传
跨设备同步	通过 Microsoft To-Do「Todo-Desktop」列表实现

数据结构（Todo-Desktop 列表）：

列表 → 任务（标签名） → 子任务（网站数据）
子任务格式（换行分隔 key-value）：sort:时间戳\nid:xxx\nname:名称\ndomain:URL\ncreated:时间戳
支持三种历史格式向后兼容

默认网站种子：

首次安装时预置 15 个常用网站（视频/AI/图片/MS-todo 四组）
种子版本机制（DEFAULT_SEED_VERSION）：版本不匹配时用新默认数据覆盖一次

5.2.3 搜索引擎

功能	说明
内置引擎	Bing / Baidu / Google / DuckDuckGo / ChatGPT / DeepSeek（6个）
自定义引擎	支持添加自定义搜索引擎（名称 + URL 模板，`{q}` 为占位符）
引擎快捷栏	搜索框下方横排图标栏，点击切换当前引擎
引擎管理	独立设置页面：引擎列表 + 排序 + 删除 + 添加
引擎图标	自动获取各引擎 Favicon 展示

5.2.4 天气组件

特性	说明
数据源	Open-Meteo 免费 API（10,000 次/天/用户，直连无代理）
城市搜索	geocoding-api.open-meteo.com
反向地理编码	BigDataCloud（10,000 次/月/用户，支持中英文）
展示内容	图标 + 温度 + 城市名，悬浮展开详情与 6 天预报
天气图标	WMO 天气代码映射到 FontAwesome 图标（区分昼夜）
缓存策略	localStorage 缓存 2 小时，1 小时自动刷新
城市设置	手动搜索城市名 / 浏览器自动定位（Geolocation API）
兜底策略	未设置城市且定位不可用时，默认展示北京天气

5.2.5 时钟组件

功能	说明
时间显示	搜索框下方，支持 12H / 24H 格式
日期显示	时间下方展示当前日期
自动刷新	每分钟自动更新
颜色自定义	支持自定义颜色或跟随主题

5.2.6 每日一言

功能	说明
展示位置	时钟下方
语录分类	全部 / 励志 / 人生 / 智慧 / 成长 / 平静 / 圣经（7类）
字号调节	12px ~ 20px 滑块调节
颜色自定义	支持自定义颜色或跟随主题

5.2.7 番茄钟

功能	说明
计时时长	25 分钟标准番茄工作法
全屏沉浸	Momentum 风格全屏覆盖层，带圆环进度条
持久化计时	基于时间戳（`localStorage`），刷新/新标签页自动恢复
跨页面恢复	运行中自动展示面板继续计时，后台完成自动通知
每日统计	显示今日完成番茄数
提醒音	计时完成时播放提醒音
控制操作	开始 / 暂停 / 重置 / ESC 关闭
懒加载	首次打开面板或恢复进行中的计时时动态注入

5.2.8 便签

功能	说明
独立页面	`main-desk-notes.html`，通过 `window.open` 打开
富文本编辑	支持文字格式化 + 图片插入
多栏布局	支持单栏 / 双栏 / 三栏布局切换
便签管理	新增 / 编辑标题 / 编辑内容 / 删除
自动保存	输入防抖 500ms 自动保存
图片存储	IndexedDB 分离存储（文本在 `notes` 表，图片 Blob 在 `images` 表）
图片限制	单张图片最大 5MB
数据隔离	独立 IndexedDB 数据库（`StickyNotesDB`），不参与云端同步

5.2.9 空闲特效

特效	说明
雪花效果	Canvas 粒子系统模拟雪花飘落
下雨效果	Canvas 粒子系统模拟雨滴下落
樱花效果	Canvas 粒子系统模拟樱花飘舞
萤火虫效果	Canvas 粒子系统模拟萤火虫闪烁
触发机制	用户空闲超过设定时间后自动触发（30秒 ~ 10分钟可调）
懒加载	开关开启时由 `DesktopLazyLoader` 按需注入

5.2.10 背景图片

模式	说明
默认壁纸	4 张精选高清壁纸（webp 格式）
必应每日一图	自动获取 Bing 每日壁纸，按日期缓存
自定义上传	支持本地上传图片，存储到 IndexedDB
无图片	纯色背景模式
透明度调节	10% ~ 100% 滑块调节（5% 步进）
图片切换	底栏图片切换按钮快速更换

5.2.11 桌面设置面板

设置面板包含 8 个功能区域：

区域	功能项
首页选择	新标签页默认展示 ToDo 模式 / 桌面模式
外观与主题	全屏模式 / 深色浅色切换 / 中英文切换
导航	显示标签导航开关 / 显示 ToDo 按钮开关
功能组件	天气/时钟/每日一言开关 + 详细设置；RSS/番茄钟/便签工具卡片显隐
效果区域	空闲触发时间 + 雪花/下雨/樱花/萤火虫独立开关
导航网站	网格宽度/图标大小/布局间距/字体颜色/隐藏背景
背景图片	来源选择 + 上传 + 透明度
关于	插件分享/帮助中心/官网/打赏/问题反馈

5.2.12 首页切换机制

设置项 desktop_homepage 控制新标签页默认展示模式
desktop-redirect.js 在 main.html 加载时同步检查并重定向
桌面模式下通过 location.replace('main-desk.html') 跳转
待办模式下通过 location.href = 'main.html?view=todo' 返回

5.3 RSS 信息聚合阅读

RSS 功能通过 main-rss.html 独立页面呈现，提供完整的信息聚合阅读体验。

5.3.1 页面布局

三列式经典阅读器布局：

顶部工具栏：

左侧：RSS 标题
中部：搜索框（支持清除按钮）
右侧：刷新全部 / 添加订阅 / 主题切换 / 语言切换 / 返回待办

第一列 - 订阅源列表（.rss-sidebar）：

顶部筛选：全部 / 未读 / 收藏
统计行：总数 / 未读数 / 收藏数
标签分组导航
订阅源列表（动态渲染）

第二列 - 文章列表（.rss-articles）：

标题 + 操作（全部标记已读 / 排序选择）
排序方式：日期降序 / 日期升序 / 标题升序
文章卡片列表

第三列 - 文章详情（.rss-detail）：

文章标题 + 来源 + 作者 + 日期
正文内容渲染
底部操作：原文链接（外部打开）+ 收藏按钮

5.3.2 RSS 自动检测（Content Script）

通过 rss-detector.js 实现网页 RSS 源自动发现，采用 7 层检测管道：

层级	检测方法	说明
1	`detectFeedDocument`	当前页面本身就是 feed（直接访问 feed URL）
2	`detectLinkTags`	页面 `<link rel="alternate">` 标签声明
3	`detectAnchorLinks`	`<a>` 标签语义扫描（RSS/订阅文案链接）
4	`detectCurrentUrlByFetch`	URL 疑似 feed 或 XML 文档时同源 fetch 验证
5	`detectByPlatformRules`	平台专属规则（确定性生成官方 feed URL）
6	`detectByCommonPaths`	常见路径探测（/feed, /rss 等）
7	`detectByFeedSubdomain`	RSS 专用子域名探测（rss./feeds. 前缀）

平台专属规则支持：

平台	规则说明
CSDN	`blog.csdn.net/<用户>` → `rss.csdn.net/<用户>/rss/map`
博客园	`cnblogs.com/<用户>` → `cnblogs.com/<用户>/rss/`
V2EX	节点页/会员页/分区 tab/首页各有对应 feed
喜马拉雅	`/album/<ID>` → 专辑 XML feed
GitHub	用户页 → `.atom`；仓库页 → `releases.atom` + `commits.atom`
YouTube	`/channel/UC...` 直接生成；`@handle` 从 HTML 提取 channelId

XML 页面兼容：

直接访问 feed URL 时浏览器可能显示 XML 文档
XML 文档无 document.body，UI 全部用 createElementNS(XHTML_NS) 构建
Shadow DOM 隔离样式，确保在 XML 页面中正确渲染

5.3.3 订阅管理

功能	说明
添加订阅	输入 feed URL + 标签，支持预览验证
编辑订阅	修改标题/URL/标签
删除订阅	确认后删除订阅及其文章
标签分组	订阅源按标签分类，支持拖拽排序
标签管理	输入新标签或选择已有标签
默认订阅源	首次打开预置 10 个科技/国际类 RSS 源

5.3.4 文章管理

功能	说明
已读/未读	自动标记已读，支持手动切换
收藏	收藏重要文章，独立筛选
搜索	全文搜索文章标题
排序	日期降序/升序、标题升序
全部标记已读	一键标记当前源所有文章为已读
原文链接	在新标签页打开原始文章

5.3.5 RSS 云端同步

通过 rss-cloud-sync.js 实现跨设备同步：

同步载体：Microsoft To-Do「Todo-RSS」列表
数据结构：订阅源 = 任务（标签），文章 = 子任务
同步策略：
- 写入时：先更新本地，再同步到 Todo-RSS
- 读取时：优先从 IndexedDB 本地副本加载
- 首次登录：优先采用云端已有订阅，云端确认无数据时才加载默认源
三层存储架构：
- 内存层（RSSManager._subscriptions）：运行时状态
- 本地持久层（IndexedDB via OfflineManager）：权威本地副本
- 云端层（Todo-RSS 列表）：跨设备数据源
chrome.storage.local.rss_cloud_subscriptions：派生快照，仅供后台 Service Worker 快速检查

5.3.6 后台抓取代理

通过 bg-rss.js（Service Worker）实现：

代理 fetch 请求，绕过 CORS 限制
支持反爬 UA 重试
文章数据存储在 chrome.storage.local

5.4 思维导图

特性	说明
引擎	MindElixir（~310KB，懒加载）
触发方式	点击列表标题栏思维导图按钮
数据来源	当前列表的任务/子任务自动转换
节点操作	添加子节点 / 兄弟节点、编辑、删除、复选框
导出功能	支持导出为图片（html2canvas）
视图切换	思维导图 ↔ 任务列表视图无缝切换
懒加载	首次点击时动态加载 MindElixir + html2canvas + mindmap-export + mindmap-ui

5.5 数据看板

特性	说明
引擎	ECharts（~1MB，懒加载）
触发方式	点击标题栏数据看板按钮
概览统计	列表数 / 任务数 / 子任务数 / 完成率
完成趋势	7 天任务完成趋势折线图（优先使用精确的完成日志）
状态分布	已完成/进行中任务占比饼图
列表分布	各列表任务数量柱状图（Top 6 + 其他）
完成率	各列表完成率对比
操作统计	记录列表/任务/子任务的新增/编辑/删除/完成次数（dashboard-stats.js）
数据来源	IndexedDB 本地数据实时计算，不传输到服务器

5.6 个性化定制系统

5.6.1 主题系统

功能	说明
深色/浅色主题	一键切换，`theme-loader.js` 在首帧前应用（防闪烁）
颜色主题	30+ 预设配色方案，8 大色系：科技未来/自然有机/极简主义/渐变霓虹/柔和粉彩/大地色调/海洋灵感/2025趋势配色
全屏模式	沉浸式全屏体验
跨页面一致	待办/桌面/RSS 三个页面均支持主题切换且状态同步

5.6.2 国际化（i18n）

功能	说明
支持语言	中文（zh-CN）/ 英文（en-US）
翻译管理	`main-i18n.js` 维护双语翻译文案（1400+ 行）
切换方式	设置菜单/桌面设置中一键切换
扩展名称	通过 `_locales/` 目录实现扩展名称和描述的国际化
回退机制	缺失翻译时回退到中文

5.6.3 节日与提醒

功能	说明
节日礼物弹窗	特定节日自动弹窗 + 烟花效果（`holiday-gift.js`）
烟花效果	Canvas 烟花动画，到期自动触发（`firework-effect.js`）
提醒日期管理	自定义重要日期（最多 10 条），支持日期输入
到期提醒	提醒日期到期时自动触发烟花效果
跨页面共享	待办模式和桌面模式均支持提醒日期功能

5.7 辅助功能

5.7.1 帮助中心

通过 help-center.js 实现
提供产品使用指南和常见问题解答
待办模式和桌面模式均可访问

5.7.2 快捷键指南

通过 shortcuts-key.js 实现
模态框展示所有可用快捷键
支持 Ctrl/Cmd + F（搜索）等快捷操作

5.7.3 任务到期提醒

组件	说明
`alarms.js`	前台页面调度 chrome.alarms 闹钟
`bg-alarms.js`	Service Worker 监听闹钟事件，触发桌面通知
通知内容	列表名 + 任务标题，支持多语言
通知点击	点击通知打开对应任务页面

5.7.4 打赏系统

支持支付宝/微信/PayPal 三种打赏方式
模态窗口展示二维码
待办模式和桌面模式均可访问

6. 技术架构

6.1 技术栈

类别	技术	说明
扩展标准	Chrome Extension Manifest V3	最新扩展标准，Service Worker 架构
前端框架	原生 JavaScript + jQuery	无框架依赖，轻量高效
本地存储	IndexedDB（Dexie.js 封装）	主数据库 `CuiFuQ-MsTodo`，6 个对象存储
扩展存储	chrome.storage.local	Token/设置/RSS文章/统计数据
页面存储	localStorage	主题偏好/桌面设置/番茄钟状态
图表引擎	ECharts（~1MB）	懒加载，数据看板使用
思维导图	MindElixir（~310KB）	懒加载，思维导图功能使用
图标库	FontAwesome	全局图标渲染
OAuth	Microsoft Graph API	OAuth 2.0 授权码流程
后端服务	Cloudflare Worker	OAuth 代理 + 天气代理 + Favicon 代理 + 用户管理
天气服务	Open-Meteo（免费）	直连 API，每用户独立配额
地理编码	BigDataCloud（免费）	反向地理编码，城市名称查询
签名认证	HMAC-SHA256	API 请求完整性验证

6.2 核心模块依赖关系

main.html（待办模式）
├── logger.js（全局日志开关）
├── theme-loader.js（主题防闪烁）
├── plugins/（jQuery, Dexie, FontAwesome, Emoji）
├── core/
│   ├── main-i18n.js（国际化，1400+行双语翻译）
│   ├── main-storage.js（IndexedDB 存储层，6 个对象存储）
│   ├── api.js（Graph API + OAuth + TokenManager + RegionManager）
│   ├── main-sync.js（三级同步 + SyncLock + 冲突解决，5200+行）
│   └── main-offline.js（离线 CRUD + 智能同步触发）
├── support/alarms.js（任务提醒闹钟调度）
├── main-ui.js（视图层：DOM 渲染 + 主题/认证/颜色管理）
├── main.js（业务逻辑：初始化 + 事件处理 + LazyLoader，2900+行）
│   ├── LazyLoader → 思维导图 / 数据看板 / 拖拽排序
│   └── 事件处理器 → 列表/任务/子任务 CRUD
└── functions/
    ├── search/（全局搜索：数据层 + UI 弹窗）
    ├── important-days.js → firework-effect.js → holiday-gift.js
    ├── help-center.js
    ├── shortcuts-key.js
    └── desktop/desktop-mode.js（双页面兼容）

main-desk.html（桌面模式）
├── core/（i18n + storage + api + sync + offline）
├── desktop-widgets.js（小组件公共配置）
├── desktop-weather.js（天气组件，680+行）
├── desktop-clock.js（时钟组件）
├── desktop-daily-quote.js（每日一言）
├── desktop-lazy-loader.js（非首屏按需加载器）
└── desktop-mode.js（核心逻辑，4200+行，双页面兼容）

main-rss.html（RSS 阅读器）
├── core/（i18n + storage + api + sync + offline）
├── rss-manager.js（订阅管理 + XML 解析，1000+行）
├── rss-cloud-sync.js（云端同步，Todo-RSS 列表）
└── rss-ui.js（三列布局渲染 + 搜索/排序）

background.js（Service Worker）
├── bg-alarms.js（闹钟提醒 + 通知点击）
├── bg-rss.js（RSS 抓取代理 + 反爬 UA 重试）
└── bg-oauth.js（OAuth 授权码 + Firefox 回调）

6.3 Service Worker 架构（MV3）

background.js（入口）
├── importScripts 加载子模块
├── chrome.action.onClicked → 打开新标签页
├── chrome.runtime.onInstalled → 安装后处理
└── chrome.runtime.onStartup → 启动后处理

bg-alarms.js
├── chrome.alarms.onEvent → 匹配任务提醒闹钟
├── chrome.notifications.create → 触发桌面通知
└── chrome.notifications.onClicked → 打开对应任务

bg-rss.js
├── chrome.runtime.onMessage → 接收 RSS 抓取请求
├── fetch with custom UA → 代理抓取（绕过 CORS）
└── 反爬重试 → 切换 User-Agent 再次尝试

bg-oauth.js
├── Firefox 回调页拦截 → 提取授权码
└── postMessage → 通知登录页面

7. 数据存储架构

7.1 IndexedDB 数据库

主数据库：CuiFuQ-MsTodo（版本 3）

对象存储	主键	索引	用途
`keyValueStore`	key	-	通用键值对（排序规则、上次列表 ID 等）
`listCache`	listId	syncStatus, serverId	列表缓存
`tasksCache`	tasksId	listId, syncStatus, serverId	任务缓存
`tasksItemsCache`	itemsId	listId, tasksId, syncStatus, serverId	子任务缓存
`zSyncQueue`	timestamp	syncStatus	同步队列（待推送的删除操作）
`taskCompletionLog`	自增	taskId, completedAt	任务完成日志（看板趋势图）

便签数据库：StickyNotesDB（版本 1）

对象存储	主键	用途
`notes`	id	便签文本内容
`images`	id	图片 Blob 数据

7.2 chrome.storage.local

键名	内容
`accessToken`	OAuth Access Token
`refreshToken`	OAuth Refresh Token
`tokenExpiresAt`	Token 过期时间
`refreshTokenExpiresAt`	RefreshToken 过期时间
`selectedRegion`	服务地区（international/china）
`rss_subscriptions`	RSS 订阅数据
`rss_articles`	RSS 文章数据
`rss_read_ids`	已读文章 ID 集合
`rss_starred_ids`	收藏文章 ID 集合
`rss_cloud_subscriptions`	RSS 云端订阅派生快照
使用统计	操作计数、API 请求数等

7.3 localStorage

键名	内容
主题偏好	深色/浅色模式、颜色主题
`desktop_homepage`	首页选择（todo/desktop）
`desktop_sites`	收藏网站（内存缓存）
`desktop_search_engine`	当前搜索引擎
`desktop_custom_engines`	自定义搜索引擎列表
`desktop_bg_settings`	背景图片设置
`desktop_weather_location`	天气城市位置
`desktop_weather_cache`	天气数据缓存
`desktop_pomodoro_timer`	番茄钟计时状态
`desktop_pomodoro_count`	番茄钟每日完成数
`desktop_sticky_notes_layout`	便签布局

8. 多浏览器适配

浏览器	Manifest 文件	登录方式	特殊处理
Chrome	`manifest.json`	弹窗登录 + postMessage 接收授权码	标准 MV3
Edge	`manifest-edge.json`	同 Chrome	独立扩展 ID
Firefox	`manifest-firefox.json`	background.js 拦截回调页 URL 提取授权码	非 SW 模式，manifest 中预加载脚本

Firefox 适配要点：

Firefox MV3 background 不是 Service Worker，没有 importScripts
在 manifest 中提前声明所有需要加载的脚本
OAuth 回调通过 bg-oauth.js 拦截回调页 URL 提取授权码

9. 后端服务架构

9.1 Cloudflare Worker（api.mstodo.dpdns.org）

路由	方法	功能	认证
`/auth/token`	POST	用授权码换取 Microsoft Token	无需认证
`/auth/refresh`	POST	用 RefreshToken 刷新 AccessToken	无需认证
`/api/user/save`	POST	保存/更新用户信息	HMAC-SHA256 签名
`/api/weather/*`	GET	天气代理（转发 Open-Meteo）	HMAC-SHA256 签名
`/api/favicon`	GET	Favicon 代理（转发 Google Favicon）	HMAC-SHA256 签名

9.2 安全机制

机制	说明
HMAC-SHA256 签名	请求头包含 `X-API-Key` + `X-Signature` + `X-Timestamp`
CORS 白名单	OAuth 接口限制来源（Chrome/Edge 扩展 ID + GitHub Pages）
天气/Favicon CORS	允许任意来源（只读 GET 接口）
Client Secret 保护	Microsoft Client Secret 仅存储在 Worker 环境变量中，不暴露给前端

9.3 OAuth 代理流程

浏览器 → Cloudflare Worker → Microsoft Token Endpoint
         (保护 Client Secret)

1. 浏览器打开 Microsoft 授权页面
2. 用户授权后重定向到回调页面
3. 回调页面提取授权码，通过 postMessage 传回主页面
4. 主页面将授权码发送到 Worker /auth/token
5. Worker 附加 Client Secret，转发到 Microsoft
6. Microsoft 返回 AccessToken + RefreshToken
7. Worker 原样返回给浏览器
8. 浏览器存储到 chrome.storage.local

10. 权限与安全

10.1 扩展权限

权限	用途	安全说明
`identity`	Microsoft OAuth 2.0 登录	仅用于获取授权码
`storage`	本地存储任务/设置/Token	数据不离开浏览器
`alarms`	任务到期提醒闹钟	仅用于定时通知
`notifications`	桌面通知	仅用于任务提醒
`content_scripts`	RSS 源自动检测	只读扫描 `<link>` 标签，不读取页面内容

10.2 Host Permissions

域名	用途
`login.microsoftonline.com`	Microsoft OAuth 认证
`graph.microsoft.com`	Microsoft To-Do API
`www.bing.com`	必应每日一图
`*.dpdns.org`	自有后端服务

11. 性能优化策略

11.1 懒加载策略

模块	大小	加载时机
思维导图（MindElixir）	~310KB	首次点击思维导图按钮
数据看板（ECharts）	~1MB	首次点击看板按钮
拖拽排序（Sortable）	~44KB	排序切换为「手动」
桌面空闲特效	各独立	开关开启时
番茄钟	独立	首次打开面板或恢复计时
节日套件	3 文件链	window load 后按需注入

11.2 防闪烁机制

场景	方案
深色/浅色主题	`theme-loader.js` 在文档解析阶段即应用主题
登录区域	内联样式 `#auth-section { display: none }` 隐藏，就绪后显示
桌面模式设置	`desktop-preflash.js` 同步应用首帧设置
RSS 阅读器	全屏加载遮罩，数据就绪后淡出

11.3 缓存策略

数据	缓存方式	有效期
天气数据	localStorage	2 小时
必应每日一图	IndexedDB（Blob）	按日期
RSS 文章	chrome.storage.local	持久化
任务数据	IndexedDB	持久化 + 同步
Token	chrome.storage.local	按 Microsoft 过期时间

11.4 优先同步策略

首次登录时，prefetchPriorityLists() 函数优先同步关键列表：

Todo-Desktop（桌面模式收藏网站）
Todo-RSS（RSS 订阅源）

确保桌面模式在初始化完成后即可展示数据。

12. 隐私保护

12.1 数据自主控制原则

数据类型	存储位置	是否上传服务器
任务/列表/子任务	IndexedDB + Microsoft Graph API	仅微软云端
OAuth Token	chrome.storage.local	不上传（仅微软端点）
RSS 订阅	IndexedDB + Todo-RSS 列表	仅微软云端
RSS 文章	chrome.storage.local	不上传
便签内容	独立 IndexedDB	不上传
番茄钟状态	localStorage	不上传
使用统计	chrome.storage.local	不上传
天气坐标	直连 Open-Meteo	仅天气 API
桌面设置	localStorage	不上传

12.2 不收集的数据

不收集浏览历史
不读取或传输网页内容（Content Script 仅扫描 <link> 标签）
不收集 13 岁以下儿童个人数据
不出售或分享数据给第三方用于广告

12.3 数据删除

用户可通过以下方式删除所有数据：

卸载扩展
使用「退出登录」功能（清除所有本地数据）
清除浏览器扩展数据

13. 发布渠道与运营

13.1 发布渠道

渠道	状态
Chrome 应用商店	已发布
Edge 插件市场	同步发布
Firefox Add-ons	同步发布

13.2 官方渠道

渠道	地址
官网	https://mstodo.dpdns.org
GitHub Issues	https://github.com/cuifuq7/ms-todo-page/issues
Chrome 商店	https://chromewebstore.google.com/detail/icmnmeceeheemlmbmolfendmiieabiac

13.3 商业模式

完全免费使用，无付费功能
支持用户自愿打赏（支付宝/微信/PayPal）
本项目仅供学习和个人使用

附录 A：快捷键一览

快捷键	功能
Ctrl/Cmd + F	全局搜索
ESC	关闭番茄钟/弹窗

附录 B：默认收藏网站

分组	网站
视频	哔哩哔哩、YouTube、Netflix
AI	DeepSeek、ChatGPT、豆包、Google Gemini
图片	Pexels、Unsplash、Pixabay、StockSnap
MS-todo	MS-todo官网、星博客

附录 C：默认 RSS 订阅源

来源	标签
IT之家、爱范儿、Solidot、少数派、快科技、极客公园、虎嗅	科技
TIME	国际

MS-ToDo Hub — 新标签，新起点，新世界

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