油猴脚本，使微信读书打开笔记列表时跟随当前章节目录滑动
本帖最后由 Xqh042 于 2023-8-7 22:34 编辑// ==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);
let noteItems = noteList.getElementsByClassName(noteItemClz);
for(let i = 0; i < noteItems.length; i++){
if(noteItems.innerText == titleText){
noteList.scrollTop = noteItems.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);
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");
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.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按钮
窄页面下为底部操作栏添加笔记按钮，点击可切换笔记列表显示。
https://picx.zhimg.com/v2-fd06942a601d24ea7224db43f34fab4b.png
本帖最后由 Xqh042 于 2023-9-5 16:08 编辑
* 发布到了Greasy Fork
* 为了方便移动端笔记间跳转实现了点击划线笔记时注入上一条/下一条笔记按钮
* 支持移动端左右滑动展开收起笔记列表
* 双击划线笔记跳转到下一条笔记
* 修复了章节内多页笔记往前跳转的问题
* 如火狐等浏览器因为剪切板api的问题笔记间跳转会出现问题
p.p.s 通过微信读书自带的划线复制文本实现笔记间跳转，注意使用时剪切板是否有重要内容
(没想明白为啥火狐浏览器微信读书网页端能实现写入剪切板，但我用js就没办法读取(
油猴脚本地址
https://pic1.zhimg.com/v2-3a81e124b6ac027009fed82390db3459.gif
页:
[1]