【油猴脚本】微信读书阅读样式优化

Velens · 发表于 2023-7-30 17:39

本帖最后由 Velens 于 2023-10-8 23:33 编辑

经常在电脑和手机上阅读，需要多端同步功能，目前仅发现微信读书是免费同步的，但是网页版的样式不符合自己的阅读习惯，于是通过油猴脚本定制自己喜欢的阅读样式。

功能介绍：
开启功能开关菜单，配置自动存储读取
1、宽屏显示，设置满列、宽列和默认3种宽度模式，浮动菜单、字号控制条随模式变换位置
2、页脚优化，调整“下一章”位置，设置隐藏、显示和默认3种模式
3、启用空格翻页
4、隐藏、显示滚动条
5、更改浅色模式背景颜色，共有豆沙绿、杏仁黄、秋叶褐、胭脂红、海天蓝、葛巾紫、极光灰、青草绿、银河白9种可选
6、自动阅读和挂机模式，平滑滚动，页面左侧添加浮动按钮，自定义倍速和触底翻页时间（悬停显示，双击修改），快捷键Num0播放或暂停
7、沉浸式阅读，导航栏在顶部、鼠标移入时显示，浮动菜单在滑出顶部、鼠标移出时隐藏

EDGE浏览器“后台”挂机说明
1、输入edge://flags进入实验室，搜索Calculate window occlusion on Windows，设置为Disable，重启浏览器
2、进入微信读书点击挂机按钮，将当前标签拖出屏幕，或按win+tab，将当前标签拖入新建桌面
注意：挂机标签需处于活跃状态，不能最小化或同窗口切换其他标签，可新建窗口浏览网页和锁定屏幕

脚本安装：
油猴脚本安装地址：微信读书 WeReadSytle，https://greasyfork.org/zh-CN/scripts/440339

截图展示：

脚本代码：

[Java] 纯文本查看 复制代码

// ==UserScript==
// @name    微信读书
// @icon    [url=https://weread.qq.com/favicon.ico]https://weread.qq.com/favicon.ico[/url]
// @namespace    [url=https://greasyfork.org/users/878514]https://greasyfork.org/users/878514[/url]
// @version    20230929
// @description    宽屏显示，更改浅色模式背景颜色，开启沉浸式阅读、自动阅读和挂机模式，平滑滚动，空格翻页，调整页脚按钮，隐藏滚动条，配置持久化
// @author    Velens
// @match    [url=https://weread.qq.com/web/reader/]https://weread.qq.com/web/reader/[/url]*
// @require    [url=https://code.jquery.com/jquery-3.6.0.min.js]https://code.jquery.com/jquery-3.6.0.min.js[/url]
// @license    MIT
// @grant    GM_addStyle
// @grant    GM_registerMenuCommand
// @grant    GM_setValue
// @grant    GM_getValue
// ==/UserScript==


/* globals jQuery, $, waitForKeyElements */
const widths = [{titlew:"满列",width:"100%",align_items:"flex-end",margin_left:"45.5%"},{titlew:"宽列",width:"80%",align_items:"center",margin_left:"41.5%"},{titlew:"默认",width:"",align_items:"flex-start",margin_left:""}];
const footers = [{titlet:"隐藏",padding:"20px"},{titlet:"显示",padding:"40px"},{titlet:"默认",padding:""}];
const spacePages = ["空格","默认"];
const scrollbars = [{titles:"滚动条：隐藏",displays:"none"},{titles:"滚动条：显示",displays:"auto"}];
const colors = [{titlec:"豆沙绿",RGB:"#C7EDCC"},{titlec:"杏仁黄",RGB:"#FAF9DE"},{titlec:"秋叶褐",RGB:"#FFF2E2"},{titlec:"胭脂红",RGB:"#FDE6E0"},{titlec:"海天蓝",RGB:"#DCE2F1"},{titlec:"葛巾紫",RGB:"#E9EBFE"},{titlec:"极光灰",RGB:"#EAEAEF"},{titlec:"青草绿",RGB:"#E3EDCD"},{titlec:"银河白",RGB:"#FFFFFF"}];
const playAutos = ["自动阅读：开启","自动阅读：关闭"];
const scrollTops = ["阅读模式：沉浸式","阅读模式：默认"];
let iw = GM_getValue("numw",0);
let io = GM_getValue("numo",0);
let ip = GM_getValue("nump",0);
let is = GM_getValue("nums",0);
let ic = GM_getValue("numc",0);
let flagp = GM_getValue("flagp",true);
let flagt = GM_getValue("flagt",true);
var timeoutID;
var flagPlay = false,flagBOT = false;
var readerControls = document.getElementsByClassName("readerControls")[0];

