您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
将宽度改的更宽,看起来舒服一些,在url地址栏加参数,自定义程度高一些,也添加了几个白色主题下的背景颜色,对眼睛更友好写吧
// ==UserScript== // @name 微信读书加宽可视范围和几个白色主题的护眼模式 // @namespace http://tampermonkey.net/ // @version 1.1.2 // @description 将宽度改的更宽,看起来舒服一些,在url地址栏加参数,自定义程度高一些,也添加了几个白色主题下的背景颜色,对眼睛更友好写吧 // @author yehuda // @icon https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/favicon/favicon_32h.png // @match https://weread.qq.com/web/reader/* // @match *://https://weread.qq.com/web/reader/* // @license MIT // @grant none // ==/UserScript== (function () { 'use strict'; // bg 为背景颜色 // rbg为导航栏头部header的颜色 // bgb为画布即阅读容器的背景颜色 // bgbBar为打开抽屉侧边栏的背景颜色 // 支持RGB、RGBA、十六进制等等格式 const colors = [ { bg: 'rgba(236, 217, 172, 0.4)', rbg: 'rgba(243, 227, 188, 1)', bgb: 'rgba(251, 239, 209, 0.5)',bgbBar: '#dbdbdb', white: true }, { bg: 'rgba(102, 128, 102, 0.1)', rbg: 'rgba(65, 94, 62, 1)', bgb: 'rgba(102, 128, 102, 0.25)', bgbbgbBar: '#dbdbdb', white: true }, { bg: '#b5b5b5', rbg: '#c5c5c5', bgb: '#dbdbdb',bgbBar: '#dbdbdb', white: true } ]; const getUrlParam = (name, url) => { let qs = arguments[1] || window.location.href, reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'), r = qs.substr(qs.indexOf('?') + 1).match(reg); if (r !== null) { let i = decodeURI(r[2]).indexOf('#'); if (i !== -1) { return decodeURI(r[2]).substring(0, i); } else { return decodeURI(r[2]); } } else { return ''; } }; const tarWidth = getUrlParam('w') || '1500'; const tartoolsMargin = getUrlParam('m') || '800'; const fontSize_range = getUrlParam('r') || '-75'; const routerViewDOM = document.getElementById('routerView'); if (routerViewDOM) { // 主体内容宽度 const app_contentTarDOM = routerViewDOM.getElementsByClassName('app_content').item(0); if (app_contentTarDOM) { app_contentTarDOM.style.maxWidth = tarWidth ? `${tarWidth}px` : ``; const readerTopBarDOM = routerViewDOM.getElementsByClassName('readerTopBar').item(0); if (readerTopBarDOM) { readerTopBarDOM.style.maxWidth = tarWidth ? `${tarWidth}px` : ``; } } // 功能栏定位 const readerControlsDOM = routerViewDOM.getElementsByClassName('readerControls').item(0); if (readerControlsDOM) { readerControlsDOM.style.marginLeft = tartoolsMargin ? `${tartoolsMargin}px` : ``; // 字体大小设置 const fontSizerangeDOM = routerViewDOM.getElementsByClassName('readerControls_fontSize').item(0); if (fontSizerangeDOM) { // 大小选择栏位置 fontSizerangeDOM.addEventListener( 'click', (e) => { e.stopPropagation(); fontSizerangeDOM.style.transition = `none`; fontSizerangeDOM.style.transform = `translateX(${fontSize_range}px)`; }, false ); document.addEventListener('click', () => { fontSizerangeDOM.style.transition = `none`; fontSizerangeDOM.style.transform = ``; }); } } } // 两个弹框设置成紧贴右边 const readerCatalogDOM = document.getElementsByClassName('readerCatalog').item(0); const readerNotePaneltDOM = document.getElementsByClassName('readerNotePanel').item(0); if (readerCatalogDOM && readerCatalogDOM.style) { readerCatalogDOM.style.left = 'unset'; readerCatalogDOM.style.right = '0'; readerNotePaneltDOM.style.left = 'unset'; readerNotePaneltDOM.style.right = '0'; } setTimeout(load, 100); function load() { const style = getStyleStr(); document.head.innerHTML = document.head.innerHTML + style; init(); // 注销下载app按钮绑定的事件 let appDownloadbutton = document.querySelector('[title="下载App"]'); // 获取改变主体颜色的按钮 let themeButton = document.querySelector('[title="深色"]') || document.querySelector('[title="浅色"]'); themeButton.addEventListener('click', () => { removeEventListeners(appDownloadbutton); if (themeButton.title == '深色') { addWatchThemeChange(); } removeStyle(); }); removeEventListeners(appDownloadbutton); addWatchThemeChange(); // 添加主体样式监听 function addWatchThemeChange() { appDownloadbutton = document.querySelector('[title="下载App"]'); appDownloadbutton.addEventListener('click', function () { const body = document.body; const mode = body.getAttribute('color-mode'); let nextMode = null; if (!mode) { nextMode = 0; body.classList.add('wr-mode-0'); body.setAttribute('color-mode', 0); } else { nextMode = parseInt(mode) + 1; if (nextMode >= colors.length) { nextMode = 0; } } changeMode(nextMode, mode); }); } } // 获取样式 function init() { const localMode = localStorage.getItem('wr-mode'); if (localMode) { changeMode(localMode); } } // 删除绑定的事件 function removeEventListeners(element) { // 获取目标元素下的所有子孙元素 const descendants = element.getElementsByTagName('*'); // 移除目标元素上绑定的事件 element.replaceWith(element.cloneNode(true)); // 移除目标元素下的所有子孙元素上绑定的事件 for (let i = 0; i < descendants.length; i++) { const clone = descendants[i].cloneNode(true); descendants[i].replaceWith(clone); } } // 删除自定义的护眼样式 function removeStyle() { const body = document.body; colors.forEach((color, index) => { body.classList.remove('wr-mode-' + index); if (localStorage.getItem('wr-mode')) { localStorage.removeItem('wr-mode'); } }); } // 修改模式 function changeMode(modeIndex, currentModeIndex = null) { const body = document.body; if (currentModeIndex) { body.classList.remove('wr-mode-' + currentModeIndex); } body.classList.add('wr-mode-' + modeIndex); body.setAttribute('color-mode', modeIndex); localStorage.setItem('wr-mode', modeIndex); } // 获取初始化样式 function getStyleStr() { let style = '<style>'; for (let i = 0; i < colors.length; i++) { const color = colors[i]; style += ` body.wr-mode-${i} .change-mode-plugins span{ color:${color.white ? '#2a2a2a' : '#b9b9ba'}; } body.wr-mode-${i}{ background-color:${color.bg} !important; } body.wr-mode-${i} .readerTopBar { background-color:${color.rbg} !important; } body.wr-mode-${i} .readerControls_item,body.wr-mode-${i} .readerControls_fontSize,body.wr-mode-${i} .app_content { background-color:${color.bgb} !important; } body.wr-mode-${i} .readerCatalog { background-color:${color.bgbbgbBar} !important; } body.wr-mode-${i} .chapterItem_link { border: dashed #2a2a2a !important; border-width: 0 0 2px !important; } body.wr-mode-${i} .chapterItem_text { font-size: 18px !important; } body.wr-mode-${i} .readerNotePanel { background-color:${color.bgbbgbBar} !important; } body.wr-mode-${i} .sectionListItem_divider { border: dashed #2a2a2a !important; border-width: 0 0 2px !important; } body.wr-mode-${i} .readerNotePanelBottomBar { border: solid ${color.bgbBar} !important; border-width: 0 0 2px !important; background-color:${color.rbg} !important; } `; if (color.white) { style += ` body.wr-mode-${i} .readerFooter_button,body.wr-mode-${i} .readerFooter_button:hover{ background-color:${color.bg} !important; color:#2a2a2a !important; } `; } } style += '</style>'; return style; } })();