前言

最近喜歡用微信讀書.電腦版進行看書,
可以豎屏的那種,一頁可以顯示好多內容,
讀起來感覺很好哈,
并且感覺讀起來都快了很多.
手機或者Kindle翻了好幾頁才能讀完的,
我使用微信電腦版,豎屏翻個三五下完事...

但是也遇上一件事,畢竟一頁顯示的行數比較多,
每次翻頁完,第一件事先找從哪行開始讀...
體驗就差點意思了.

這個時候想起了油猴,自己可以寫一個插件搞一下嘛...

分析微信讀書html源碼

當時是正在看<天才在左瘋子在右>,
瀏覽器F12,查看html源碼,

我本來以為是一些文本之類的...
想的直接將此頁的最后一行文本,
用黃色或者紅色標記出來.

結果發現是類似下面這樣的...↓

<div class="wr_canvasContainer">

<canvas width="800" height="3989">
</canvas>
<canvas 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"></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);
    }
})();

結尾

其實,關于翻頁還需要標記上一頁讀的位置,
有人可能覺得多此一舉,
每次翻頁后,接著從這一頁的最上面讀就是了唄...
我根據自己的體驗,總結了2點我覺得需要更改的.

1. 如果這一章節,有2.5頁,
微信讀書電腦版,當你翻到最后一頁的時候,
最后一頁不是顯示2.0頁~2.5頁的內容,
而是顯示1.5頁~2.5頁的內容.

2. 例如,30行為一頁的內容,一章節一共2頁,
我翻到第二頁的時候,直接顯示31行,
我總是感覺30行與31行之間還有內容是未讀的...
總是在按一下"↑"往上翻一行確認下....

總之,個人習慣,因人而異.

最后上一張,標記后的章節...(√,你沒看錯,就是那一個紅色的橫線...)

總結

以上是生活随笔為你收集整理的微信阅读. 电脑版. 标记上一页阅读到的位置. 油猴(Tampermonkey)插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。