// ==UserScript== // @name 🫧404小站 — 📖清晰文本助手 // @namespace https://scriptcat.org/zh-CN/script-show-page/3638 // @version 1.0.1 // @description 🫧Windows下的浏览器浏览网页时文字往往发虚，颜色很淡，看不清楚。有了它可以让浏览器中显示的文字更加清晰，支持Chrome ，360 ，QQ ，Firfox ，Edge 等浏览器。 // @author yyy. // @license MIT // @require https://unpkg.com/sweetalert2@10.16.6/dist/sweetalert2.min.js // @resource swalStyle https://unpkg.com/sweetalert2@10.16.6/dist/sweetalert2.min.css // @match *://*/* // @run-at document-start // @grant GM_getValue // @grant GM_setValue // @grant GM_registerMenuCommand // @grant GM_getResourceText // @icon data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNMTIwIDcuMWM0LjQgMCA4IDQuMSA4IDl2NzMuMmMwIDUtMy42IDktOCA5SDgwLjhsNy4yIDE2LjNjLjggMi4zIDAgNS0xLjYgNS45LS40LjUtMS4yLjUtMS42LjVINDMuNmMtMi40IDAtNC0xLjgtNC00LjUgMC0uOSAwLTEuNC40LTEuOGw3LjItMTYuM0g4Yy00LjQgMC04LTQuMS04LTlWMTYuMWMwLTUgMy42LTkgOC05aDExMnoiIGZpbGw9IiM0NDQiLz48cGF0aCBkPSJNMTAyLjMgMzQuN2ExNC4yOCAxNC4yOCAwIDAgMC02LjItNi4yYy0yLjctMS40LTUuMy0yLjItMTIuNi0yLjJINjkuMXY1NC42aDE0LjRjNy4zIDAgOS45LS44IDEyLjYtMi4yYTE1LjQyIDE1LjQyIDAgMCAwIDYuMi02LjJjMS40LTIuNyAyLjItNS4zIDIuMi0xMi42VjQ3LjNjMC03LjMtLjgtOS45LTIuMi0xMi42em0tOC43IDI4LjJjMCAyLjQtLjIgMy4zLS43IDQuMnMtMS4yIDEuNi0yLjEgMi4xYy0uOS40LTEuOC43LTQuMi43SDgwVjM3LjJoNi42YzIuNCAwIDMuMy4yIDQuMi43czEuNiAxLjIgMi4xIDIuMWMuNC45LjcgMS44LjcgNC4ydjE4Ljd6TTUwIDQ4LjFIMzYuM1YyNi4zSDI1LjR2NTQuNWgxMC45VjU5SDUwdjIxLjhoMTAuOVYyNi4zSDUwdjIxLjh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+ // ==/UserScript== (function () { 'use strict'; let util = { getValue(name) { return GM_getValue(name); }, setValue(name, value) { GM_setValue(name, value); }, addStyle(id, tag, css) { tag = tag || 'style'; let doc = document, styleDom = doc.getElementById(id); if (styleDom) return; let style = doc.createElement(tag); style.rel = 'stylesheet'; style.id = id; tag === 'style' ? style.innerHTML = css : style.href = css; document.head.appendChild(style); }, removeElementById(eleId) { let ele = document.getElementById(eleId); ele && ele.parentNode.removeChild(ele); } }; let main = { /** * 配置默认值 */ initValue() { let value = [{ name: 'current_val', value: 0 }, { name: 'has_init', value: false }, { name: 'white_list', value: [] }]; value.forEach((v) => { util.getValue(v.name) === undefined && util.setValue(v.name, v.value); }); }, showSetting() { const MAX_OVERFLOW = 50; const decay = (value, max) => { if (max === 0) return 0; const entry = value / max; const sigmoid = 2 * (1 / (1 + Math.exp(-entry)) - 0.5); return sigmoid * max; }; const initVal = util.getValue('current_val') || 0; const customHtml = `

生活不易，猪猪叹气 —— 赏口饲料，让我少气！🐷✨

${initVal.toFixed(2)}

拖动滑块观察变化，数字越大字越清晰 (0~1，步长0.05)

