微信懒人翻书

实现微信读书自动翻书功能

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         微信懒人翻书
// @namespace    http://tampermonkey.net/
// @version      0.8
// @description  实现微信读书自动翻书功能
// @author       yuankaiyu
// @match        https://weread.qq.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license      MIT
// ==/UserScript==

const primaryColor =
      "linear-gradient(45deg, rgb(44, 106, 255),rgb(48, 173, 254))";

const createBtn = (innerText, id, style, fn) => {
    const btn = document.createElement("button");
    btn.innerText = innerText;
    btn.id = id;
    btn.style.marginRight = "5px";
    btn.style.cursor = "pointer";
    btn.style.color = "white";
    btn.style.backgroundColor = "transparent";
    btn.style.border = "none";
    btn.style.fontSize = "18px";
    btn.style.lineHeight = "18px";
    btn.addEventListener("click", function (event) {
        fn();
    });
    return btn;
};

const minus = (speedEle) => {
    let speed = +speedEle.innerText;
    speed -= 0.1;
    speed = Math.round(speed * 100) / 100;
    speedEle.innerText = speed;
};

const add = (speedEle) => {
    let speed = +speedEle.innerText;
    speed += 0.1;
    speed = Math.round(speed * 100) / 100;
    speedEle.innerText = speed;
};

(function () {
    "use strict";
    const createBox = () => {
        const box = document.createElement("div");
        box.style.position = "fixed";
        box.style.top = "24px";
        box.style.left = "100px";
        box.style.fontSize = "16px";
        box.style.background = primaryColor;
        box.style.padding = "10px";
        box.style.borderRadius = "5px";
        box.style.boxShadow = "4px 4px 20px rgba(0, 0, 0, 0.4)";
        box.style.cursor = "grab";
        box.style.color = "white";
        return box;
    };
    const createHeader = () => {
        const divEle = document.createElement("div");
        divEle.style.fontSize = "18px";
        divEle.style.fontWeight = "bold";
        var titleNode = document.createTextNode("懒人翻书");
        divEle.appendChild(titleNode);
        divEle.addEventListener("click", function (event) {
            scrollAuto();
        });
        divEle.onclick = "scrollAuto()";
        return divEle;
    };
    const box = createBox();
    const header = createHeader();
    box.appendChild(header);
    const createContentArea = () => {
        const div = document.createElement("div");
        div.style.cssText =
            "display: flex; flex-direction: column; align-items: flex-start; align-content: flex-start; padding-top: 10px;";
        return div;
    };
    const contentArea = createContentArea();
    box.appendChild(contentArea);
    const createSpeedController = () => {
        const speedController = document.createElement("div");
        speedController.id = "speedController";

        const speedEle = document.createElement("span");
        speedEle.id = "speed";
        speedEle.innerText = "0.5";
        speedEle.style.cssText =
            "display: inline-block; width: 26px; text-align: center;";
        const minusBtn = createBtn("-", "minusBtn", "", () => minus(speedEle));
        const addBtn = createBtn("+", "addBtn", "", () => add(speedEle));
        speedController.appendChild(minusBtn);
        speedController.appendChild(speedEle);
        speedController.appendChild(addBtn);
        return { speedEle, speedController };
    };
    const { speedEle, speedController } = createSpeedController();
    contentArea.appendChild(speedController);

    const hint1 = document.createElement("div");
    hint1.innerText = "Min 0.1";
    hint1.style.cursor = "pointer";
    hint1.addEventListener("click", function (event) {
        speedEle.innerText = 0.1;
    });
    const hint2 = document.createElement("div");
    hint2.innerText = "Max 2";
    hint2.style.cursor = "pointer";
    hint2.addEventListener("click", function (event) {
        speedEle.innerText = 2;
    });
    contentArea.appendChild(hint1);
    contentArea.appendChild(hint2);
    document.body.appendChild(box);
    let animationFrameId;
    let scrollPosition = 0;
    // 为元素添加keydown事件监听器
    document.addEventListener("keydown", function (event) {
        // 检查按下的键是否是空格键
        if (event.key === " " || event.keyCode === 32) {
            event.preventDefault();
            scrollAuto();
        }
    });

    function scrollAuto() {
        const scrollDistance = +speedEle.innerText; // 每次滚动的距离
        const renderTargetContainer = document.querySelector(
            ".renderTargetContainer"
        );
        scrollPosition = window.scrollY;
        async function smoothScroll() {
            cancelAnimationFrame(animationFrameId);
            scrollPosition += scrollDistance;
            window.scrollTo(0, scrollPosition);
            // 当你想要停止滚动时,清除这个间隔
            if (isScrolledToBottom()) {
                console.log("滚动到底部了");
                // cancelAnimationFrame(animationFrameId);
                scrollPosition = 0
                // 模拟按下右方向键
                function simulateRightArrowKeyPress() {
                    // 创建一个键盘事件
                    var event = new KeyboardEvent('keydown', {
                        bubbles: true, // 是否冒泡
                        cancelable: true, // 是否可以取消
                        key: 'ArrowRight', // 键名
                        code: 'ArrowRight', // 键的代码
                        keyCode: 39, // 按键的keyCode值(非标准,但为了兼容旧浏览器)
                        which: 39 // 按键的which值
                    });

                    // 派发事件到document,模拟按键
                    document.dispatchEvent(event);
                }

                // 调用函数模拟按下右方向键
                simulateRightArrowKeyPress();
                await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve()
                    }, 2000)
                })
                // return;
            }
            animationFrameId = requestAnimationFrame(smoothScroll);
        }
        // 空格键被按下,执行相应的操作
        if (animationFrameId) {
            console.log("清除");
            animationFrameId = cancelAnimationFrame(animationFrameId);
        } else {
            // 在这里你可以添加你想要执行的代码
            animationFrameId = requestAnimationFrame(smoothScroll);
        }
    }
    function isScrolledToBottom() {
        return window.scrollY + window.innerHeight >= document.body.scrollHeight-5;
    }

    // 键盘按下加减键
    document.addEventListener("keydown", function (event) {
        // 检查按下的键的键码
        if (event.key === "+") {
            console.log("加号键被按下");
            add(speedEle);
            // 这里可以添加加号键的响应逻辑
        } else if (event.key === "-") {
            console.log("减号键被按下");
            minus(speedEle);
            // 这里可以添加减号键的响应逻辑
        }
    });

    // 给组件增加拖拽功能
    const dragHandle = () => {
        const draggable = box;
        let offsetX,
            offsetY,
            drag = false;
        draggable.onmousedown = function (e) {
            offsetX = e.clientX - draggable.getBoundingClientRect().left;
            offsetY = e.clientY - draggable.getBoundingClientRect().top;
            drag = true;
        };
        document.onmousemove = function (e) {
            if (drag) {
                draggable.style.left = e.clientX - offsetX + "px";
                draggable.style.top = e.clientY - offsetY + "px";
            }
        };
        document.onmouseup = function () {
            drag = false;
        };
    };
    dragHandle();
    // Your code here...
})();