为了达到完美的阅读模式这个小目标 ，我适配了 120+ 个网站，因此诞生了简悦 - 让你瞬间进入沉浸式阅读的 Chrome 扩展
kenshin · kenshin · 2017-06-13 07:19:55 +08:00 · 21602 次点击这是一个创建于 2726 天前的主题，其中的信息可能已经有所发展或是发生改变。
好吧，这应该是我写过最长的标题了，但不是标题党... 同样，也是我业余项目中单个版本开发周期最长的一个项目。
在「信息过载」的当下，如果你有与我一样的 「阅读障碍」，本篇文章会对你所有帮助。
简悦 - SimpRead
让你瞬间进入沉浸式阅读的 Chrome 扩展，还原阅读的本质，提升你的阅读体验。
简悦是什么：
简悦是 沉浸式阅读的 Chrome 扩展，取自：「简单阅读，心情愉悦」 之意。
简悦解决的问题：
为了避免文章开头所说的信息过载，我经常会使用「类似 Safari 中的阅读模式」，无奈 Chrome 下并没有太好的扩展，陆续使用了很多类似扩展，但这些扩展大多存在如下的一些问题：
- 加载过慢，因为使用了
iframe方案； - 某些图片无法显示，因为这些图片增加了
防盗链功能； - 个别页面图文排版混乱，因为这些页面并没有按照常规方式生成，尤其是含有代码类的网页；
所以，初衷是为了有更好的阅读体验，结果事实却往往 “打脸” 打的厉害...
本着前端开发工程师的一贯 “特质”：既然没有好用的扩展，撸袖子，自己动手丰衣足食。为了避免犯同样的 “错误”，所以这个 Chrome 扩展 不能走老路，即：
- 不使用
iframe的方式，避免了加载过慢 / 防盗链的问题； - 生成适合
中文阅读习惯的页面；
前者很容易实现，使用 Chrome extension API: content_scripts 即可达到注入页面，并能控制页面元素的目的。
后者不能按照常规的办法，因为没办法要求每个页面都按照良好的风格生成。但是，毕竟一个人经常阅读的网站就那些多，而且这些网站并不会经常更改其页面结构，所以如果能逐一适配这些网站，并且按照符合中文阅读的习惯生成页面即可。
最终通过分析一些常用的阅读咨询类 网站 / App 的数据，再加上精准适配，最终诞生了标题说的内容！
主要功能一览：
- 阅读模式；
逐一适配了 120+ 个网站，并提取 标题 描述 正文 媒体资源（ 图片 / 视频 ） 等，生成 符合中文阅读 的页面 - 聚焦模式；
只高亮需要阅读，并隐藏掉其余部分，不分散用户的注意力，适合 非适配阅读模式 的网站，或者 临时阅读 - 站点编辑器；
可编程，定制化，详细请看 站点编辑器 - 多种主题；
白练、白磁、卯之花色、丁子色、娟鼠、月白、百合、紺鼠、黒鸢等 - 同步、上传 /下载 配置、同步适配列表等；
- 稍后读；
截图：
（视觉效果）
（阅读模式）
（阅读模式 · 控制栏界面）
照片集：
详细功能：
如何使用（阅读模式）：
简悦会自动检测当前页面是否已经适配，如适配则在浏览器右上角显示 
，使用以下三种方式启动：
-
点击浏览器右上角
红色 icon； -
右键选择
简悦 - SimpRead→阅读模式； -
快捷键；（默认为
双击 A)
如何使用（聚焦模式）：
聚焦模式 会自动获取当前鼠标所在的段落并高亮，适合任意页面。
-
在需要高亮的区域，右键选择
简悦 - SimpRead→聚焦模式； -
快捷键；（默认为
A S)
投票：
简悦是一个免费并开源的项目。如果觉得不错，请给我 投票 。这样让更多人了解并受用与 简悦 带来的便利，你的认可是对我最大的鼓励。
下一步：
新版本的功能，大家说的算，目前包含了以下几点：
- 稍后读可以直接发送到
Pocket； - 增强型
聚焦模式； - 自行添加新的站点到
阅读模式； - 自定义主题；
相关链接：
已知的一些问题：
说了一大堆 简悦 的优点，必须要自黑一下，列举几个发现的缺陷：
-
如果正文中包含了一些比较特殊的 Html + CSS 结构，在阅读模式解析下会出现样式错误，如： https://sspai.com/post/38334 无法显示下载链接。
-
很多微信公众号的文章由于结构的不确定性导致很多 “垃圾图片” 无法屏蔽，如： https://mp.weixin.qq.com/s/VH7LfPyEiqAGjf8HhPlGfA
简悦需要你的帮助才能变得更好：
如果遇到了一篇需要使用 阅读模式 的网址却没有适配怎么办？
最后，如果你对 简悦 并不满意，提供给你其它一些同类产品：
Mercury Reader,Just Read,Dyslexia,阅读模式等等，总有一款适合你。 :)
第 1 条附言 · 2017-06-13 09:46:38 +08:00
截至到目前 阅读模式 适配的网址已经是 141 个了，具体有哪些网址 猛击这里 （手动通过 ctrl + F 或 control + F 查找）
如果有未适配的网址，可以提交，详细方法请看 这里
我在 http://next.36kr.com/posts/38183 上有个分享，希望大家给投个票。
或者 Chrome Webstore 上投票 或者 在 Github 上面 Star
希望让更多的人知道这个项目，能帮助更多的人。
第 2 条附言 · 2017-06-14 10:12:50 +08:00
感谢各位 v2 在 Chrome Webstore 的评分，都是 ⭐⭐⭐⭐⭐ 好评！
下个版本 1.0.1 除了修复一些 issues 外，会增加如下功能：
-
阅读进度加入设定，可关闭； -
聚焦模式 点击遮罩后关闭的逻辑，加入设定，可关闭； -
如果有适配的网站，
自动进入阅读模式 的选项，可关闭； -
控制栏自动隐藏加入设定，可关闭；
大家比较关心的 站点编辑器，会增加一个新的功能：
类似
Adblock 订阅阅规则的功能
方便社区维护，以及自己批量添加网站。
这个功能应该会放到 1.0.1 的下个版本中。
第 3 条附言 · 2017-07-23 12:24:50 +08:00
为了方便大家沟通，我在 Telegram 上建立了群，地址 https://t.me/simpread
第 4 条附言 · 2017-09-07 16:41:03 +08:00
简悦 1.0.3 已经发布，详细请看 /t/388202
第 5 条附言 · 2018-10-26 11:35:46 +08:00
由于「七牛」去掉了测试域名，所以很多图都挂了，如果本篇文章对你有所帮助，请手动将
ojec5ddd5.bkt.clouddn.com → sr.ksria.cn
最后，切忌不要在使用类似「七牛」这样的测试域名... 😈
 |
