TTL - Tiny Todo List 一个自用 todolist 诞生记

[onvno]

商店地址:tiny todo list

Github：tiny-todo-list

业余写了款基于 Chrome 的轻量任务清单扩展 - ttl (tiny todo list)，写来原因有一二：

• 一是 Chrome 上基本没找到一款完全符合自己心意的简洁 todolist
• 二是正在看的 Svelte 框架文档简洁，总觉得需要试一试是否可用好用

因为相信看这篇的大多数都是开发，所以除了介绍对清单 todolist 的理解，另外就是适当穿插一些开发使用到的框架和 API 接口介绍。

为什么选用 Svelte

这是个有趣的事情，因为前端虽然一直在小步快跑，但近几年国内主流的开发应该是在 Vue,React 中切换，变的是一次次版本升级带来的用法差异，不变的是这几款框架基本已经确定了自己的江湖地位，就像在前端编译构建阶段，Webpack 已经是无人撼动的地位，偏偏有个愣头青搞起了 rollup。嗤之以鼻的人说这是蜉蝣撼大树，不安分的人会心生几分敬意，少年有种勇者斗恶龙的气概，而正是这个愣头青又盘算起了前端框架，就是这个 Svelte，已经到了 v3 版本，简单介绍下：

1. 从新手文档来说，Svelte 说第二，可能没有敢说第一的。没有纯文本的教育小白，直接上手就是交互式示例操作。末了，还不忘提供很多示例，供你选择参考理解。
2. 从新手上手来说，看过文档基本可以确认这就是最回归前端写法的一个框架了，入手的难度要小于我前边说到的几个。
3. 从生态来说，确实不够完善，连一套完整的组件库都没有。这就是说如果想要在大型项目中使用，考虑长期开发效率和维护要三思。当然你作为开发，本着济世救人，为开源世界贡献光和热，那就上手搞吧。

虽说生态如此，但后发总比先来的有优势是铁板的事情，毕竟从模板语法上能看到学习了不少 Vue 的长处，同时干掉了虚拟 DOM,没有中间商赚差价，开发直接燥起来。

相关文档：Svelte 官方文档

关于 Chrome 扩展开发

Chrome 扩展单纯说前端开发又不能完全涵盖，可以说是一个前端练手微项目的绝佳机会。为什么算是微项目：

1. 支持popup和background之前类似前后台的交互 - 可以看做是前后端请求
2. 支持直接跨域接口访问 - 可以任性使用任何公共 API
3. 免费提供 100kb 同步 - 无需自己实现登陆注册体系从而实现用户级存储
4. 支持各种浏览器调用

如果想了解下这个小身材却有大内容的开发，英文又不一定那么好，那么墙裂推介这个非官方的开发者文档,而如果你恰巧对说明性文档不感兴趣，可以看看我写过的一篇问答式入门文档写个 Markdown 插件,讲讲 Chrome 扩展开发

一个遗留问题

有了前边提到的原因一二，和上手练练新框架的想法，就开始上手做了。但还是要说一个做之前就考虑的问题。

先前开发SPS时，使用了 Chrome 为每一款扩展提供了 100kb 的同步功能。这是个神奇的 100kb, 有了这 100kb 存储，可以做到无需单独账号登陆系统，就可以同步更新。但当你想在 100kb 范围内存储一批数据时，又会遇到一个问题：每一个对象存储不能超过 8kb，也就是说给了你自由，又给了你套了层枷锁，终究没办法翩翩起舞。这也是 SPS 限制存储 40 首（甚至有些情况不到 40 首 bug ）的原因。

怎么办，如何在不注册登录（表层原因是不想存储任何用户数据，不作恶，深层原因是还需要自己做数据存储，麻烦），又能让用户肆意存储。有了问题，就考虑这么一个免费的存储空间，嗯，Github issue 看好你哟。所以简单测试下，bingo，就用它了。

相关 API 文档：

• chrome.storage
• Github issues api v3

功能需求

说到功能需求，不得不说说我所用到的一些 todolist.作为开发和工具爱好者，对工具有些执念: 希望它能简单。这一点偏偏 todoist 做的是重了又重，太多没用的总搞得不是很得劲，有时候还会遇到登陆不上的问题，麻烦。

