Greasy Fork is available in English.

微信读书 VIP会员版

可视化面板，轻松修改宽度、字体、字体颜色、背景颜色、背景图片，另有自动滚动(加速/减速/暂停/继续)，自动翻页，隐藏头部标题。字体、背景颜色非常方便拓展增加

// ==UserScript==
// @name         微信读书 VIP会员版
// @version      2.2.3
// @license MIT
// @namespace    https://greasyfork.org/zh-CN/users/1272865
// @description  可视化面板，轻松修改宽度、字体、字体颜色、背景颜色、背景图片，另有自动滚动(加速/减速/暂停/继续)，自动翻页，隐藏头部标题。字体、背景颜色非常方便拓展增加
// @author       brewin
// @match        https://weread.qq.com/web/reader/*
// @require      https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js
// @icon         https://weread.qq.com/favicon.ico
// @grant        GM_log
// @grant        GM_addStyle
// @grant        unsafeWindow
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_openInTab
// @grant        GM_download
// @grant        GM_setClipboard
// @grant        GM_notification
// @grant        GM_xmlhttpRequest
// @grant        GM_registerMenuCommand
// @connect      pixabay.com
// @connect      w3school.com.cn
// ==/UserScript==

//GM_addStyle("*{font-family: TsangerJinKai05 !important;}");
//GM_addStyle(".renderTargetContainer .wr_canvasContainer{position:inherit}");
GM_addStyle(
  ".readerControls{margin-left: calc(50% - 200px) !important;margin-bottom: -28px !important;}"
);
GM_addStyle(
  ".dialog {  display: none;  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 400px;  height: 600px;  background-color: #f9f9f9;  padding: 2px;  border: 1px solid #ffffff;  border-radius: 10px;   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  z-index: 1000;   }.dialog-header {  cursor: move;  user-select: none;  padding: 5px;  height: 60px;   background-color: #007bff;  color: #fff;  position: relative;   border-top-left-radius: 10px;   border-top-right-radius: 10px;   font-size: 45px;   font-weight: bold; }.dialog-content {  padding: 10px;  height: 500px;  color: #000;  background-color: #f0f0f0;  border-bottom-left-radius: 10px;   border-bottom-right-radius: 10px; }.close {  font-size: 20px;  font-weight: bold;  cursor: pointer;  color: #fff;  position: absolute;  top: 5px;   right: 5px; }"
);
GM_addStyle(
  ".next-page-tip {  display: none;  position: fixed;  bottom: 0%;  right: 10%;   width: 120px;  height: 40px;  font-size: 25px;color:#000;  background-color: #fff;  padding: 2px;  border: 1px solid grey;  border-radius: 10px;   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  z-index: 1000;    }"
);
GM_addStyle(
  ".next-page-tip-progress {    width: 80px; background-color: #d8e2c8;  }"
);
GM_addStyle("#dialog_content {  overflow-y: auto; }");
GM_addStyle(
  ".font-show-area-btn {font-size: 25px;color:#A52A2A;  border:2px #c4c4c4 solid ;margin:5px}"
);
GM_addStyle(".font-show-area-font-absence {color:grey;}");
GM_addStyle(
  ".font-color-show-area-btn{font-size: 20px;  border:2px #c4c4c4 solid ;margin:5px}"
);
GM_addStyle(".font-color-show-area-label{font-size: 30px;margin:5px}");

GM_addStyle(
  ".background-color-show-area-btn{font-size: 20px;  border:2px #c4c4c4 solid ;margin:5px}"
);
GM_addStyle(
  ".custom-background-color-show-area-btn{font-size: 12px;  border:1px #c4c4c4 solid ;padding:5px}"
);
GM_addStyle(
  ".width-show-area-btn{font-size: 12px;  border:1px #c4c4c4 solid ;margin:5px}"
);
GM_addStyle(".background-color-show-area-label{font-size: 30px;margin:5px}");
GM_addStyle(
  ".auto-scroll-show-area-btn{ border:1px #c4c4c4 solid ;margin:5px}"
);

