Open wangpin34 opened 5 years ago
老婆总是在小网站看网文，这些网站的排版和配色惨不忍睹，而且有大量的浮动广告，非常影响阅读体验。于是她会央求我将网文整个下载下来，这通常都要去折腾一下爬虫程序。有一天，我逆向思维了一下：与其费力下载网文，何不直接做一个阅读器来定制界面呢？本质上老婆只是想要舒服的阅读体验罢了。
于是接下来的几天我折腾了 Cordova 的内置 iframe，内置 browser，发现都很难满足需求。于是，我转而将目标瞄准了两个方向：
这篇文章讲述开发这个 extension，即 purify reader 的故事。
首先我使用 create-react-app 创建了一个空项目，eject，改动了「webpack 相关的配置」1,2（主要是去除build 文件的 hash），添加 minifest.json 和各种尺寸的图标。
界面相关的问题比较简单（对我来说），比较有挑战性的题目是如何准确的选取正文内容。我参考了stackoverflow 的一些回答，总结了以下的规则，优先级从高到低：
最后将选取到的 html 内容插入 purify 的根节点。
<div id="purify-reader"> <!-- 正文 html --> </div>
按照以上规则我构建了第一版「选正文」函数。亲测对笔趣阁有效。
第一版「选正文」函数在很多个人博客上效果并不理想，我急切的想要找到更优秀的算法来弥补这一块短板。这天在家里无聊的看小说，不料又想到这个问题。原来这个小问题已经成了我的心病。既然如此，那就再努力找一找吧。于是捧着手机一顿搜索，找到了这个 python-readability。它的功能很单一，就是用来解析 html 文档的主要文字内容，即正文。按图索骥，我成功的找到 js 的实现：readability。
至此 purify 的第一块也是最亟需提升的短板被补上，完全集成 readability 之后我立刻找到之前第一版测试效果不佳的博客们进行再次的测试，所有正文都准确的提取出来了。惊喜之后是略带敬畏的思考，这个库是如何做到的呢？也许 8 月底我可以得到一个满意的答案。
上面两个版本结束之后，purify 已经可以满足基本的需求了，接下来是亟需解决的「样式」问题。
第一点比较简单，我将 purify 的 div 容器放在 body 之后，然后隐藏 body。
body { display: none; }
第二点，起初我想要采用的办法是 disable 原网页的 css（包括外部和内容样式）。
Array.from(document.querySelectorAll('link[rel=stylesheet]')).forEach(function(i){i.disabled=true}) Array.from(document.querySelectorAll('style')).forEach(function(i){i.disabled=true})
问题是难以区分哪些是我的 extension 插入的 style（虽然我使用的 styled-components 所生成的 style 标签上会有 style version 可供 selector），哪些是原网页的。 所以还是得回归到最基础的概念，如何管理 css style 的优先级。我的办法是在 purify 容器里的每个 dom 标签上添加一个新的 class：purify，从而成功的覆盖原有的 css。也许未来我应该再移除原有的 id，name，class 属性，并在每个 purify 的 style value 后面添加 important，这个留待后续再优化吧。
解锁了很多以前不了解或者不够重视的知识，如：
<input disabled .../>
以及启示： 通过爬虫将文章下载到手机，用最喜欢的app阅读，仍然在各方面吊打阅读器插件。毕竟，手机阅读的各种体验如滑动/点击翻页，从简便和灵敏上，都远胜过 pc 网页上的点击翻页，更何况通过我们还要忍受网页的缓慢加载。所以，接下来我的计划是： 1 完善小说爬虫； 2 通过阅读源码来深入手机 reader 这个领域；
引子
老婆总是在小网站看网文，这些网站的排版和配色惨不忍睹，而且有大量的浮动广告，非常影响阅读体验。于是她会央求我将网文整个下载下来，这通常都要去折腾一下爬虫程序。有一天，我逆向思维了一下：与其费力下载网文，何不直接做一个阅读器来定制界面呢？本质上老婆只是想要舒服的阅读体验罢了。
于是接下来的几天我折腾了 Cordova 的内置 iframe，内置 browser，发现都很难满足需求。于是，我转而将目标瞄准了两个方向：
这篇文章讲述开发这个 extension，即 purify reader 的故事。
第一版
首先我使用 create-react-app 创建了一个空项目，eject，改动了「webpack 相关的配置」1,2（主要是去除build 文件的 hash），添加 minifest.json 和各种尺寸的图标。
界面相关的问题比较简单（对我来说），比较有挑战性的题目是如何准确的选取正文内容。我参考了stackoverflow 的一些回答，总结了以下的规则，优先级从高到低：
最后将选取到的 html 内容插入 purify 的根节点。
按照以上规则我构建了第一版「选正文」函数。亲测对笔趣阁有效。
认识 readability 和 第二版
第一版「选正文」函数在很多个人博客上效果并不理想，我急切的想要找到更优秀的算法来弥补这一块短板。这天在家里无聊的看小说，不料又想到这个问题。原来这个小问题已经成了我的心病。既然如此，那就再努力找一找吧。于是捧着手机一顿搜索，找到了这个 python-readability。它的功能很单一，就是用来解析 html 文档的主要文字内容，即正文。按图索骥，我成功的找到 js 的实现：readability。
至此 purify 的第一块也是最亟需提升的短板被补上，完全集成 readability 之后我立刻找到之前第一版测试效果不佳的博客们进行再次的测试，所有正文都准确的提取出来了。惊喜之后是略带敬畏的思考，这个库是如何做到的呢？也许 8 月底我可以得到一个满意的答案。
disable CSS 的各种尝试
上面两个版本结束之后，purify 已经可以满足基本的需求了，接下来是亟需解决的「样式」问题。
第一点比较简单，我将 purify 的 div 容器放在 body 之后，然后隐藏 body。
第二点，起初我想要采用的办法是 disable 原网页的 css（包括外部和内容样式）。
问题是难以区分哪些是我的 extension 插入的 style（虽然我使用的 styled-components 所生成的 style 标签上会有 style version 可供 selector），哪些是原网页的。 所以还是得回归到最基础的概念，如何管理 css style 的优先级。我的办法是在 purify 容器里的每个 dom 标签上添加一个新的 class：purify，从而成功的覆盖原有的 css。也许未来我应该再移除原有的 id，name，class 属性，并在每个 purify 的 style value 后面添加 important，这个留待后续再优化吧。
总结
解锁了很多以前不了解或者不够重视的知识，如：
以及启示： 通过爬虫将文章下载到手机，用最喜欢的app阅读，仍然在各方面吊打阅读器插件。毕竟，手机阅读的各种体验如滑动/点击翻页，从简便和灵敏上，都远胜过 pc 网页上的点击翻页，更何况通过我们还要忍受网页的缓慢加载。所以，接下来我的计划是： 1 完善小说爬虫； 2 通过阅读源码来深入手机 reader 这个领域；
资源