微信阅读. 电脑版. 标记上一页阅读到的位置. 油猴(Tampermonkey)插件

前言

最近喜欢用微信读书.电脑版进行看书,
可以竖屏的那种,一页可以显示好多内容,
读起来感觉很好哈,
并且感觉读起来都快了很多.
手机或者Kindle翻了好几页才能读完的,
我使用微信电脑版,竖屏翻个三五下完事…

但是也遇上一件事,毕竟一页显示的行数比较多,
每次翻页完,第一件事先找从哪行开始读…
体验就差点意思了.

这个时候想起了油猴,自己可以写一个插件搞一下嘛…

分析微信读书html源码

当时是正在看<天才在左疯子在右>,
浏览器F12,查看html源码,

我本来以为是一些文本之类的…
想的直接将此页的最后一行文本,
用黄色或者红色标记出来.

结果发现是类似下面这样的…↓

<div class="wr_canvasContainer" style=" 800px; height: 6160px;">

<canvas style="position:absolute;left:0;top:8px;800px;height:3989px;" width="800" height="3989">
</canvas>
<canvas style="position:absolute;left:0;top:4012px;800px;height:2141px;" width="800" height="2141">
</canvas>

</div>

两个canvas元素.
可能是为了爬取文本内容搞得一些东西.
文本标颜色的计划出师未捷身先死…
想着在这个canvas上做文章吧…

初版.canvas.涂鸦之旅

先要找到本页的最后一行的高度是多少…
本来以为这个高度估计还需要一番计算.
搜索了浏览器的各种高度…
并且涉及到滚动条…
最后终于找到一个属性↓

//返回文档在窗口垂直方向滚动的像素
window.pageYOffset

有了这个高度,就很好搞了.
开始在画布上涂鸦…

// ==UserScript==
// @name         微信阅读.翻页.标记上一页读的位置
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// @require      http://libs.baidu.com/jquery/2.1.4/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';
    $(document).keydown(function(event){
　　　　if(event.keyCode == 34){
　　　　　　MarkLine();
　　　　}
　　});
    // Your code here...
    function MarkLine(){

        var yHeight = window.pageYOffset + document.body.clientHeight - 200;
        console.log("当前window.pageYOffset..." + window.pageYOffset);
        console.log("当前document.body.clientHeight..." + document.body.clientHeight);

        var dIndex = 0;
        if(yHeight > 3967){
            dIndex = 1;
            yHeight -= 3995;
        }
        var c=document.getElementsByTagName("canvas")[dIndex];

        var ctx=c.getContext("2d");

        // 创建渐变
        var grd=ctx.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");
        // 填充渐变
        ctx.fillStyle=grd;
        ctx.fillRect(600,yHeight,300,1);
    }
})();

局限性
后来打开<剑来>看了一章,发现了问题.
刚开始的几页确实标记了,但是往后就不会再标记…
打开F12瞅了下,发现了问题所在:
一章节如果文本太多的话,前几页确实还是在画布上,
但是后面的就是一些打乱的文本了.

总结就是↓
适合那种一章节文本不是很多,
高度不是很高(大概高度不超过6160的书籍)
比如,<天才在左疯子在右>
如果看<剑来>这样一章节万八千字的,
这种也就适合前两页翻页…

改进.html.涂鸦

后来就想了下,刚开始被canvas牵着鼻子走了,
因为文本是在画布上,就想着在canvas上下功夫,
但是canvas终究是html代码中的…
直接在html中修改不是更好吗?

想到是搞一个div,然后显示为一个横线,主要改style,
来让这个横线显示在想出现的位置…

<div id="mkDiv" style="position:absolute;border: 1px solid red;left:1200px;top:26386px;200px;"></div>

// ==UserScript==
// @name         微信阅读.翻页.记录上一页阅读位置
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// @require      http://libs.baidu.com/jquery/2.1.4/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';
    //新建一个div,用于显示为一条线
    var newDiv = document.createElement("div");
    newDiv.style="position:absolute;border: 1px solid red;left:1200px;top:26386px;200px;";
    newDiv.id="mkLineDiv"
    document.body.appendChild(newDiv);

    $(document).keydown(function(event){
        //翻页按键.Page Down
        if(event.keyCode == 34){
            MarkLine();
        }
    });
    // 标记上一页阅读
    function MarkLine(){
        var htmlHeight = window.pageYOffset + document.body.clientHeight - 40;
        var tempStyle="position:absolute;border: 1px solid red;left:1200px;top:"+(htmlHeight)+"px;200px;";
        console.log(tempStyle);
        $("#mkLineDiv").attr("style",tempStyle);
    }
})();