$(window).on("load", async function () {
  "use strict";
  ///////////////////////////////////////////////////// 全局变量和菜单指令 /////////////////////////////////////////////////////
  //可选字体
  var myfonts = [
    {
      name: "默认",
      font: "PingFang SC,-apple-system,SF UI Text,Lucida Grande,STheiti,Microsoft YaHei,sans-serif"
    },
    { name: "楷体", font: "楷体" },
    { name: "宋体", font: "宋体" },
    { name: "黑体", font: "黑体" },
    { name: "苍耳今楷", font: "TsangerJinKai05" },
    { name: "字魂白鸽天行体", font: "字魂白鸽天行体" },
    { name: "霞鹜文楷", font: "霞鹜文楷" },
    { name: "汉仪空山楷", font: "汉仪空山楷" },
    { name: "寒蝉正楷体", font: "ChillKai" },
    { name: "三极行楷简体", font: "三极行楷简体-粗" },
    { name: "演示悠然小楷", font: "演示悠然小楷" }
  ];
  //可选背景图片
  var background_image_urls = [
    "https://www.w3school.com.cn/i/eg_bg_02.gif",
    "https://www.w3school.com.cn/i/eg_bg_03.gif",
    "https://www.w3school.com.cn/i/eg_bg_04.gif",
    "https://cdn.pixabay.com/photo/2016/12/18/02/35/paper-1914901_1280.jpg",
    "https://cdn.pixabay.com/photo/2017/09/06/11/41/vintage-2721099_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/04/15/21/39/paper-1332019_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/12/18/02/41/background-1914910_1280.jpg",
    "https://cdn.pixabay.com/photo/2015/06/02/15/31/watercolor-795162_1280.jpg",
    "https://cdn.pixabay.com/photo/2017/09/06/11/41/vintage-2721100_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/04/15/21/34/paper-1332008_1280.jpg",
    "https://cdn.pixabay.com/photo/2016/04/15/21/37/paper-1332013_1280.jpg",
    "https://cdn.pixabay.com/photo/2017/11/07/10/22/paper-2926300_1280.jpg",
    "https://cdn.pixabay.com/photo/2018/02/16/20/46/pattern-3158572_1280.jpg",
    "https://cdn.pixabay.com/photo/2014/11/20/20/30/paper-539779_1280.jpg",
    "https://cdn.pixabay.com/photo/2019/11/02/15/21/map-4596619_1280.jpg",
    "https://cdn.pixabay.com/photo/2017/02/04/11/33/background-2037176_1280.jpg",
    "https://cdn.pixabay.com/photo/2015/09/13/11/00/vintage-937977_1280.jpg",
    "https://www.w3school.com.cn/i/eg_bg_01.gif"
  ];
  //自定义常驻背景颜色
  var mybackground_colors = [
    { name: "浅绿", color: "#d8e2c8" },
    { name: "茶色", color: "#d2b48c" },
    { name: "淡绿", color: "#eefaee" },
    { name: "明黄", color: "#ffffed" },
    { name: "灰绿", color: "#d8e7eb" },
    { name: "浅蓝", color: "#e9faff" },
    { name: "草绿", color: "#cce8cf" },
    { name: "红粉", color: "#fcefff" },
    { name: "米黄", color: "#f5f5dc" },
    { name: "暗银", color: "#c0c0c0" },
    { name: "黑绿", color: "#00b800" },
    { name: "浅黄", color: "#f5f1e8" },
    { name: "浅灰", color: "#d9e0e8" },
    { name: "深灰", color: "#555555" },
    { name: "漆黑", color: "#111111" },
    { name: "淡青", color: "#839496" },
    { name: "深青", color: "#002b36" }
  ];

  ///////////////////////////////////////////////////// 对话框 /////////////////////////////////////////////////////
  $("body").append(`
<div id="dialog" class="dialog">
  <div class="dialog-header">
    <span>功能</span>
      <span class="close" id="close_dialog">&times;</span>
  </div>
  <div id="dialog_content" class="dialog-content">
  <div class="font-style">
  <h3>宽度:</h3>
  <div id="width_show_area">
  </div>

    <h3>字体:</h3>
    <div id="font_show_area">
    </div>

    <h3>字体颜色:</h3>
    <div id="font_color_show_area">
    </div>

    <h3>背景颜色:</h3>
    <div id="background_color_show_area">
    </div>

    <h3>背景图片:</h3>
    <div id="background_image_show_area">
    </div>

    <h3>自动滚动:</h3>
    <div id="auto_scroll_show_area">
    </div>
  </div>
  </div>
</div>
    `);
  $("body").append(`
    <div id="next_page_tip" class="next-page-tip">

     <div class="next-page-tip-progress">
即将翻页
    </div>
    </div>
        `);

  var control_function_btn_div =
    "<button id='open_dialog' class='readerControls_item' style='color:#6a6c6c;cursor:pointer;'>功能</button>";
  $(".readerControls").append(control_function_btn_div);

  $("#open_dialog").click(function () {
    $("#dialog").fadeIn();
  });

  $("#close_dialog").click(function () {
    $("#dialog").fadeOut();
  });

  let is_dragging = false;
  let offset_x, offset_y;

  $(".dialog-header").mousedown(function (e) {
    is_dragging = true;
    offset_x = e.clientX - $("#dialog").offset().left;
    offset_y = e.clientY - $("#dialog").offset().top;
  });

  $(document).mousemove(function (e) {
    if (is_dragging) {
      $("#dialog").offset({
        top: e.clientY - offset_y,
        left: e.clientX - offset_x
      });
    }
  });

  $(document).mouseup(function () {
    is_dragging = false;
  });

  ///////////////////////////////////////////////////// 字体 背景 /////////////////////////////////////////////////////

  ///////////////////////////////////////////////////// 字体
  //初始化对话框全部字体缩图
  function initDialogFontShowArea() {
    for (let i = 0; i < myfonts.length; i++) {
      var font_btn = document.createElement("button");
      font_btn.textContent = myfonts[i].name;
      font_btn.style.fontFamily = myfonts[i].font;
      font_btn.classList.add("font-show-area-btn");
      if (!isSupportFontFamily(myfonts[i].font)) {
        font_btn.classList.add("font-show-area-font-absence");
      }

      font_btn.addEventListener("click", function () {
        changeFont(i);
      });
      $("#font_show_area").append(font_btn);
    }
    var bak = GM_getValue("font_index", -1);
    changeFontSelectedBorder(bak);
  }

  /* 改变字体
    index：使用字体序号
    */
  function changeFont(index) {
    var font = myfonts[index].font;
    var font_style_str = `*{font-family: ${font} ;}`;
    console.log("切换字体-> " + index + " font:" + font);
    GM_addStyle(font_style_str);
    GM_setValue("font_index", index);
    changeFontSelectedBorder(index);
    afterFontSelected();
    // location.reload();
  }
  //改变选中字体边框
  function changeFontSelectedBorder(index) {
    var buttons = $("#font_show_area button");
    for (var i = 0; i < buttons.length; i++) {
      if (i == index) {
        buttons[i].style.border = "2px solid silver";
      } else {
        buttons[i].style.border = "none";
      }
    }
  }
  //改变选中字体后对话框字体保持原字体
  function afterFontSelected() {
    var buttons = $("#font_show_area button");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].style.fontFamily = `${myfonts[i].font} !important`;
    }
  }

  /* 判断用户操作系统是否安装某字体
  https://www.zhangxinxu.com/wordpress/2018/02/js-detect-suppot-font-family/
  */
  var isSupportFontFamily = function (f) {
    if (typeof f != "string") {
      return false;
    }
    var h = "Arial";
    if (f.toLowerCase() == h.toLowerCase()) {
      return true;
    }
    var e = "a";
    var d = 100;
    var a = 100,
      i = 100;
    var c = document.createElement("canvas");
    var b = c.getContext("2d");
    c.width = a;
    c.height = i;
    b.textAlign = "center";
    b.fillStyle = "black";
    b.textBaseline = "middle";
    var g = function (j) {
      b.clearRect(0, 0, a, i);
      b.font = d + "px " + j + ", " + h;
      b.fillText(e, a / 2, i / 2);
      var k = b.getImageData(0, 0, a, i).data;
      return [].slice.call(k).filter(function (l) {
        return l != 0;
      });
    };
    return g(h).join("") !== g(f).join("");
  };

  ///////////////////////////////////////////////////// 字体颜色
  $("#font_color_show_area").append(`
  <input type="color" id="font_color" name="font_color" value="#ffffff" />
  <label for="font_color" class="font-color-show-area-label"></label>
  <button class="font-color-show-area-btn" id="font_color_open_btn">开启</button><button class="font-color-show-area-btn" id="font_color_close_btn">关闭</button>
    `);
  $("#font_color").on("input", function () {
    console.log("触发了input");
    var color = $(this).val();
    changeFontColor(true, color);
  });

  $("#font_color").change(function () {
    console.log("触发了change");
    var color = $(this).val();
    GM_setValue("font_color", color);
    changeFontColor();
  });

  //初始化对话框字体颜色展示区域
  function initDialogFontColorShowArea() {
    var font_color = GM_getValue("font_color", "#000000");
    var font_color_open = GM_getValue("font_color_open", false);
    if (font_color_open) {
      $("#font_color_open_btn").css("border", "2px solid fuchsia");
      $("#font_color_close_btn").css("border", "none");
    } else {
      $("#font_color_close_btn").css("border", "2px solid fuchsia");
      $("#font_color_open_btn").css("border", "none");
    }
  }
  /*改变字体颜色
temp: 动态变换字体，方便看效果
*/
  function changeFontColor(temp = false, color = "#000000") {
    var color_str = `.readerChapterContent {color: ${color} !important;}`;
    //动态查看效果使用
    if (temp) {
      GM_addStyle(color_str);
      $('label[for="font_color"]').text(color);
      return;
    }
    var font_color = GM_getValue("font_color", "#000000");
    var font_color_open = GM_getValue("font_color_open", false);
    if (font_color_open) {
      color_str = `.readerChapterContent {color: ${font_color} !important;}`;
      GM_addStyle(color_str);
      $('label[for="font_color"]').text(font_color);
    } else {
      color_str = `.readerChapterContent  {color: #000000 !important;}`;
      GM_addStyle(color_str);
      $('label[for="font_color"]').text("");
    }
  }

  $("#font_color_open_btn").click(function () {
    GM_setValue("font_color_open", true);
    $("#font_color_open_btn").css("border", "2px solid aqua");
    $("#font_color_close_btn").css("border", "none");
    changeFontColor();
  });
  $("#font_color_close_btn").click(function () {
    GM_setValue("font_color_open", false);
    $("#font_color_close_btn").css("border", "2px solid aqua");
    $("#font_color_open_btn").css("border", "none");
    changeFontColor();
  });

  ///////////////////////////////////////////////////// 背景图片

  //初始化对话框全部背景图片缩图
  function initDialogBackgroundImageShowArea() {
    for (let i = 0; i < background_image_urls.length; i++) {
      //GM_xmlhttpRequest存在异步问题导致图片和序号不对应，暂时使用setTimeout解决
      setTimeout(() => {
        addDialogBackgroundImageShow(i);
      }, i * 100);
    }
    setTimeout(() => {
      var bak = GM_getValue("background_image_index", -1);
      changeBackgroundImageSelectedBorder(bak);
    }, (background_image_urls.length + 2) * 100);
  }
  //对话框追加背景图片缩图
  function addDialogBackgroundImageShow(index) {
    var url2 = background_image_urls[index];
    GM_xmlhttpRequest({
      method: "GET",
      url: url2,
      responseType: "blob",
      synchronous: true,
      onload: function (response) {
        var blobUrl = URL.createObjectURL(response.response);
        var img = document.createElement("img");
        img.src = blobUrl;
        img.style.width = "50px";
        img.style.height = "50px";
        img.style.margin = "3px";
        img.style.padding = "3px";
        img.addEventListener("click", function () {
          changeBackgroundImage(index);
        });
        $("#background_image_show_area").append(img);
      }
    });
  }

  /* 改变背景图片
    index：使用背景图片序号
    dbClickCancel：是否双击取消背景图片
    当$background_image_index和index相同时取消背景图片，也就是点击同一个背景图片两次时取消背景图片
    */
  function changeBackgroundImage(index, dbClickCancel = true) {
    var bak = GM_getValue("background_image_index", -1);
    // 又被点击了一次，取消背景图片
    if (bak == index && dbClickCancel) {
      index = -1;
    }
    var background_image_style_str =
      ".readerContent .app_content {background-image: none;}";
    if (index > -1) {
      background_image_style_str =
        ".readerContent .app_content {background-image: url('" +
        background_image_urls[index] +
        "');}";
    }
    console.log(
      "切换背景图片-> " + index + " url:" + background_image_urls[index]
    );
    GM_addStyle(background_image_style_str);
    GM_setValue("background_image_index", index);
    changeBackgroundImageSelectedBorder(index);
  }
  function changeBackgroundImageSelectedBorder(index) {
    var images = $("#background_image_show_area img");
    for (var i = 0; i < images.length; i++) {
      if (i == index) {
        images[i].style.border = "2px solid green";
      } else {
        images[i].style.border = "none";
      }
    }
  }

  ///////////////////////////////////////////////////// 背景颜色
  $("#background_color_show_area").append(`
  <input type="color" id="background_color" name="background_color" value="#ffffff" />
  <label for="background_color" class="background-color-show-area-label"></label>
  <button class="background-color-show-area-btn" id="background_color_open_btn">开启</button><button class="background-color-show-area-btn" id="background_color_close_btn">关闭</button>
    `);
  $("#background_color").on("input", function () {
    var color = $(this).val();
    changeBackgroundColor(true, color);
  });

  $("#background_color").change(function () {
    var color = $(this).val();
    GM_setValue("background_color", color);
    changeBackgroundColor();
  });

  //初始化对话框背景颜色展示区域
  function initDialogBackgroundColorShowArea() {
    var background_color = GM_getValue("background_color", "#d8e2c8");
    var background_color_open = GM_getValue("background_color_open", false);
    if (background_color_open) {
      $("#background_color_open_btn").css("border", "2px solid maroon");
      $("#background_color_close_btn").css("border", "none");
    } else {
      $("#background_color_close_btn").css("border", "2px solid maroon");
      $("#background_color_open_btn").css("border", "none");
    }
    //自定义背景颜色按钮
    $("#background_color_show_area").append("<br>");
    for (let i = 0; i < mybackground_colors.length; i++) {
      var item = mybackground_colors[i];
      var background_color_btn = document.createElement("button");
      background_color_btn.textContent = item.name;
      background_color_btn.style.backgroundColor = item.color;
      background_color_btn.classList.add(
        "custom-background-color-show-area-btn"
      );
      $("#background_color_show_area").append(background_color_btn);
    }
  }

  function changeBackgroundColor(temp = false, color = "none") {
    var color_str = `.readerContent .app_content{background-color: ${color} !important;}`;
    //动态查看效果使用
    if (temp) {
      GM_addStyle(color_str);
      $('label[for="background_color"]').text(color);
      return;
    }
    var background_color = GM_getValue("background_color", "#d8e2c8");
    var background_color_open = GM_getValue("background_color_open", false);
    if (background_color_open) {
      color_str = `.readerContent .app_content{background-color: ${background_color} !important;}`;
      GM_addStyle(color_str);
      $('label[for="background_color"]').text(background_color);
    } else {
      color_str = `.readerContent .app_content{background-color: transparent !important;}`;
      GM_addStyle(color_str);
      $('label[for="background_color"]').text("");
    }
  }

  $("#background_color_open_btn").click(function () {
    GM_setValue("background_color_open", true);
    $("#background_color_open_btn").css("border", "2px solid maroon");
    $("#background_color_close_btn").css("border", "none");
    changeBackgroundColor();
  });
  $("#background_color_close_btn").click(function () {
    GM_setValue("background_color_open", false);
    $("#background_color_close_btn").css("border", "2px solid maroon");
    $("#background_color_open_btn").css("border", "none");
    changeBackgroundColor();
  });
  $("#background_color_show_area").on(
    "click",
    ".custom-background-color-show-area-btn",
    function () {
      var selectedColorName = $(this).text();
      var selectedColor = getColorByName(selectedColorName);
      GM_setValue("background_color", selectedColor);
      $("#background_color").val(selectedColor);
      changeBackgroundColor();
    }
  );

  function getColorByName(colorName) {
    for (let i = 0; i < mybackground_colors.length; i++) {
      if (mybackground_colors[i].name === colorName) {
        return mybackground_colors[i].color;
      }
    }
    return "transparent"; // 如果未找到对应颜色，可以返回null或者其他自定义值
  }

  ///////////////////////////////////////////////////// 宽度 /////////////////////////////////////////////////////

  $("#width_show_area").append(`
  <input type="range" min="30" max="100" value="60" style="width:300px" id="width_control">
  <span id="width_control_text"></span>%<button class="width-show-area-btn"  id="default_width_btn">默认</button>
    `);
  $("#width_control").on("input", function () {
    var width_radio = $(this).val();
    $("#width_control_text").text(width_radio);
    var new_width = Math.floor((window.innerWidth * width_radio) / 100);
    GM_setValue("width_radio", width_radio);
    changeWidth(new_width);
  });

  //改变文章宽度
  function changeWidth(new_width) {
    const item1 = document.querySelector(".readerContent .app_content");
    const item2 = document.querySelector(".readerTopBar");
    item1.style["max-width"] = new_width + "px";
    item2.style["max-width"] = new_width + "px";
    const myEvent = new Event("resize");
    window.dispatchEvent(myEvent);
  }
  //初始化宽度
  function initWidth() {
    const item1 = document.querySelector(".readerContent .app_content");
    const defaultOriginWidth = getElementMaxWidth(item1);
    GM_setValue("default_origin_width", defaultOriginWidth);
    var width_radio = GM_getValue("width_radio", 60);
    $("#width_control").val(width_radio);
    $("#width_control_text").text(width_radio);
    var new_width = Math.floor((window.innerWidth * width_radio) / 100);
    changeWidth(new_width);
  }

  //获取元素最大宽度
  function getElementMaxWidth(element) {
    let currentValue = window.getComputedStyle(element).maxWidth;
    currentValue = currentValue.substring(0, currentValue.indexOf("px"));
    currentValue = parseInt(currentValue);
    return currentValue;
  }
  $("#default_width_btn").click(function () {
    var default_origin_width = GM_getValue("default_origin_width", 600);
    changeWidth(default_origin_width);
    var width_radio = Math.floor(
      (default_origin_width * 100) / window.innerWidth
    );
    GM_setValue("width_radio", width_radio);
    $("#width_control").val(width_radio);
    $("#width_control_text").text(width_radio);
  });
  ///////////////////////////////////////////////////// 自动滚动 /////////////////////////////////////////////////////
  $("#auto_scroll_show_area").append(`
 <label for="scroll_interval">滚动间隔:</label>
<input type="number" id="scroll_interval" name="scroll_interval">ms
<br>
<label for="scroll_speed">滚动距离:</label>
<input type="number" id="scroll_speed" name="scroll_speed" >px
<br>
<label for="scroll_speed">翻页等待:</label>
<input type="number" id="next_page_wait_threshold" name="next_page_wait_threshold" >ms
  `);

  $(".readerControls").append(
    "<button id='auto_scroll_speed_acc' class='readerControls_item' style='color:#6a6c6c;cursor:pointer;'>滚动加速</button><button id='auto_scroll_speed_dec' class='readerControls_item' style='color:#6a6c6c;cursor:pointer;'>滚动减速</button><button id='auto_scroll_pause' class='readerControls_item' style='color:#6a6c6c;cursor:pointer;'>开始滚动</button>"
  );

  // 初始滚动状态
  let is_scrolling = false;
  //滚动间隔
  let scroll_interval = GM_getValue("scroll_interval", 20);
  // 初始滚动速度
  let scroll_speed = GM_getValue("scroll_speed", 1);
  // 等待翻页阈值
  let next_page_wait_threshold = GM_getValue("next_page_wait_threshold", 1000);
  //滚动事件标识
  let interval_event_id;
  //上次滚动位置
  let last_scroll_pos = -1;
  //已等待时间
  let next_page_wait = 0;
  //最小滚动间隔
  let min_scroll_interval = 20;
  // 最小初始滚动速度
  let min_scroll_speed = 1;
  // 最小等待翻页阈值
  let min_next_page_wait_threshold = 500;
  $("#auto_scroll_speed_acc").click(function () {
    scroll_speed++;
    GM_setValue("scroll_speed", scroll_speed);
    var text = $("#auto_scroll_pause").text().substring(0, 2);
    $("#auto_scroll_pause").html(text + scroll_speed);
    $("#scroll_speed").val(scroll_speed);
  });

  $("#auto_scroll_speed_dec").click(function () {
    scroll_speed--;
    if (scroll_speed < min_scroll_speed) {
      scroll_speed = 1;
    }
    GM_setValue("scroll_speed", scroll_speed);
    var text = $("#auto_scroll_pause").text().substring(0, 2);
    $("#auto_scroll_pause").html(text + scroll_speed);
    $("#scroll_speed").val(scroll_speed);
  });

  $("#auto_scroll_pause").click(function () {
    is_scrolling = !is_scrolling;
    if (is_scrolling) {
      interval_event_id = setInterval(autoScroll, scroll_interval);
      $("#auto_scroll_pause").html("暂停" + scroll_speed);
    } else {
      clearInterval(interval_event_id);
      $("#auto_scroll_pause").html("继续" + scroll_speed);
    }
  });

  $("#scroll_interval").on("change", function () {
    var new_scroll_interval = $(this).val();
    scroll_interval = new_scroll_interval;
    if (scroll_interval < min_scroll_interval) {
      scroll_interval = min_scroll_interval;
      $("#scroll_interval").val(scroll_interval);
    }
    GM_setValue("scroll_interval", scroll_interval);
  });
  $("#scroll_speed").on("change", function () {
    var new_scroll_speed = $(this).val();
    scroll_speed = new_scroll_speed;
    if (scroll_speed < min_scroll_speed) {
      scroll_speed = min_scroll_speed;
      $("#scroll_speed").val(scroll_speed);
    }
    GM_setValue("scroll_speed", scroll_speed);
    var text = $("#auto_scroll_pause").text().substring(0, 2);
    $("#auto_scroll_pause").html(text + scroll_speed);
  });
  $("#next_page_wait_threshold").on("change", function () {
    var new_next_page_wait_threshold = $(this).val();
    next_page_wait_threshold = new_next_page_wait_threshold;
    if (next_page_wait_threshold < min_next_page_wait_threshold) {
      next_page_wait_threshold = min_next_page_wait_threshold;
      $("#next_page_wait_threshold").val(next_page_wait_threshold);
    }
    GM_setValue("next_page_wait_threshold", next_page_wait_threshold);
  });
  function autoScroll() {
    var distance = scroll_speed;
    window.scrollBy(0, distance);
    let scroll_pos = $(this).scrollTop();

    // 到底后会一直一样，累加等待时间
    if (last_scroll_pos == scroll_pos) {
      next_page_wait = parseInt(next_page_wait) + parseInt(scroll_interval);
      let progress = Math.floor(
        (next_page_wait * 100) / next_page_wait_threshold
      );
      GM_addStyle(
        `.next-page-tip-progress {    width: ${progress}px; background-color: #d8e2c8;  }`
      );
    } else {
      next_page_wait = 0;
    }
    last_scroll_pos = scroll_pos;
    // 开始显示翻页条
    if (next_page_wait > 200) {
      console.log(
        "next_page_wait:" +
          next_page_wait +
          ",next_page_wait_threshold:" +
          next_page_wait_threshold
      );
      $("#next_page_tip").fadeIn();
    } else {
      $("#next_page_tip").fadeOut();
    }
    // 到达阈值，翻页
    if (next_page_wait > next_page_wait_threshold) {
      document.dispatchEvent(
        new KeyboardEvent("keydown", {
          bubbles: true,
          cancelable: true,
          keyCode: 39
        })
      );
    }
  }
  //初始化对话框自动滚动配置区域
  function initDialogAutoScrollShowArea() {
    $("#scroll_interval").val(scroll_interval);
    $("#scroll_speed").val(scroll_speed);
    $("#next_page_wait_threshold").val(next_page_wait_threshold);
  }
  ///////////////////////////////////////////////////// 隐藏显示工具栏 /////////////////////////////////////////////////////
  let reader_controls = $(".readerControls");
  $(document).mousemove(function (event) {
    // 获取鼠标指针相对于文档的位置
    let mouse_x = event.pageX;
    // 获取屏幕宽度
    let screen_width = $(window).width();
    // 如果鼠标指针距离屏幕最右侧200px内，则显示reader_controls，否则隐藏
    if (screen_width - mouse_x <= 200) {
      reader_controls.css("opacity", "1");
    } else {
      reader_controls.css("opacity", "0");
    }
  });

  ///////////////////////////////////////////////////// 下滑不显示标题栏 /////////////////////////////////////////////////////
  var window_top = 0;
  $(window).scroll(function () {
    let scroll_dis = $(this).scrollTop();
    let reader_top_bar = $(".readerTopBar");
    if (scroll_dis > window_top) {
      // 下滑隐藏
      reader_top_bar.css("opacity", "0");
    } else {
      // 上滑到最顶端显示
      reader_top_bar.css("opacity", "1");
    }
  });
  ///////////////////////////////////////////////////// 启动初始化 /////////////////////////////////////////////////////
  //页面加载时初始化
  function pageLoad() {
    console.log("pageLoad");
    //打开对话框时渲染已选中的字体、背景图片缩图
    initDialog();
    //初始化字体
    initFont();
    //初始化字体颜色
    initFontColor();
    //初始化背景图片
    initBackgroundImage();
    //初始化背景颜色
    initBackgroundColor();
    //初始化宽度
    initWidth();
  }
  //初始化背景图片
  function initBackgroundImage() {
    var bak = GM_getValue("background_image_index", -1);
    changeBackgroundImage(bak, false);
  }
  //初始化背景颜色
  function initBackgroundColor() {
    var background_color = GM_getValue("background_color", "#d8e2c8");
    $("#background_color").val(background_color);
    changeBackgroundColor();
  }
  //初始化字体颜色
  function initFontColor() {
    var font_color = GM_getValue("font_color", "#000000");
    $("#font_color").val(font_color);
    changeFontColor();
  }
  //初始化字体
  function initFont() {
    var bak = GM_getValue("font_index", 0);
    changeFont(bak);
  }
  //打开对话框时渲染已选中的字体、背景图片缩图
  function initDialog() {
    //初始化对话框字体颜色展示区域
    initDialogFontColorShowArea();
    //初始化对话框背景颜色展示区域
    initDialogBackgroundColorShowArea();
    //初始化对话框全部背景图片缩图
    initDialogBackgroundImageShowArea();
    //初始化对话框全部字体缩图
    initDialogFontShowArea();
    //初始化对话框自动滚动配置区域
    initDialogAutoScrollShowArea();
  }
  pageLoad();
})();