Tampermonkey初体验，实现帮助文档自动分页

目录

1. 吐个槽
2. 解决思路
3. TPager源码解析

吐个槽

---

作为it人员，需要经常查阅各种文档，许多官方文档写得非常好，但存在一些阅读体验问题。

一般来说，左侧是目录列表，右侧显示内容。

内容篇幅比较长的时候，需要查看下一篇，要一路拉到顶，然后睁大眼睛找到下一篇的标签，让人小小不爽了一把。

让官方去改，是不现实的，那就咱们自己来解决这个问题吧。

解决思路

---

好久之前就听说 Tampermonkey 这个浏览器插件，功能强大，但一直没去看过他到底是强大到哪，试用了下，确实。

先来看看效果

---

• 安装Tampermonkey官网：

https://www.tampermonkey.net/changelog.php?version=4.9&ext=dhdg

支持Chrome，Firefox等各种浏览器，

安装完界面如下：　​

　

• 安装Tammpermonkey脚本 TPager安装地址：http://haikor.oss-cn-shenzhen.aliyuncs.com/software/TPager.js

• 查看分页效果打开dubbo的官方文档http://dubbo.apache.org/zh-cn/docs/user/quick-start.html发现下方多了两个按钮 << 及 >> ，分别跳转到上一篇及下一篇。

TPager源码解析

---

这里只以Dubbo官方文档为例编写第一版插件，简单逻辑如下：

1、获取所有li元素

2、使用menu-item-selected类判断当前选中的标签的位置 idx

3、添加按钮，并绑定按钮点击事件为对 第idx-1或idx+1个li元素的点击操作，从而达到跳转到上一篇及下一篇的目的。

4、因文档是异步渲染的，需要让1-3的操作延迟500毫秒开始。这里有bug，文档渲染太慢的话，会被覆盖成空白页。

// ==UserScript==
// @name         TPager
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动添加下一页按钮，方便按顺序阅读学习文档，防止跳跃性的学习操作!
// @author       teck
// @match        *://dubbo.apache.org/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    function render(){
    document.body.innerHTML=document.body.innerHTML
        +"<div style='position: fixed;border-radius: 40%;width: 60px;height: 30px;left: 40%;bottom: 20px;background-color:#eeeeee;text-align:center;'><a id=teckBack href='javascript:void(0);'>&lt;&lt;</a></div>"
        +"<div style='position: fixed;border-radius: 40%;width: 60px;height: 30px;left: 60%;bottom: 20px;background-color:#eeeeee;text-align:center;'><a id=teckNext href='javascript:void(0);'>&gt;&gt;</a></div>";
    var next = document.getElementById("teckNext");
    var back = document.getElementById("teckBack");
    var idx = 0;
    var items = document.querySelectorAll("li");
    items.forEach(function(item,i){
        if(item.classList.contains("menu-item-selected"))
        {
            idx=i;
        }
    }
    );
    console.log("current idx:"+idx);
    next.onclick = function(){
        if(items.item(idx+1).children[0].href){
        items.item(idx+1).children[0].click();
        }
        else{
            idx=idx+1;
            next.click();
        }
    };
    back.onclick = function(){
        if(items.item(idx-1).children[0].href){
        items.item(idx-1).children[0].click();
        }
        else{
            idx=idx-1;
            back.click();
        }
      };
    }

    setTimeout(render,500);

})();

插件脚本后续优化

---

以上脚本只是简单的先实现对Dubbo官方文档的适配。

后续将对脚本进行泛化，使其更具有通用型

让更多的网址，只要添加域名白名单，就能支持自动分页。