为了达到完美的阅读模式这个小目标 ，我适配了 120+ 个网站，因此诞生了简悦 - 让你瞬间进入沉浸式阅读的 Chrome 扩展
kenshin · kenshin · 2017-06-13 07:19:55 +08:00 · 21524 次点击这是一个创建于 2707 天前的主题，其中的信息可能已经有所发展或是发生改变。
好吧，这应该是我写过最长的标题了，但不是标题党... 同样，也是我业余项目中单个版本开发周期最长的一个项目。
在「信息过载」的当下，如果你有与我一样的 「阅读障碍」，本篇文章会对你所有帮助。
简悦 - 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
最后，切忌不要在使用类似「七牛」这样的测试域名... 😈
 |
1
beyoung 2017-06-13 07:50:30 +08:00  1
赞
|
 |
2
v1024 2017-06-13 07:53:40 +08:00 via iPhone
有点像 Telegram 的 InstantView
|
 |
3
airycanon 2017-06-13 08:11:32 +08:00 1
simptab 用户路过……
|
 |
4
AdamChrist 2017-06-13 08:14:46 +08:00 1
赞赞赞...
|
 |
6
ttycode 2017-06-13 08:42:14 +08:00 via Android 1
大赞！
|
 |
7
duoglas 2017-06-13 08:52:03 +08:00
那么到底是哪些网站呢？
|
 |
8
timothyye 2017-06-13 08:53:22 +08:00 1
不错，用来看简书，效果很棒
|
 |
9
Anybfans 2017-06-13 08:59:38 +08:00
使用了一下。感觉效果不错，可惜 V2EX 上的评论显示不了
 难道最精彩的不应该是评论么 |
 |
10
crisfun 2017-06-13 08:59:50 +08:00 via iPhone
Chrome 上确实没找到特别好的阅读扩展，先标记
|
|
11
Anybfans 2017-06-13 09:00:43 +08:00
还有。竟然没有适配微博
 |
 |
12
shinwood 2017-06-13 09:02:07 +08:00 via iPhone 1
赞！
|
 |
13
xfront 2017-06-13 09:05:41 +08:00 1
已安装
|
 |
14
yipeng 2017-06-13 09:20:13 +08:00 1
建议修改一下这里文档的顺序
和 GitHub 主页的介绍顺序 例如用「投票」代替「安装」真的让人迷糊了 文章看很久想安装却没有一个简单直接的入口 |
 |
15
ariesray 2017-06-13 09:20:27 +08:00 via Android
首先需要一台 mac，😄哈哈
|
 |
16
Travers 2017-06-13 09:22:05 +08:00 1
希望能够针对每个页面有个配置(如 Switchy Omega), 是否自动进入阅读模式，能够自动进入的话体验更流畅。另外目前快捷键进入的话，再次用快捷键应该为退出阅读模式，而不是进入设置页面。既然简单应该设置一次就行了…最后就是进度条跳动不顺滑还是怎么的看起来有点扎眼，感觉有点影响阅读啊。
|
 |
17
kenshin OP @duoglas
一看就没看 Wiki，虽然写的位置比较隐秘... 地址在这里 http://ojec5ddd5.bkt.clouddn.com/website_list.json 因为现在已经 141 个 URL 了，所以没有把名字都提取出来，自己 ctrl + F 或 control + F 查询吧。 ：） |
 |
18
songjiaxin2008 2017-06-13 09:25:05 +08:00 via Android
这个台灯很漂亮啊！
|
 |
19
harry890829 2017-06-13 09:25:23 +08:00 1
很不错的东西，支持下，不过我很少在电脑上看文章，一般都是手机上看得多……
|
|
20
kenshin OP |
|
21
kenshin OP @Anybfans #11
给我地址，我看看，可以再远程同步增加新站，详细 https://github.com/Kenshin/simpread/wiki/%E7%AB%99%E7%82%B9%E7%BC%96%E8%BE%91%E5%99%A8 @timothyye 不仅是简书，很多如果页面结构写的还不错的网址，都可以较完美的呈现，如：爱范儿 少数派 数字尾巴 好奇心 等等。 |
 |
23
vinsa 2017-06-13 09:41:52 +08:00 via iPhone 1
支持，态度优先，必须精品。
|
|
24
kenshin OP @harry890829
感谢支持，可以用简悦在电脑上看文章试试，万一不错呢？ |
 |
25
mlhorizon 2017-06-13 09:52:58 +08:00 1
Good job ！
|
 |