在找到一款Simple To-Do List简单有好用的扩展后,深度使用还是发现了几处致命问题：

• Chrome 单条数据存储，导致超过一定条数无法创建
• 批量删除功能过于强大，容易误操作
• 无法对任务增加描述

查看了下作者更新时间是多年前了，所以理想的简约不简单还是有那么一些距离，就梳理下自己的需求：

进行中的任务需要能够支持不同状态

常规 todolist 只能展示完成 /未完成两个状态，有时候在任务完成前，没有看到任务进展会有一种挫败感心理

TTL 做了什么：

• TTL 支持通过进度条控制(展示)目前任务进度
• 支持任务完成不足 1/3, 超过 1/3 不足 2/3,超过 2/3 会使用不同字体颜色 /粗细展示
• 拖拽到最大即自动存储到complete条目中
• 删除后会自动存储到forgotten条目中

需要支持清单任务描述

Simple To-Do List简单极致到只能创建任务，却不能对任务做一些基本描述

TTL 做了什么

• TTL 支持创建时添加
• TTL 支持双击进行编辑

需要支持强迫症模式

创建一定数量任务如未完成，则限制创建新任务

TTL 做了什么

• TTL 支持设置最大任务数，默认 100 条

需要支持遗忘模式

因为经常会遇到创建任务后，但又根本不重要，结果一直躺在任务列表，怎么办。

TTL 做了什么 长时间未更新的任务直接进入回收站(Forgotten)

• TTL 支持自动回收，默认 365 天

TTL 的缺陷

• 支持导出备份，却还不支持导入
• 功能使用缺乏说明文档
• 没有使用chrome.storage同步，这样遇到多台 PC 的情况,没办法做到信息同步
• 使用交互细节仍存在问题

TTL 功能演示

根据留言 v0.1.0 存在滚动条显示问题，因手边没有 window 和低版本 chrome,没法直接复现，临时发布了一个预览版在 github,可以下载本地安装帮忙测试反馈下： https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1

[admc]

前排留名，写的很棒啊大佬，这就去体验下

[onvno]

@admc 感谢支持，写篇文字就是记录下，缺陷也比较明显

[dakb]

svelte 是第一次听说，楼主厉害

[androidBrant]

这个进度条有意思

[onvno]

@dakb 就是稍微小众点的框架，不过 Github 也有 2 万多 Star 了，可以玩玩

[inntechy]

windows 下，列表右侧会有滚动条，导致宽度不够，下方也出现滚动条。。

[inntechy]

然后由于这个滚动条，导致进度条无法一次性拖到最右，还是蛮影响体验的

[inntechy]

用 mac 试了一下，77.0.3865.90 ，同样有滚动条。不知道为什么楼主的演示里没有。

[onvno]

@inntechy 感谢 bug 反馈，这几天在外，回来升级后会进行回复

[onvno]

@inntechy 嗯，我这里是 mac 的，window 会单独处理下

[sumonian]

商城上下载不下来 这是啥情况 能够在 git 上提供一下下载吗

[onvno]

@sumonian 直接克隆仓库，安装依赖后，npm run build 下就可以了

[sumonian]

@onvno 试了一下 报错 Error: Cannot find module 'rollup-plugin-svelte' 我对于这方面不是很了解 只是想用一个这个东西 所以最好能够帮忙打包一下 或者 告诉我这个错误该怎么处理

[onvno]

@sumonian 使用 npm install 安装下依赖就可以，等团建回来往仓库传一份 build 过的

[onvno]

@sumonian 仓库已经上传，下载 zip 压缩包即可： https://github.com/onvno/tiny-todo-list/releases/tag/v0.1.1

[onvno]

@inntechy 没有复现，不过描述右侧滚动条应该是 overflow 默认显示的问题，手边暂时没有 window，在仓库上传了一份 0.1.1 预览版，麻烦下载本地测试一下，多谢。下载 zip 压缩包拖到本地的扩展列表即可
P.S:回复发布地址结果被告知外链不能多次回复发，所以麻烦看下上条回复中的链接地址

[inntechy]

@onvno v0.1.1 我这里测试正常

[onvno]

@inntechy 收到，我上传下 chrome 商店，一天左右会自动更新