GM_registerMenuCommand("宽度：" + widths[iw].titlew,width)
if(widths[iw].titlew != "默认"){
    GM_addStyle(`.readerContent .app_content, .readerTopBar {max-width: ${widths[iw].width};}`);
    GM_addStyle(`.readerControls {align-items: ${widths[iw].align_items};}`);
    GM_addStyle(`.readerControls {margin-left: ${widths[iw].margin_left};}`);}
function width(){
    if(iw < widths.length-1){iw++;}
    else{iw = 0;}
    GM_setValue("numw",iw);
    location.reload();
};

GM_registerMenuCommand("页脚：" + footers[io].titlet,Footer);
if(footers[io].titlet != "默认"){
    GM_addStyle(`.readerFooter {padding: ${footers[io].padding};}`);
    GM_addStyle(".readerFooter_button {font-weight: 600;}");}
if(footers[io].titlet == "隐藏"){
    GM_addStyle(` .readerFooter_button {background-color: #1C1C1D;}`);
    GM_addStyle(`.wr_whiteTheme .readerFooter_button {background-color: ${colors[ic].RGB};}`);}
function Footer(){
    if(io < footers.length-1){io++;}
    else{io = 0;}
    GM_setValue("numo",io);
    location.reload();
};

GM_registerMenuCommand("翻页：" + spacePages[ip],spacePage);
function nextPage () {
    const event = new KeyboardEvent('keydown', {
        key: 'ArrowRight',
        keyCode: 39
    });
    document.dispatchEvent(event);
};
if(spacePages[ip] == "空格"){
    $(document).keydown(function(event){
        if(event.keyCode == 32){
            var totalTop = $(document).scrollTop();
            var scrollHeight = $(document).height() - $(window).height() - 10;
            if (totalTop >= scrollHeight){nextPage ();}}
    })}
function spacePage(){
    if(ip < spacePages.length-1){ip++;}
    else{ip = 0;}
    GM_setValue("nump",ip);
    location.reload();
};

GM_registerMenuCommand(scrollbars[is].titles,scrollbar);
GM_addStyle(`body::-webkit-scrollbar {display: ${scrollbars[is].displays};}`);
function scrollbar(){
    if(is < scrollbars.length-1){is++;}
    else{is = 0;}
    GM_setValue("nums",is);
    location.reload();
};

GM_registerMenuCommand("背景色：" + colors[ic].titlec,color);
GM_addStyle(`.wr_whiteTheme .readerContent .app_content, .wr_whiteTheme .readerTopBar, .wr_whiteTheme .readerControls_fontSize, .wr_whiteTheme .readerControls_item {background-color: ${colors[ic].RGB};}`);
if(widths[iw].titlew != "满列" && colors[ic].titlec != "银河白"){GM_addStyle(`.wr_page_reader.wr_whiteTheme {background: linear-gradient(#0000000d,#0000000d),${colors[ic].RGB};}`);};
if(colors[ic].titlec != "银河白"){GM_addStyle(`.readerChapterContent {color: #000000CC !important;}`);};
function color(){
    timeoutID = GM_getValue("timeoutID");
    clearTimeout(timeoutID);
    if(ic < colors.length-1){ic++;}
    else{ic = 0;}
    GM_setValue("numc",ic);
    GM_addStyle(`.wr_whiteTheme .readerContent .app_content, .wr_whiteTheme .readerTopBar, .wr_whiteTheme .readerControls_fontSize, .wr_whiteTheme .readerControls_item {background-color: ${colors[ic].RGB};}`);
    if(widths[iw].titlew != "满列"){GM_addStyle(`.wr_page_reader.wr_whiteTheme {background-image: linear-gradient(#0000000d,#0000000d);background-color: ${colors[ic].RGB};background-blend-mode: multiply;}`);};
    if(footers[io].titlet == "隐藏"){
        GM_addStyle(`.wr_whiteTheme .readerFooter_button {background-color: ${colors[ic].RGB};}`);}
    if(flagp){GM_addStyle(`.wr_whiteTheme .autoReads{background-color:${colors[ic].RGB};}`)};
    timeoutID = setTimeout(() => location.reload(),10000);
    GM_setValue("timeoutID",timeoutID);
};