`; Swal.fire({ title: '请选择清晰度', html: customHtml, showCancelButton: true, confirmButtonText: '保存', cancelButtonText: '还原', showCloseButton: true, customClass: {popup: 'mactype-popup'}, }).then((res) => { util.setValue('has_init', true); if (res.isConfirmed) { const currVal = parseFloat(document.getElementById('sliderValue').innerText); util.setValue('current_val', currVal); this.changeStyle(); } if (res.isDismissed && res.dismiss === "cancel") { util.setValue('current_val', 0); this.changeStyle(); } }); const sliderRoot = document.getElementById('sliderRoot'); const trackWrapper = document.getElementById('trackWrapper'); const sliderRange = document.getElementById('sliderRange'); const sliderValue = document.getElementById('sliderValue'); const leftIcon = document.querySelector('.left-icon'); const rightIcon = document.querySelector('.right-icon'); let isDragging = false; let region = 'middle'; let overflow = 0; const maxValue = 1; const minValue = 0; const stepSize = 0.05; const getSteppedValue = (val) => { return Math.round(val / stepSize) * stepSize; }; const updateSlider = (val) => { const percentage = (val / (maxValue - minValue)) * 100; sliderRange.style.width = `${percentage}%`; sliderValue.innerText = val.toFixed(2); util.setValue('current_val', val); this.changeStyle(); }; const handlePointerMove = (e) => { if (!isDragging || !sliderRoot) return; const { left, right, width } = sliderRoot.getBoundingClientRect(); const clientX = e.clientX; if (clientX < left) { region = 'left'; overflow = decay(left - clientX, MAX_OVERFLOW); leftIcon.style.transform = `scale(${1 + (overflow/MAX_OVERFLOW)*0.4})`; rightIcon.style.transform = 'scale(1)'; } else if (clientX > right) { region = 'right'; overflow = decay(clientX - right, MAX_OVERFLOW); rightIcon.style.transform = `scale(${1 + (overflow/MAX_OVERFLOW)*0.4})`; leftIcon.style.transform = 'scale(1)'; } else { region = 'middle'; overflow = 0; leftIcon.style.transform = 'scale(1)'; rightIcon.style.transform = 'scale(1)'; } trackWrapper.style.transform = `scaleX(${1 + overflow/width}) scaleY(${1 - overflow/(MAX_OVERFLOW*2)})`; trackWrapper.style.transformOrigin = clientX < left + width/2 ? 'right' : 'left'; let newValue = minValue + ((clientX - left) / width) * (maxValue - minValue); newValue = Math.min(Math.max(newValue, minValue), maxValue); newValue = getSteppedValue(newValue); updateSlider(newValue); }; const handlePointerUp = () => { if (!isDragging) return; isDragging = false; overflow = 0; trackWrapper.style.transform = 'scaleX(1) scaleY(1)'; leftIcon.style.transform = 'scale(1)'; rightIcon.style.transform = 'scale(1)'; document.body.style.cursor = 'default'; }; sliderRoot.addEventListener('pointerdown', (e) => { isDragging = true; handlePointerMove(e); e.target.setPointerCapture(e.pointerId); document.body.style.cursor = 'grabbing'; }); document.addEventListener('pointermove', handlePointerMove.bind(this)); document.addEventListener('pointerup', handlePointerUp); document.addEventListener('pointerleave', handlePointerUp); updateSlider(initVal); }, registerMenuCommand() { let whiteList = util.getValue('white_list'); let host = location.host; if (whiteList.includes(host)) { GM_registerMenuCommand('💡 当前网站：❌', () => { let index = whiteList.indexOf(host); whiteList.splice(index, 1); util.setValue('white_list', whiteList); history.go(0); }); } else { GM_registerMenuCommand('💡 当前网站：✔️', () => { whiteList.push(host); util.setValue('white_list', whiteList); history.go(0); }); } GM_registerMenuCommand('⚙️ 设置', () => { this.showSetting(); }); }, generateStyle() { let val = util.getValue('current_val'); return ` .mactype-popup { font-size: 14px!important } .swal2-range input { -webkit-appearance: auto!important; appearance: auto;!important } *:not(pre) { -webkit-text-stroke: ${val}px !important; text-stroke: ${val}px !important } ::selection { color: #fff;background: #338fff } `; }, changeStyle() { document.getElementById('mactype-style').innerHTML = this.generateStyle(); }, addPluginStyle() { let style = this.generateStyle(); if (document.head) { util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle')); util.addStyle('mactype-style', 'style', style); } const headObserver = new MutationObserver(() => { util.addStyle('swal-pub-style', 'style', GM_getResourceText('swalStyle')); util.addStyle('mactype-style', 'style', style); }); headObserver.observe(document.head, {childList: true, subtree: true}); }, isTopWindow() { return window.self === window.top; }, init() { this.initValue(); this.isTopWindow() && !util.getValue('has_init') && this.showSetting(); this.isTopWindow() && this.registerMenuCommand(); if (util.getValue('white_list').includes(location.host)) return; this.addPluginStyle(); } }; main.init(); })();