如果你有用电脑看“微信读书”的习惯，那我想今天这篇文章或许会对你有用。
我自己在用电脑看“微信读书”，会觉得页面宽度为被占满，读书效率不能够最大化。
所以我今天分享的插件就是解决这个问题，该插件适用于所有基于 Google Chrome 框架的浏览器。 Chrome、Firefox、Microsoft Edge、Safari 和 Opera 均正式支持它。
我的插件在原作者“SimonDW”的基础上，更改了两处：
①背景改为为白色+黑色
②实现宽度调整的记忆功能，确保下次打开网页时能够自动应用上一次设置的宽度。
更改后的微信读书示意图：
上面的“微信读书网页版功能综合”当前主要实现的功能包括：
更改字体和背景颜色：代码中包含多个GM_addStyle函数调用，这些函数用于更改网页上特定元素的字体和背景颜色。例如，将背景色设置为白色、绿色或黑色，同时更改字体颜色。
页面宽度调整：脚本提供了增加或减少页面宽度的功能，并实现了宽度调整的记忆功能。这意味着用户对页面宽度的调整会被保存，当他们下次访问时，页面将保持上次调整的宽度。
头部侧栏的显示/隐藏：实现了一个功能，当用户向上滑动页面时，会隐藏头部侧栏，向下滑动时则显示。
自动滚动功能：脚本允许页面自动滚动，用户可以通过按钮控制滚动的开始和停止。
代码复制功能：为代码段添加了一个复制按钮，用户可以方便地复制代码。
图片下载功能：为图片添加了下载按钮，允许用户下载图片。
jQuery使用：脚本利用jQuery来检测DOM元素的变化，比如当新的文章内容加载时。
1、插件安装步骤（以edge浏览器为例）
1、找到“扩展”按钮
2、点击“打开 Microsoft Edge 加载项”
3、搜索“篡改猴”并安装
4、点击已经安装的“篡改猴”的扩展选项
5、找到“+”号，在代码框中输入代码
6、点击保存，就可以在"已安装脚本"中看到。
2、“微信读书网页版功能综合”代码
// ==UserScript==
// @name 微信读书网页版功能综合
// @version 0.3.6
// @namespace http://tampermonkey.net/
// @description 更改背景颜色（白色+黑色），更改字体颜色，增减页面宽度（实现宽度调整的记忆功能），上划隐藏头部侧栏，PC自动滚动，代码复制与图片下载，
// @contributor Li_MIxdown;hubzy;xvusrmqj;LossJ;JackieZheng;das2m;harmonyLife
// @author SimonDW（周小周改）
// @match https://weread.qq.com/web/reader/*
// @require https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/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
// @downloadURL https://update.greasyfork.org/scripts/421994/%E5%BE%AE%E4%BF%A1%E8%AF%BB%E4%B9%A6%E7%BD%91%E9%A1%B5%E7%89%88%E5%8A%9F%E8%83%BD%E7%BB%BC%E5%90%88.user.js
// @updateURL https://update.greasyfork.org/scripts/421994/%E5%BE%AE%E4%BF%A1%E8%AF%BB%E4%B9%A6%E7%BD%91%E9%A1%B5%E7%89%88%E5%8A%9F%E8%83%BD%E7%BB%BC%E5%90%88.meta.js
// ==/UserScript==
GM_addStyle("*{font-family: TsangerJinKai05 !important;}");
GM_addStyle(".readerTopBar{font-family: SourceHanSerifCN-Bold !important;}");
GM_addStyle(".bookInfo_title{font-family: SourceHanSerifCN-Bold !important;}");
GM_addStyle(".readerTopBar_title_link{font-family: SourceHanSerifCN-Bold; !important; font-weight:bold !important;}");
GM_addStyle(".readerTopBar_title_chapter{font-family: SourceHanSerifCN-Bold !important;}");
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerImage_opacity {background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerBackground_opacity{background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".wr_whiteTheme .readerContent .app_content{background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".readerChapterContent{color: rgba(0,0,0,1) !important;}");
GM_addStyle(".readerControls{margin-left: calc(50% - 60px) !important;}");
GM_addStyle(".readerControls{margin-bottom: -28px !important;}");
//GM_addStyle(".readerChapterContent{font-weight: bold !important;}");
$(window).on('load', async function () {
'use strict';
// 基于jQuery检测dom出现
function jianceDOM(classname){
return new Promise(res=>{
let max=80;
let jiance=setInterval(()=>{
if(document.querySelectorAll(classname).length){
clearInterval(jiance)
res(true)
}
if(max<=0){
clearInterval(jiance)
res(false)
}
max--
},100)
})
}
// 检测文章内容发生变化
$("body").append(`
<div id="module_box" style="
position: fixed;
left:0;
top:200px;
bottom:0;
right:0;
margin:auto;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: rgba(0, 0, 0, 0.3);
font-size: 24px;
z-index:999999;
display:none;">复制成功</div>
`)
async function add_copy_code_btn() {
// 检测代码段是否存在
let res_dom_code = await jianceDOM("pre")
let copy_code_btn_length = $("#copy_code").length
if (res_dom_code && copy_code_btn_length==0) {
// $("pre").css("position","relative")
$("pre").append(`
<button id="copy_code" style="position: absolute;right: 0;top: 0;color:white;cursor:pointer;z-index:99999;">📋</button>
`)
}
}
add_copy_code_btn()
// 复制按钮
$(document).on("click","#copy_code",function(){
// let code_text = $(this).closest('pre').text().replace("📋","")
//let code_text = $(this).closest('pre')[0].childNodes[0].textContent
let code_text = $(this).closest('pre')[0].textContent.replace("📋","")
GM_setClipboard(code_text)
$("#module_box").fadeIn()
setTimeout(() => {
$("#module_box").fadeOut()
},1000)
// GM_notification({text:'复制成功',timeout:0})
})
$(document).on("click","button[title='下一章']",function(){
// console.log("下一章按钮")
add_copy_code_btn()
add_copy_img_btn()
})
$(document).on("click",".chapterItem",function(){
add_copy_code_btn()
add_copy_img_btn()
})
async function add_copy_img_btn() {
let res_dom_img = await jianceDOM('.wr_readerImage_opacity')
let open_img_btn_length = $("button[name='btn_cxy_open_img_page']").length
let get_img_btn_length = $("button[name='btn_cxy_get_img']").length
if (res_dom_img && open_img_btn_length == 0 && get_img_btn_length == 0) {
console.log("图片个数===",$('.wr_readerImage_opacity').length)
$('.wr_readerImage_opacity').each((ind,ele) => {
let btn = document.createElement("button")
btn.name = "btn_cxy_open_img_page"
btn.innerHTML = "📋"
let btn2 = document.createElement("button")
btn2.name = "btn_cxy_get_img"
btn2.innerHTML = "▼"
// 设置指定位置
// let xy = $(ele)[0].getBoundingClientRect()
btn.style.cssText = `position: absolute;right: 0px;top: ${ele.offsetTop-50}px;color:white;z-index:9999; cursor:pointer`
btn2.style.cssText = `position: absolute;right: 0px;top: ${ele.offsetTop-20}px;color:#888;z-index:9999; cursor:pointer`
// 添加按钮
ele.after(btn)
ele.after(btn2)
})
}
}
add_copy_img_btn()
// 打开新窗口 显示图片
$(document).on("click","button[name='btn_cxy_open_img_page']",function(){
let link = $(this).prev().prev().attr("src")
GM_openInTab(link, { active: true });
})
// 下载图片按钮
$(document).on("click","button[name='btn_cxy_get_img']",function(){
let link = $(this).prev().attr("src")
// console.log(link);
GM_download({
url: link,
name: new Date().getTime()+'.jpg',
headers: {
"User-Agent": "netdisk;6.7.1.9;PC;PC-Windows;10.0.17763;WindowsBaiduYunGuanJia",
},
onprogress: function (e) {
// console.log(JSON.stringify(e))
},
});
})
// 以下是关于宽度调整的代码
function getCurrentMaxWidth(element) {
let currentValue = window.getComputedStyle(element).maxWidth;
currentValue = currentValue.substring(0, currentValue.indexOf('px'));
return parseInt(currentValue);
}
function changeWidth(increase) {
const step = 100; // 每次调整的步长
const item1 = document.querySelector(".readerContent .app_content");
const item2 = document.querySelector('.readerTopBar');
let currentValue = getCurrentMaxWidth(item1);
if (increase) {
currentValue += step;
} else {
currentValue -= step;
currentValue = Math.max(currentValue, step); // 确保最小宽度为100px
}
GM_setValue('contentWidth', currentValue); // 保存当前宽度值
applyWidth(currentValue); // 应用新的宽度
}
function applyWidth(width) {
const item1 = document.querySelector(".readerContent .app_content");
const item2 = document.querySelector('.readerTopBar');
item1.style['max-width'] = `${width}px`;
item2.style['max-width'] = `${width}px`;
window.dispatchEvent(new Event('resize')); // 触发resize事件以更新UI
}
// 在页面加载时应用上次保存的宽度
let savedWidth = GM_getValue('contentWidth', 800); // 如果没有保存的值，则默认为800px
applyWidth(savedWidth); // 应用宽度
// 在文档中添加宽度调整按钮
var widthButtonsHtml = "<button id='lv-button1' class='readerControls_item widthIncrease' style='color:#6a6c6c;cursor:pointer;'>加宽</button><button id='lv-button2' class='readerControls_item widthDecrease' style='color:#6a6c6c;cursor:pointer;'>减宽</button>";
$('.readerControls').append(widthButtonsHtml);
// 添加宽度调整按钮的事件监听
document.getElementById('lv-button1').addEventListener('click', () => changeWidth(true));
document.getElementById('lv-button2').addEventListener('click', () => changeWidth(false));
var butDiy2 = "<button id='自动滚动' class='readerControls_item autoScroll' style='color:#6a6c6c;cursor:pointer;'>滚动X1</button><button id='停止滚动' class='readerControls_item autoScrollOff' style='color:#6a6c6c;cursor:pointer;'>停止</button>"
$('.readerControls').append(butDiy2);
var num = 1
$('.autoScroll').click(function () {
num++;
autoScroll()
$('.autoScroll').html('播放X' + num)
})
// 滑动屏幕，滚至页面底部
function autoScroll() {
var distance = 1;
var timer = setInterval(() => {
var totalHeight = document.documentElement.scrollTop;
var scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= scrollHeight) {
clearInterval(timer);
}
$('.autoScrollOff').click(function () {
num = 0
clearInterval(timer);
})
}, 20);
}
var windowTop = 0;
$(window).scroll(function () {
let scrollS = $(this).scrollTop();
let selBtn = document.querySelector('.readerTopBar');
let readerControl = document.querySelector(".readerControls");
$('.readerControls').mouseenter ( function () {
$('.readerControls').css('opacity','1')
})
$('.readerControls').mouseleave ( function () {
$('.readerControls').css('opacity','0')
})
if (scrollS >= windowTop) {
// 上划显示
selBtn.style.opacity = 0;
windowTop = scrollS;
} else {
// 下滑隐藏
selBtn.style.opacity = 1;
windowTop = scrollS;
}
});
})();
添加好代码以后，再次打开微信读书，你看到的界面就是这样的：
3、更改背景颜色
我自己是比较喜欢读书界面为白色，最开始的作者"SimonDW"是绿色打底，如图：
如果你们还是更喜欢绿色，可以将如下代码：
// 原来的颜色设置
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerImage_opacity {background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerBackground_opacity{background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".wr_whiteTheme .readerContent .app_content{background-color: rgba(255,255,255,1) !important;}");
GM_addStyle(".readerChapterContent{color: rgba(0,0,0,1) !important;}");
替换为：
// 修改后的颜色设置
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerImage_opacity {background-color: rgba(216,226,200,80) !important;}");
GM_addStyle(".wr_whiteTheme .renderTargetContainer .renderTargetContent .wr_readerBackground_opacity{background-color: rgba(216,226,200,80) !important;}");
GM_addStyle(".wr_whiteTheme .readerContent .app_content{background-color: rgba(216,226,200,80) !important;}");
GM_addStyle(".readerChapterContent{color: rgba(0,0,0,100) !important;}");
创作不易，对你有帮助欢迎打赏、点赞、分享~
本文使用 文章同步助手 同步