26
adamwang 2017-06-13 09:58:04 +08:00 1
Pretty cool.
|
 |
27
zhongkouwei 2017-06-13 10:03:30 +08:00 1
厉害厉害
|
|
28
kenshin OP |
|
29
zhongkouwei 2017-06-13 10:03:43 +08:00 1
创意真的不错
|
 |
30
nazhenhuiyi294 2017-06-13 10:21:57 +08:00 1
赞.. 创意不错
|
 |
32
jeeve 2017-06-13 10:29:10 +08:00 1
已在浏览迷网站进行了推荐： https://liulanmi.com/zt/12211.html
|
 |
34
server 2017-06-13 10:32:22 +08:00 1
66666,已安装
|
|
36
kenshin OP |
 |
37
ty89 2017-06-13 11:47:37 +08:00
我一直用 safari 的阅读器视图，非常好用，特别对于国内的内容网站，满屏广告图片弹窗乱飞一键变安静
|
|
38
Anybfans 2017-06-13 12:45:37 +08:00
@kenshin #20 微博 url http://weibo.com/u/2709416257/home
|
 |
39
livc 2017-06-13 12:54:02 +08:00
|
|
40
kenshin OP @Anybfans
关于适配的网址，至少可以满足阅读的需求，比如已适配的微博文章 http://weibo.com/ttarticle/p/show?id=2309404117842772526101&simpread_mode=read 你给出的 url 没有需要长时间，大段的阅读内容，所以没有适配。 |
 |
41
LZRng 2017-06-13 12:57:35 +08:00 via iPad
能不能万能适配，我看一下游戏网站尤其需要阅读模式。想 Safari 自带那样的。
|
 |
42
jimages 2017-06-13 13:06:15 +08:00 via iPhone 1
你可以做个规则的文件配置，然后这些文字配置可以交给社区维护，就像是 adblock 一样。订阅规则，实时更新。
|
|
43
kenshin OP |
|
44
kenshin OP |
 |
45
popu111 2017-06-13 13:19:11 +08:00
比较好奇思维导图是用啥画的。。。现在用 XMind 感觉好重
|
|
46
kenshin OP |
 |
47
ansheng 2017-06-13 14:04:16 +08:00
图是用撒化的呢？
|
 |
48
zwpaper 2017-06-13 14:10:56 +08:00
simptab 好久没更新了 😂
|
 |
49
linKnowEasy 2017-06-13 14:17:35 +08:00
 如果不是我的眼睛有问题的话。 简书的代码. 阅读模式下 有虚影？？？ |
 |
50
YvesX 2017-06-13 14:18:35 +08:00
进入阅读模式再退出，字体不会恢复
|
 |
51
yinxingren 2017-06-13 14:20:22 +08:00 1
真的很棒~
|
|
52
kenshin OP 2
|
 |
53
daimazha 2017-06-13 14:31:02 +08:00
可以设置某些站点自动进入阅读模式嘛。
|
|
54
kenshin OP 1
@zwpaper
的确好久没更新了，在本周内准备搞定几个小修复。 从去年开始，基本上 业余时间的导向 SimpTab → gnvm → SimpRead （ 这货是从 去年 12 月份开始，一直到现在...） |
|
55
kenshin OP 1
@daimazha
其实原本有这个自动进入阅读模式的功能，但毕竟 阅读模式 不能 100% 满足任何完整，所以为了体验性暂时没有加，但可以通过，右键 → 简悦 → 使用阅读模式打开此链接 的方式。 @linKnowEasy 是的，因为  如果觉得阴影不爽的话，下个版本提供自定以 Theme 功能。 @yinxingren 谢谢~ |
 |
56
bayernmunchen 2017-06-13 14:47:27 +08:00 via Android 1
非常赞 已收藏
|
 |
57
taurenshaman 2017-06-13 15:11:35 +08:00 1
~\(≧▽≦)/~
已经 star 已经收录 json： http://lore.chuci.info/taurenshaman/json/222f672bc25a4a73a32eb40f61ead98b |
 |
58
dwlinux 2017-06-13 16:08:37 +08:00 1
体验了一下，很赞！！
|
|
59
kenshin OP |
 |
60
setsunakute 2017-06-13 17:22:21 +08:00 1
非常棒,已 star ^_^
|
|
61
airycanon 2017-06-13 17:43:59 +08:00
提个小问题，在本页面开启 SimpRead 之后，Github 的 那一排 Badges 排版变成这样了。
https://ooo.0o0.ooo/2017/06/13/593fb3cc0ce69.png |
 |