if(flagp){
    GM_registerMenuCommand(playAutos[0],playAuto);
    $(window).on('load', function () {
        var classRead = document.createElement("div");
        classRead.className = "autoRead";
        GM_addStyle(`.autoRead{width:48px;position:fixed;bottom:48px;z-index:5;margin-right:548px;right:50%;margin-right:${widths[iw].margin_left};}`);
        document.body.append(classRead);
        var buttonRead = "<button title='播放' class='autoReads readPlay'></button><button title='暂停' class='autoReads readStop'></button><button title='倍数' class='autoReads readSpeed'></button><button title='翻页' class='autoReads readPage'></button></button><button title='挂机' class='autoReads readBOT'></button>";
        GM_addStyle(`.autoReads{width:48px;height:48px;border-radius:24px;margin-top:24px;box-shadow: 0 8px 32px rgba(0,25,104,.1);background-color:#1C1C1D;}`);
        GM_addStyle(`.wr_whiteTheme .autoReads{background-color:${colors[ic].RGB};}`);
        $('.autoRead').append(buttonRead);
        var iconPlay = "<span class='iconRead iconPlay'>播放</span>";
        var iconStop = "<span class='iconRead iconStop'>暂停</span>";
        var iconSpeed = "<span class='iconRead iconSpeed'>倍速</span>";
        var iconPage = "<span class='iconRead iconPage'>翻页</span>";
        var iconBOT = "<span class='iconRead iconBOT'>挂机</span>";
        GM_addStyle(`.iconRead{opacity:0.7;width:48px;height:48px;display:inline-block;line-height:48px;text-align:center;color:#fff}`);
        GM_addStyle(`.wr_whiteTheme .iconRead{color:#000;}`);
        $('.readPlay').append(iconPlay);
        $('.readStop').append(iconStop);
        $('.readSpeed').append(iconSpeed);
        $('.readPage').append(iconPage);
        $('.readBOT').append(iconBOT);
        $(".iconRead").mouseenter(function () {$(this).css("opacity", "1");});
        $(".iconRead").mouseleave(function () {$(this).css("opacity", ".7");});
        if(flagt){
        classRead.addEventListener('mouseenter', function(){ classRead.style.opacity = 1});
        classRead.addEventListener('mouseleave', function(){ classRead.style.opacity = 0});
        setTimeout(() => GM_addStyle(`.autoRead{opacity:0;}`),10000);}

        var timePlay,timePage,timeBOT,timeClick,numPlay=0;
        let ynumDown = GM_getValue("ynumDown",1);
        let flagPage = GM_getValue("flagPage",true);
        let timePagesec = GM_getValue("timePagesec",10000);
        $('.iconSpeed').attr('title', "步长：" + ynumDown);
        $('.iconPage').attr('title', "间隔：" + timePagesec + "（双击修改）");
        if(flagPage){GM_addStyle(`.readPage{box-shadow: 0 0 5px 2px rgba(0,255,0,1);}`);};
        //let wakeLock = null;
        //const requestWakeLock = async ()=>{
        //    try {wakeLock = await navigator.wakeLock.request('screen');}
        //    catch (err) {console.log(`${err.name}, ${err.message}`);}}

        const autoPlay = async function () {
            timePlay = window.requestAnimationFrame(autoPlay);
            if(flagBOT){window.scrollBy(0,1);}
            else{window.scrollBy(0,ynumDown);};
            var totalTop = $(document).scrollTop();
            var scrollHeight = $(document).height() - $(window).height() - 10;
            if (totalTop >= scrollHeight){
                if(numPlay<1){
                    numPlay++;
                    if(flagPage){timePage = setTimeout(() => nextPage (),timePagesec);};
                    if(flagBOT){timeBOT = setTimeout(() => window.scrollTo(0, 0),10000);};
                }}
            else{
                if(numPlay>0){
                    numPlay=0;
                    clearTimeout(timePage);
                    clearTimeout(timeBOT);
                }}
        }

        $('.readPlay').click(function () {
            flagPlay = true;
            flagBOT = false;
            if(flagt){
                GM_addStyle(`.autoRead{opacity:0;}`);
                readerControls.style.opacity = 0;};
            GM_addStyle(`.readBOT{box-shadow: 0 8px 32px rgba(0,25,104,.1);}`);
            GM_addStyle(`.readPlay{box-shadow: 0 0 5px 2px rgba(0,255,0,1);}`);
            cancelAnimationFrame(timePlay);
            clearTimeout(timeBOT);
            autoPlay();
        });

        $('.readStop').click(function () {
            flagPlay = false;
            flagBOT = false;
            numPlay=0;
            GM_addStyle(`.readPlay,.readBOT{box-shadow: 0 8px 32px rgba(0,25,104,.1);}`);
            cancelAnimationFrame(timePlay);
            clearTimeout(timePage);
            clearTimeout(timeBOT);
            //if(wakeLock != null){wakeLock.release().then(() => {wakeLock = null});};
        })

        $('.readSpeed').click(function () {
            if(!flagBOT){
                ynumDown = prompt("请输入滚动步长（像素）（默认：1）", ynumDown);
                if(ynumDown != null && $.isNumeric(ynumDown)){
                    $('.iconSpeed').attr('title', "步长：" + ynumDown);
                    GM_setValue("ynumDown",ynumDown);}
                else{ynumDown = GM_getValue("ynumDown");}
            //else{alert("当前为挂机模式，默认倍速：1");}
        }})

        $('.readPage').click(function () {
            if(!flagBOT){
                clearTimeout(timeClick);
                timeClick = setTimeout(function(){
                    if(!flagPage){
                        flagPage = true;
                        numPlay=0;
                        GM_addStyle(`.readPage{box-shadow: 0 0 5px 2px rgba(0,255,0,1);}`);}
                    else{
                        flagPage = false;
                        clearTimeout(timePage);
                        GM_addStyle(`.readPage{box-shadow: 0 8px 32px rgba(0,25,104,.1);}`);}
                    GM_setValue("flagPage",flagPage);
                },250);}
            //else{alert("当前为挂机模式，已关闭自动翻页");}
        })

        $('.readPage').dblclick(function () {
            if(!flagBOT){
                clearTimeout(timeClick);
                timePagesec = prompt("请输入翻页间隔（毫秒）（默认：10000）", timePagesec);
                if(timePagesec != null && $.isNumeric(timePagesec)){
                    if(timePagesec < 1000){timePagesec = 1000;}
                    $('.iconPage').attr('title', "间隔：" + timePagesec + "（双击修改）");
                    GM_setValue("timePagesec",timePagesec);}
                else{timePagesec = GM_getValue("timePagesec");}
            //else{alert("当前为挂机模式，已关闭自动翻页");}
        }})

        $('.readBOT').click(function () {
            flagBOT = true;
            flagPlay = false;
            flagPage = false;
            numPlay=0;
            if(flagt){readerControls.style.opacity = 0;};
            GM_addStyle(`.autoReads{box-shadow: 0 8px 32px rgba(0,25,104,.1);}`);
            GM_addStyle(`.readBOT{box-shadow: 0 0 5px 2px rgba(0,255,0,1);}`);
            cancelAnimationFrame(timePlay);
            clearTimeout(timePage);
            autoPlay();
            //requestWakeLock();
            GM_setValue("flagPage",flagPage);
        })

        $(document).keydown(function(event){
            if(event.keyCode == 96){
                if(!flagPlay && !flagBOT) {$('.readPlay').click();}
                else {$('.readStop').click();}}
        });

    })
}
else{GM_registerMenuCommand(playAutos[1],playAuto);};
function playAuto(){
    flagp = !flagp;
    GM_setValue("flagp",flagp);
    location.reload();
};