101
zerOlike 2017-06-15 11:09:24 +08:00  1
赞，，6666666
|
 |
102
kenshin OP 右下角的 「控制栏」 与 顶部的 「阅读进度」 在下个版本中都可以设定为不显示。 :)
|
 |
103
panzhc 2017-06-15 12:59:11 +08:00
@kenshin chrome 插件的设定我一般都是一次性配好，后面懒得去改，反而退出是强需求，所以建议一定要有个退出的快捷键。
|
|
104
kenshin OP @panzhc #103
okay，没问题，下个版本就会提供。（ 但暂时不提供自定义，只是将 「常用的 esc 」 加入到快捷键操作。） |
 |
106
malagebidi 2017-06-15 16:15:09 +08:00 via Android 1
右键菜单能禁用吗，强迫症不能忍啊
|
 |
107
sumuu 2017-06-15 16:45:46 +08:00 1
这个牛逼!先赞
|
|
108
kenshin OP @malagebidi #106
下个版本提供，还有比我还强迫症的 :) |
 |
109
witcherhope 2017-06-15 21:23:20 +08:00 1
很贴心的功能, 目前体验良好
|
|
110
kenshin OP @witcherhope
谢谢评价，下个版本重点搞定一些细节的定制化。 |
 |
111
huamingrui 2017-06-15 23:24:29 +08:00 1
本来想提议加个退出快捷键和隐藏顶部进度条, 发现作者已经决定下个版本就实现了, 大赞!
|
|
112
kenshin OP @huamingrui #111
众心所向 😄 |
 |
113
Aether 2017-06-16 10:17:25 +08:00
试用了一下，感觉 Evernote 提供的 Clearly 更好一些。主要的问题有两个：1、红色的按钮太刺眼了，完全削弱了初心； 2、段落宽度控制有问题。现在的排版是自适应的宽度，然而在比较高的分辨率下，阅读会有问题。这部分建议楼主研究一下排版，应该有很多文章讨论中英文文章，适合阅读的最佳宽度、最宽宽度等等。
|
|
114
kenshin OP @Aether #113
感谢回复，我也挺喜欢 Clearly，用它用了很久。 但 Clearly 有些问题，我也在帖子里面说了，你可以看看 #43 #46 楼的截图，以及我刚刚使用 Clearly 的对比，这还不包括 各种更奇葩的 页面结构 或者 含有大段代码的 页面等。 设计良好的页面结构，Clearly 效果  设计良好的页面结构，简悦 效果  设计良好的含有代码的页面结构，Clearly  设计良好的含有代码的页面结构， 简悦  高分辨率下的 2560 * 1600 Clearly  高分辨率下的 2560 * 1600 简悦  另外，你说的 控制栏 在下个版本中可以设定为隐藏；段落问题可以通过 站点编辑器 解决。 |
 |
115
solobat 2017-06-16 11:33:03 +08:00 1
功能挺丰富，希望越做越好
|
|
117
sumuu 2017-06-16 12:08:09 +08:00 1
哥们,报个 Bug!
系统: Linux Minit １ 8.01 MATE 64bit chrome: Version 59.0.3071.104 (Official Build) (64-bit) 在 V2EX 上面选择"使用阅读模式打开此链接" 点击无效 |
|
118
kenshin OP 1
|
 |
