准备开发一款将网页指定区域内容保存成 EPUB 的 Chrome 扩展

前言

记得我以前很喜欢追 infoQ 的新闻和技术文章,但是现在却几乎隔一段时间只进去扫一扫标题。不是我觉得没兴趣懒得点进去,很多时候我都把文章加到 Goole Keep 里边去了,但是累计加了几十数百个文章条目后来都几乎没点进去看过。原因其实是我发现呆坐在电脑前看网页文章确实不那么随心所欲,特别是技术文章,就像有多动症似的赖不住性子。

当然我这段话的意思不是表示我用电脑已经完全看不下去稍微长篇一点的技术文章了,只是它确实有影响我静心阅读的元素存在,并且我有个一个更好的想法。

用阅读器

我可以将网页上的内容放在阅读器上阅读,其实很简单啊?很多阅读器都可以将网页内容推送到阅读器,作为事后阅读不是很完美吗?
然而我使用的 IReader 并不如此。它虽然支持网页推送,但是它所用的技术太烂。如果你对它(官方微信号)发一个链接,服务端会抓取链接的内容,然后将文字保存成下来推送到设备中。这造成什么问题呢?

  1. 抓取后的网页没有 CSS 没有图片的支撑,只有大小不一的文字,排版简直惨不忍睹
  2. 网页的“框架”内容(例如本博客的页面顶部)造成了需要翻好几页才能看到有效内容的情况

所以这功能在我看来是几乎没法用的。于是我便有了这个计划,开发一款浏览器扩展,支持手动选择网页区域并保存成支持图片的 epub 格式。使用起来类似于 ABP 选择屏蔽区域的方式:

并且会尽可能的对网站支持一键保存。意思就是假设识别到访问的是知乎某个回答页,只要点击一下扩展图标便自动选取回答区域保存。
要做到这样,可以记录用户选取网站区域时得到的网页节点位置(跟具体内容无关),上传到服务端。这样逐渐的支持一键保存的网站便会越来越多。

例如截图中的知乎页面的选择区域的节点 class 属性是 ContentItem AnswerItem,如果有人选取了一个区域那么这个样式(包括更多节点属性)会被添加到服务端让所有人共享。那么下次需要保存页面区域时,仅需要点击一下扩展图标,扩展就知道该选择哪个区域保存了。

最后

至少我个人还是挺需要这个工具的,目前也没有什么替代品能做到,只好自己开发了。