if(flagt){
    GM_registerMenuCommand(scrollTops[0],scrollTop);
    (function (){
        $(window).scroll(function(){
            var scroll = $(this).scrollTop();
            var paddingtop = $(".navBarOffset").css("padding-top");
            var lineheight = $(".readerHeaderButton").css("line-height");
            var scrollTop = parseFloat(paddingtop) + parseFloat(lineheight);
            var readerTopBar = document.getElementsByClassName("readerTopBar")[0];
            if(scroll <= scrollTop){
                // 顶部显示
                readerTopBar.style.opacity = 1;
                //readerControls.style.opacity = 1;
            }else{
                // 下滑隐藏
                readerTopBar.style.opacity = 0;
                if(!flagPlay && !flagBOT){
                    readerControls.style.opacity = 0;
                    if(flagp){GM_addStyle(`.autoRead{opacity:0;}`)}}
            }
            readerTopBar.addEventListener('mouseenter', function(){ readerTopBar.style.opacity = 1});
            readerTopBar.addEventListener('mouseleave', function(){ if(scroll <= scrollTop){ readerTopBar.style.opacity = 1}else{ readerTopBar.style.opacity = 0}});
            readerControls.addEventListener('mouseenter', function(){ readerControls.style.opacity = 1});
            readerControls.addEventListener('mouseleave', function(){ readerControls.style.opacity = 0});
        });
    })();
}
else{GM_registerMenuCommand(scrollTops[1],scrollTop);}
function scrollTop(){
    flagt = !flagt;
    GM_setValue("flagt",flagt);
    location.reload();
};

