油猴脚本，使微信读书打开笔记列表时跟随当前章节目录滑动

Xqh042

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

// ==UserScript==
// @name         微信读书笔记列表跟随当前章节滚动
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  笔记列表跟随当前章节滚动
// @AuThor       XQH
// @match        https://weread.qq.com/web/reader/*
// @Icon         https://www.google.com/s2/favicons?sz=64&domain=qq.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let noteListCssSelector = 'readerNoteList'
    let noteItemClz = 'sectionListItem_title'
    // 等待页面加载完毕
    setTimeout(function(){
        // 获取网页标题 css:.readerTopBar_title_chapter
        let title = document.querySelector(".readerTopBar_title_chapter");

        function jumpNote() {
            // 获取title文字，查找noteList中div(class:noteItemClz)子标签文字对应标签
            let titleText = title.innerText;
            let noteList = document.getElementsByClassName(noteListCssSelector)[0];
            let noteItems = noteList.getElementsByClassName(noteItemClz);
            for(let i = 0; i < noteItems.length; i++){
                if(noteItems[i].innerText == titleText){
                    noteList.scrollTop = noteItems[i].offsetTop - 100;
                    break;
                }
            }
        }
        // 隐藏推广按钮
        let appDownloadBtn = document.querySelector(".readerControls_item.download");
        if(appDownloadBtn) {
            appDownloadBtn.style.display="none";
        }
        // 移动端UA下会显示打开app阅读
        let toAppBtn = document.querySelector("readerFooter_button.blue");
        if(toAppBtn) {
            toAppBtn.style.display="none";
        }
        // 获取button.rbb_item
        let invoke = document.querySelector(".readerBottomBar.showShadow");
        // 底部添加笔记按钮

        if(invoke){
            // 获取笔记图标
            let noteIcon = document.querySelector('.readerControls_item.note').querySelector('.icon');
            let backgroundImg = getComputedStyle(noteIcon).getPropertyValue("background-image");
            
            // 在readerBottomBar 的 rbb_item.setting(bar内第三个button) 后添加一个button
            let newInvoke = document.createElement("button");
            newInvoke.className = "rbb_item note";
            newInvoke.title = "笔记";
            newInvoke.innerHTML = '<span class="icon""></span><span class="txt">笔记</span>';

            invoke.insertBefore(newInvoke, invoke.children[3]);
            newInvoke.querySelector('.icon').style.backgroundImage = backgroundImg;
            // 设置点击事件为切换readerNotePanel的display
            newInvoke.addEventListener("click", function(){
                // 不隐藏readerBottomBar, 为readerBottomBar添加active class
                setTimeout(function(){
                    invoke.classList.add("active");
                    
                }, 100);
                let notePanel = document.getElementsByClassName("readerNotePanel")[0];
                if(notePanel.style.display == "none"){
                    notePanel.style.display = "";
                    // 设置点击面板隐藏，可能不适合移动端使用，先注释掉
                    // notePanel.addEventListener("click", function(){
                    //     notePanel.style.display = "none";
                    // });
                }else{
                    notePanel.style.display = "none";
                }
                // 为所有(sectionListItem_content noteItem_content clickable)设置点击隐藏notePanel
                let noteItems = document.getElementsByClassName("sectionListItem_content noteItem_content clickable");
                for(let i = 0; i < noteItems.length; i++){
                    noteItems[i].addEventListener("click", function(){
                        notePanel.style.display = "none";
                    });
                }
                // 延迟100ms
                setTimeout(function(){
                    jumpNote();
                }, 100);
            } );
        }
        // 监听点击事件(readerControls_item note)
        document.querySelector(".readerControls_item.note").addEventListener("click", function(){
            jumpNote();
        });


    }, 1500);
})();

因为看小说的时候记了200多条笔记，每次一进入页面还是得从头开始滑动笔记列表去找。就写了这个油猴脚本
默认展开笔记列表时匹配当前章节标题，使笔记列表滑动到相应位置

隐藏了宽屏和窄屏下的推广app按钮

窄页面下为底部操作栏添加笔记按钮，点击可切换笔记列表显示。

Xqh042

* 发布到了Greasy Fork
* 为了方便移动端笔记间跳转实现了点击划线笔记时注入上一条/下一条笔记按钮
* 支持移动端左右滑动展开收起笔记列表
* 双击划线笔记跳转到下一条笔记
* 修复了章节内多页笔记往前跳转的问题
* 如火狐等浏览器因为剪切板api的问题笔记间跳转会出现问题
p.p.s 通过微信读书自带的划线复制文本实现笔记间跳转，注意使用时剪切板是否有重要内容
(没想明白为啥火狐浏览器微信读书网页端能实现写入剪切板，但我用js就没办法读取(
油猴脚本地址