为了达到完美的阅读模式这个小目标 ，我适配了 120+ 个网站，因此诞生了它 - 简悦 ：沉浸式阅读的 Chrome 扩展

注意：简悦已经升级为 1.0.4，详细请看 http://www.jianshu.com/p/7afe2f6d59ed

简悦 与 120+ 个网站的故事。

简单阅读，愉悦心情！

简悦的官网 在这里，代码开源并托管在 Github 上，通过 Chrome Webstore 下载 或者 离线下载 。

在 「知识爆炸 / 信息过载」 的当下，如果你有与我一样的 「阅读障碍」，相信本篇文章会对你所有帮助。

简悦新增加了 Telegram 群，方便大家沟通与反馈；以及测试版通道，详细请看 这里 。

由于工作性质的缘故，经常在 PC 上阅读文章，再加上很多文章都为了 追求点击率，因此除了正文外，增加了很多 “相关链接”。

所以很多时候，本来想看看 “AlphaGo ” 背后的人工智能，结果1个小时过去了，我却在看着 “黑椒鸡丝面” ...

为了避免这种情况出现，我经常会使用 「类似 Safari 中的阅读模式」，无奈 Chrome 下并没有太好的扩展，陆续使用了很多类似扩展，但这些扩展大多存在如下的一些问题：

• 加载过慢，因为使用了 iframe 方案；
• 某些图片无法显示，因为这些图片增加了 防盗链 功能；
• 个别页面图文排版混乱，因为这些页面并没有按照常规方式生成，尤其是含有代码类的网页；

所以，初衷是为了有更好的阅读体验，结果事实却往往 “打脸” 打的厉害...

本着前端开发工程师的一贯 “特质”：既然没有好用的阅读模式，撸袖子，自己动手丰衣足食。

为了避免犯同样的 “错误”，所以这个 Chrome 扩展 不能走老路，即：

• 不使用 iframe 的方式，避免了 加载过慢 / 防盗链 的问题；
• 生成适合 中文阅读 习惯的页面；

前者很容易实现，使用 Chrome extension API: content_scripts 即可达到注入页面，并能控制页面元素的目的。

后者不能按照常规的办法，因为没办法要求每个页面都按照良好的风格生成。但是，毕竟一个人经常阅读的网站就那些多，而且这些网站并不会经常更改其页面结构，所以如果能逐一适配这些网站，并且按照符合中文阅读的习惯生成页面即可。

通过分析 Feedly / 即可 等阅读咨询类 网站 / App 的数据源，再加上精准适配，最终诞生了开头说的内容：

简悦 逐一适配了 120+ 个网站，并提取 标题 描述 正文 媒体资源（ 图片/ 视频 ） 等，生成 符合中文阅读 的页面。
我将这种模式称为： 阅读模式。

即便这样，仍旧会存在 “漏网之鱼”！因此在 阅读模式 的基础上，又增加了 聚焦模式：

聚焦模式 不改变当前网页的结构，只高亮需要阅读，并隐藏掉其余部分，不分散用户的注意力，适合 非适配阅读模式 的网站，或者 临时阅读。

为什么取名字为 简悦 ？

灵感来源于： 简单阅读，愉悦心情 之意！

至此，简悦 的 最核心 功能已经完成了，但这远远不够。

正如 「马斯洛的需求层次理论」一样，简悦不能只解决 「温饱问题」，它还需要： 好看 与 定制化 。

对于一个 Developer 来说，最大的问题不是代码如何敲？而是如何设计一个好看的界面...

还好万能的 Google 大神拯救了我们于水火：

Material design 一个符合现代化 UI 的设计语言，事无巨细的官方设计指导让非 Designer 的我们也可以设计出 严谨 / 美观 / 成熟 的 UI 界面。

基于 Material design 设计方案后实际效果：

简悦 - 阅读模式

简悦 - 阅读模式 · 控制栏界面

简悦 - 阅读模式 · 设置界面

简悦 - 设置界面

简悦 - 稍后读

解决了 如何才能好看 的问题后，定制化就需要考虑了。根据 2/8 原则，一个过度化的 定制选项 并不是一个好主意，所以就有了这个 「克制版」 ，它只具有一些基本功能：

• 快捷键，方便键盘控，直接召唤 “阅读模式 / 聚焦模式”；
• 自选字体，包括： 系统默认 苹果苹方 苹果幼圆 微软雅黑 谷歌思源；
• 字体大小；
• 三种版面：宽版 正常 窄版；
• 分享功能；
• 几种不同的主题模式，包括： 白练 灰青 素色 鸟之子色 青磁鼠 焦茶 御纳戸色 黒鸢 等；
• 导出 / 导入 配置文件；
• 清除数据；
• 自动/手动 通过网络 同步最新的 适配列表；

全部功能

插一句：主题模式为什么是这些名字呢？

如果名字叫做： github newsprint gothic engwrite octopress pixyii monospace night dark 的话，并没有明确描述这个主题颜色，所以还不如起个 “小清新” 的名字，而且这些名字都来源于日本的 “和色” 名称。

虽然一直秉承 2/8 原则，但是有些功能还是超出了这个界限，所以 定制选项 还包括如下的一些 「隐藏技能」 ：

• 控制栏某些功能支持快捷键；
• 一个 “阉割版” 的稍后读；

到目前为止，简悦 已经可以使用了！在使用期间，发生了一些 阅读模式 当初未考虑的问题，即：

某篇 适配阅读模式 的文章中包含了一些 广告图片 / 文字 等内容，但并不是每个人都需要隐藏掉这些内容...

所以，阅读模式不仅需要具有 逐一适配网址 的功能，还需要拥有更强大的个性定制化功能。所以一个更灵活、本不属于 1.0.0 的 高级定制功能 出现在当前版本中：

** 可编程的阅读模式，目前包括了：**

• HTML 节点
• jQuery 语句
• 正则表达式
• 任意段落

以及，每个适配站点都可编辑：（ 以上方式均可支持 ）

• 标题
• 描述
• 正文
• 排除列表（ 即：隐藏的内容 ）

至此，阅读模式 拥有了个性化定制。

唯一的遗憾是：

暂时未开放 非适配 网址的阅读模式化，即：某个网址 http:///www.abc.com 如果不在适配列表中，那么用户暂时无法对其进行 阅读模式 的适配。

当然，这个功能会开放在 1.0.1 版本中，敬请期待~
同样，放在 TO-DO 列表的功能还包括：

• 稍后读可以直接发送到 Pocket；
• 增强型 聚焦模式；
• 自行添加新的站点到 阅读模式；
• 自定义主题；

最后，icon 的设计是最让人头疼的一件事情... 多亏 Sketch 与 Pixelmator 的加持，最终硬着头皮，设计了几个 icon 场景：

简悦 - 设计稿

最后的最后，作为一个 Developer 为什么没有提 框架、技术选型 这些事情呢？

原因... 你懂的，可选的太多了，实在没啥好说的。
非要说说的话，简悦的方案：
Webpack + ES6 + React + PostCSS + CSSModule
别问我为什么...

希望，简悦 可以 还原阅读的本质，提升你的阅读体验！