62
Showfom 2017-06-13 17:50:54 +08:00 via iPhone 1
匹配了那么多网站！赞一个
|
 |
63
panzhc 2017-06-13 17:51:53 +08:00
退出的方式不是很爽，最好点一次进入阅读模式，再点一次退出，AS 快捷键进入，再按 AS 或者 ESC 快捷键退出 @kenshin
|
|
64
kenshin OP |
|
65
kenshin OP |
 |
66
hester 2017-06-13 20:44:43 +08:00 via Android 1
太棒的创意，从上午开始用，根本 “停不下来”。
|
 |
67
AASW2ss 2017-06-13 21:22:20 +08:00 1
居然有这么棒的扩展
大爱聚焦模式 五星啦 |
 |
68
guyskk 2017-06-13 21:57:11 +08:00 1
楼主要 purepage.org，赠送。我囤了一年没想好拿来做什么：(
|
 |
69
tf141 2017-06-13 22:04:38 +08:00
360 浏览器刚更新了 9.0，好像也有阅读模式了
http://i4.piimg.com/1949/f4bba9daaa722e94.jpg |
|
70
tf141 2017-06-13 22:07:23 +08:00
|
 |
72
metrotiger 2017-06-13 22:58:20 +08:00 1
还的来得及用，先去安装然后点了个五星
|
 |
73
codehz 2017-06-13 22:59:45 +08:00 1
 我建议完善一下英文翻译。。。（没别的原因，就是中英文混杂看着不好看。。。。） |
 |
74
quericy 2017-06-13 23:16:54 +08:00 1
赞，希望增加配置界面，能设置按站点 /url 模式匹配自动进入阅读模式的功能~
|
 |
75
Yien 2017-06-13 23:26:55 +08:00 1
good good good
非常赞👍 |
 |
76
mohoumk2 2017-06-13 23:28:46 +08:00 via Android 1
马住
|
 |
77
makry 2017-06-13 23:30:08 +08:00 1
很赞~
1.增加用户自行配置网站规则 2.返回快捷键&稍后读快捷键 3.自动进入阅读模式 |
 |
78
Biggoldfish 2017-06-13 23:47:06 +08:00 via iPad 1
很用心，已 star 支持
|
 |
79
crispgm 2017-06-14 00:47:44 +08:00 1
Pretty awesome!
|
|
80
crispgm 2017-06-14 00:51:04 +08:00
用了下提个意见：inline code highlight 字体太小了 就是对应 markdown `hello, world` 这种语法的
|
 |
81
XiaoFaye 2017-06-14 06:25:55 +08:00
为生活奔波的人哪有什么时间阅读。。。
|
|
82
kenshin OP |
 |
83
mejinke 2017-06-14 08:59:31 +08:00
跟 safari 自带的阅读比，怎么样？
|
|
85
kenshin OP 1
|
 |
86
onlyice 2017-06-14 14:59:09 +08:00 1
简直太赞了！作者接受捐赠吗？
另外同 #80，inline code highlight 字体太小了 |
|
87
kenshin OP @onlyice
谢谢评价~ 暂时没有考虑过捐赠，但目前这个项目还能在我正常的情况下持续更新，或许我会上线个 支付宝 /微信 啥的 「请杯咖啡」 :) |
|
88
kenshin OP |
|
89
kenshin OP |
|
90
guyskk 2017-06-14 16:22:25 +08:00
@kenshin #89 purepage.org 放在 namesilo 上，10 月份到期，renew 要 10$，怎么联系你呢，我把 transfer authorization code 发给你
|
 |
91
treycheng 2017-06-14 17:51:07 +08:00
期待适配豆瓣阅读等这类在线阅读器....
|
 |
93
Wy4q3489O1z996QO 2017-06-14 21:32:48 +08:00
@kenshin 能适配 dapenti.com 就好了，每天都看，排版差，广告多，但只能忍
|
 |
95
pwf 2017-06-14 22:13:05 +08:00 1
great!
|
 |
96
BlueWolf 2017-06-14 23:16:14 +08:00 1
希望能增加 esc 退出阅读模式的快捷键
|
 |
99
xinhangliu 2017-06-15 10:44:32 +08:00 via Android 1
感谢作者，扩展很棒，个人觉得左边的按钮有点抢眼，很低调点就更好了
|
|
100
xinhangliu 2017-06-15 10:45:34 +08:00 via Android
噗，说错了，是右边
|
Select Language