119
hester 2017-06-16 14:38:55 +08:00 1
我就是从 Readability -> Clearly -> Mercury Reader -> 简悦 一路走过来的，Readability 虽然不是专门做这个的，本来也不错，后来发现解析越来越差，后来迁移到 印象笔记，但是印象笔记放弃它了... 即便没有放弃，也存在一些问题。
后来又用了一段时间 Mercury Reader，它支持 E 文 的页面还不错，中文就够呛了，而且速度还慢。 之后完全不使用阅读模式类的扩展了，反正也没太好用的，直到发现了简悦。 :) |
 |
121
bookit 2017-06-16 17:11:30 +08:00 1
不错，不过我用 firefox。。
|
 |
123
maemolee 2017-06-16 18:45:33 +08:00 1
很强，火钳刘明。
|
 |
124
zzk819166453 2017-06-17 08:37:07 +08:00 via Android 1
一直在用阅读模式，马克一下，待会用用看有什么不同
|
|
125
kenshin OP @zzk819166453 #124
欢迎试用。 :) |
|
126
kenshin OP 1
 @daimazha @panzhc @makry @BlueWolf @xinhangliu @panzhc @malagebidi @huamingrui 你们想要的功能，下周会发布~ PS：不得不赞一个 Material Design，拯救了像我这样的 Developer ！ |
 |
127
tyhunter 2017-06-17 16:43:36 +08:00 1
棒！另外能否做一下 V2EX 的适配呢？
|
|
128
kenshin OP @tyhunter
v2 已适配，但只限于用 markdown 生成的页面，比如本页，非 markdown 页面不适配。 |
 |
129
siyiye 2017-06-17 22:04:05 +08:00 1
期待有一键分享至 onenote
|
|
130
kenshin OP |
 |
133
29EtwXn6t5wgM3fD 2017-06-18 10:55:38 +08:00 via iPhone
能适配 firefox 么
|
 |
135
NICEghost 2017-06-20 08:54:11 +08:00 via Android 1
哇很喜欢！安装支持！
|
|
136
kenshin OP |
 |
137
treycheng 2017-06-21 16:27:39 +08:00
|
|
138
kenshin OP @treycheng #137
okay ~ 加好后，我会在这里通知你。 我顺便也会把 http://www.ituring.com.cn/article 加到适配列表 不过，你给出的地址似乎只是电子版图书的试读吧？ |
 |
140
wweir 2017-06-21 22:02:00 +08:00
推荐一个拓展，希望能给楼主以后版本的迭代提供一些思路
https://chrome.google.com/webstore/detail/boamfheepdiallipiieadpmnklbhadhc |
|
141
kenshin OP |
在开发简悦的时候就有留意过这个扩展。 |
142
zfree 2017-06-22 12:03:28 +08:00 via iPhone
mark 一下
|
 |
143
pengfei 2017-06-22 14:41:17 +08:00 1
   昨天无意间看到的不知道算不算 bug,第一张第一次进入,第二张选择简悦,代码有点模糊,第三张关闭后,正文字体变大了. 希望有所帮助 |
|
144
kenshin OP @pengfei #143
的确如图所示 这是个 Bug，已报 issues https://github.com/Kenshin/simpread/issues/1 已修复，下个版本（下周）更新后就可以了。 |
|
145
hester 2017-06-26 08:56:40 +08:00 via Android
K 大，什么时候发布新版本？😳
|
|
146
kenshin OP @hester #145
嗯嗯，抱歉晚了，本周内发布~ 由于为了下个版本使用 minimatch 所以改了适配列表中的 URL 规则，所以花费了一些时间，再加上上周比较忙... 😭 PS：上周有几个网址没有增加，下午或者明天会把它们加入到 适配列表。 |
|
147
kenshin OP |
|
148
kenshin OP @daimazha @panzhc @makry @BlueWolf @xinhangliu @malagebidi @huamingrui @hester
大家提的需求已经转化为 1.0.1 发布了，传送门 /t/372576 如有打扰大家，请见谅~ |
|
149
treycheng 2017-07-23 10:52:17 +08:00
@kenshin github 的 markdown 使用聚焦模式阅读， 但是聚焦模式需要点 2 次，快捷键怎么设置的。。 好像不太灵敏
|
|
151
treycheng 2017-07-23 12:13:34 +08:00
@kenshin 抱歉，我知道在这里设置， 应该是我刚刚设置的快捷键和别的冲突了？ 用了两个 shift 快捷键是 ok 的。 还有个问题是，这个快捷键设置在一行里，设置的时候容易误导了...
|
|
153
kenshin OP @treycheng
如果 Chrome 之前装了 cVim 之类的扩展，的确有冲突，暂时还没什么好的解决办法。 我也是装了 cVim，聚焦模式与阅读模式的快捷键分别是：shift shift 与 1 1 快捷键输入框的逻辑做了验证限制以及格式化，所以无论如何输入，最终显示的格式 为 xxx xxx 只要是被适配的网址，用简悦看都不错 😃 😉 |
|
154
kenshin OP |
 |
155
CEBBCAT 2018-01-01 17:03:38 +08:00 via Android
不错，谢谢您
|
|
156
kenshin OP |
Select Language