Velens · 发表于 2023-9-8 01:26

已更新版本
更改背景色刷新频率为最后一次点击后10秒刷新
新增自动阅读和挂机模式，页面左侧添加浮动按钮，可自定义播放倍速和触底翻页时间，按Num0播放或暂停

iMPuffin · 发表于 2023-9-5 18:15

好东西，如果切换颜色的时候点击“背景色“选项出现的是下拉菜单就更好了，因为可选的颜色众多，循环一遍需要一点时间。（不太清楚油猴脚本的实现方式，说错了请勿怪。）
不过默认的“青草绿”就很好了。

i7hone · 发表于 2023-7-30 21:57

试试看.....

jingtianlong · 发表于 2023-7-30 21:59

看看怎么样了

hbzy · 发表于 2023-7-30 22:32

如果能有直接下载功能就更好

hmzhushou · 发表于 2023-7-30 22:33

提示: 作者被禁止或删除内容自动屏蔽

yinyiniao · 发表于 2023-7-30 22:59

好东西，感谢分享

雾都孤尔 · 发表于 2023-7-30 23:21

界面很清爽，支持原创。感谢分享。

yoyoma211 · 发表于 2023-7-30 23:26

这个用了感觉不错的，感谢分享

RyesLai · 发表于 2023-7-31 00:22

楼主真棒！感谢分享！

poshui1968 · 发表于 2023-7-31 10:16

感谢分享！看看怎么样。

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 【油猴脚本】微信读书阅读样式优化

免费评分

本帖被以下淘专辑推荐:

hmzhushou hmzhushou 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	hmzhushou 发表于 2023-7-30 22:33 提示: 作者被禁止或删除内容自动屏蔽

	回复支持举报