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

96
作者 Kenshin
2017.05.27 15:56* 字数 1993

注意:简悦已经升级为 1.0.3,详细请看 http://www.jianshu.com/p/bca730fa93cb

简悦 与 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 的设计是最让人头疼的一件事情... 多亏 SketchPixelmator 的加持,最终硬着头皮,设计了几个 icon 场景:

简悦 - 设计稿
简悦 - 设计稿

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

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

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

产品的故事