☰

Weread-Progress-Show

在网页版微信读书右下角显示当前阅读进度

  1. // ==UserScript==
  2. // @name         Weread-Progress-Show
  3. // @namespace    https://github.com/ralix/Weread-Progress-Show
  4. // @version      1.0.1
  5. // @description  在网页版微信读书右下角显示当前阅读进度
  6. // @match        https://weread.qq.com/*
  7. // @grant        GM_addStyle
  8. // @license      MIT
  9. // ==/UserScript==
  10.  
  11. var currentChapterRatio=0;
  12. var nextChapterRatio=0;
  13. var result=0;
  14. var count=0;
  15.  
  16. (function () {
  17.     'use strict';
  18.  
  19.     GM_addStyle('#progressBox {position: fixed; bottom: 60px; right: 5px; width: 50px; \
  20.     height: 30px; \
  21.     font-size: xx-small; \
  22.     padding: 0px; \
  23.     align-items: center; \
  24.     align-content: center; \
  25.     text-align: center; \
  26.     display: flex; \
  27.     justify-content: center; \
  28.     background-color: #6b6b6b; \
  29.     color: #fff; \
  30.     border-radius: 5px;\ }')
  31.  
  32.     //console.log("start");
  33.  
  34.     window.addEventListener('load', function() {
  35.     //console.log("loaded");
  36.     // 在页面加载完成后执行的操作
  37.         updateProgressBox();
  38.     });
  39.  
  40.     window.addEventListener('keydown', function() {
  41.     //console.log("loaded");
  42.     // 在页面加载完成后执行的操作
  43.         updateProgressBox();
  44.     });
  45.  
  46.     // Listen for scroll events
  47.     window.addEventListener('scroll', updateSrollRatio);
  48.  
  49.     // watch chapter change
  50.     watchChapterChange();
  51.  
  52.  
  53.  
  54. })();
  55.  
  56. function watchChapterChange(){
  57.  
  58.         // 查找具有class="chapterItem"的元素
  59.     //let chapterItems = document.getElementsByClassName("chapterItem");
  60.     let chapterItems = document.querySelectorAll(".readerCatalog_list_item");
  61.  
  62.     // 创建一个 MutationObserver 实例
  63.     var observer = new MutationObserver(function(mutations) {
  64.       mutations.forEach(function(mutation) {
  65.         // 检查属性变化的类型
  66.         if (mutation.type === "attributes") {
  67.           // 属性发生变化。 evoke when chapter changes.
  68.           updateChapterRatio(chapterItems);
  69.           //console.log("属性发生变化：" + mutation.attributeName);
  70.         }
  71.       });
  72.     });
  73.  
  74.     // 配置观察选项
  75.     var config = { attributes: true };
  76.  
  77.     // 开始观察目标元素列表中的每个元素
  78.     for (var i = 0; i < chapterItems.length; i++) {
  79.       observer.observe(chapterItems[i], config);
  80.     }
  81.  
  82. }
  83.  
  84. //evoke when sroll changes
  85. function updateSrollRatio(){
  86.   const scrollPosition = window.scrollY;
  87. //  console.log("scrollPosition: "+scrollPosition);
  88.   const maxScrollPosition = document.documentElement.scrollHeight - window.innerHeight;
  89. //  console.log("maxScrollPosition: "+maxScrollPosition);
  90.  
  91.   let scrollRatio;
  92.   let totalRatio;
  93.  
  94.   if(maxScrollPosition == 0){
  95.     //只有一页
  96.   }
  97.   else {
  98.     scrollRatio = scrollPosition / maxScrollPosition;
  99.     totalRatio = (nextChapterRatio - currentChapterRatio) * scrollRatio + currentChapterRatio;
  100.     result = totalRatio.toFixed(1);
  101.   }
  102.   //console.log("scrolled");
  103.   updateProgressBox();
  104.  
  105. }
  106.  
  107.  
  108. function updateChapterRatio(chapterItems) {
  109.  
  110.     let chapterTotal = chapterItems.length;
  111.  
  112.     for (let i = 0; i < chapterTotal; i++) {
  113.         let className = chapterItems[i].className;
  114.         if (className.includes("readerCatalog_list_item_selected")) {
  115.             currentChapterRatio = parseFloat(((i / chapterTotal) * 100).toFixed(1));
  116.             nextChapterRatio = parseFloat((( (i+1) / chapterTotal) * 100).toFixed(1)) ;
  117.  
  118.             result=currentChapterRatio;
  119.             //console.log("chapter changed");
  120.             updateProgressBox();
  121.         }
  122.     }
  123. }
  124.  
  125.  
  126. //show the percentage result
  127. function updateProgressBox(){
  128.  
  129.     let progressBox = document.querySelector("#progressBox");
  130.  
  131.     if (!progressBox){ //not found, then create.
  132.         progressBox = document.createElement('div');
  133.         progressBox.setAttribute('id', 'progressBox');
  134.         document.body.appendChild(progressBox);
  135.     }
  136.     //update
  137.     progressBox.innerHTML = result + "%";
  138.  
  139.  
  140.     let footerAddon = document.querySelector('#footerAddon');
  141.     if (!footerAddon) {
  142.         footerAddon = document.createElement('div');
  143.         footerAddon.setAttribute('id', 'footerAddon');
  144.         footerAddon.setAttribute('style',"font-size:large");
  145.         //console.log(footerAddon);
  146.     }
  147.     //update
  148.     footerAddon.innerHTML = "<p>Progress Now:</p> <p>"+ result + "% </p>";
  149.  
  150.  
  151.  
  152.     let footer = document.querySelector('.readerFooter');
  153.     if (footer){
  154.         footer.setAttribute('style',"padding:300px 100px");
  155.         footer.appendChild(footerAddon);
  156.         console.log("footer added");
  157.  
  158.     }
  159.     else{
  160.         console.log("footer is null."+ count);
  161.     }
  162.     //count++;
  163.  
  164.  
  165. }