您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Keyboard navigation, inertial drag scrolling, page rotation, chapter preloading and chapter tracking for MangaStream sites, like Asura Scans, Flame Scans, Void Scans, Luminous Scans, Shima Scans, Night Scans, Freak Scans.
当前为
// ==UserScript== // @name Usability Tweaks for Manga sites. // @namespace Itsnotlupus Industries // @match https://asura.gg/* // @match https://asura.nacm.xyz/* // @match https://flamescans.org/* // @match https://void-scans.com/* // @match https://luminousscans.com/* // @match https://shimascans.com/* // @match https://nightscans.org/* // @match https://freakscans.com/* // @match https://mangastream.themesia.com/* // @match https://manga-scans.com/* // @noframes // @version 2.6 // @author Itsnotlupus // @license MIT // @description Keyboard navigation, inertial drag scrolling, page rotation, chapter preloading and chapter tracking for MangaStream sites, like Asura Scans, Flame Scans, Void Scans, Luminous Scans, Shima Scans, Night Scans, Freak Scans. // @run-at document-start // @require https://greasyfork.org/scripts/468394-itsnotlupus-tiny-utilities/code/utils.js // @grant GM_setValue // @grant GM_getValue // ==/UserScript== /* not currently supported, but might later: realmscans.xyz manhwafreak.com manhwafreak-fr.com */ /* jshint esversion:11 */ /* eslint curly: 0 no-return-assign: 0, no-loop-func: 0, no-multi-spaces: 0 */ /* global log, addStyles, $, $$, $$$, events, rAF, observeDOM, untilDOM, until, fetchHTML, prefetch, crel */ // manga site hostnames are prone to changing often apparently. adjust. function transferData() { const keys = ["bookmark", "lastReadChapterKey", "seriesIdHrefMap", "seriesIdLatestMap"]; // NOTE: This transfer map has to be updated manually each time a site changes domain. const transfers = { "asura.nacm.xyz": "asura.gg" }; if (transfers[location.hostname]) { const newSite = location.hostname; const oldSite = transfers[newSite]; for (const key of keys) { const oldKey = `${oldSite}/${key}`; const newKey = `${newSite}/${key}`; const oldValue = GM_getValue(oldKey); const newValue = GM_getValue(newKey); if (newValue) return; // already transferred, or risk of iffy conflict. abort. GM_setValue(newKey, oldValue); } log(`Bookmark data transferred from ${oldSite} to ${newSite} successfully.`); } } function cssCleanup() { addStyles(` /* remove ads and blank space between images were ads would have been */ [class^="ai-viewport"], .code-block, .blox, .kln, [id^="teaser"] { display: none !important; } /* hide various header and footer content. */ .socialts, .chdesc, .chaptertags, .postarea >#comments, .postbody>article>#comments, .container>.row>.margin-small { display: none; } .container>.row>.bg-alert { visibility: hidden; } /* asura broke some of MangaStream's CSS. whatever. */ .black #thememode { display: none } /* luminousscans junk */ .flame, .flamewidthwrap { display: none !important } .listupd .bs .bsx .limit .type { right: initial; left: 5px } /* manga-scans tweaks */ .navbar.navbar-fixed-top { position: absolute; } .manga-footer1 { display: none; } @media(max-width: 900px) { .post-navigation.post-navigation:nth-of-type(1) { display:block; } .post-navigation.post-navigation { bottom: auto !important; position: static !important; width: auto; } } `); // on asura.gg, poorly placed discord links are breaking the bottom chapter selector. lose nothing of value. (async()=>{ while(true) { const a =await untilDOM(`a[href*="discord"]:not([itemprop="url"])`); a.replaceWith(...a.childNodes) } })(); // recover from asura's half-assing their domain change. addEventListener('load', () => { const { jQuery, sf_input } = unsafeWindow; if (jQuery && sf_input) { jQuery(sf_input)?.unbind?.().removeData?.(); jQuery(sf_input)?.ajaxyLiveSearch?.({"expand":false,"searchUrl":location.origin+"/?s=%s","text":"Search","delay":500,"iwidth":180,"width":350,"ajaxUrl":location.origin+"/wp-admin\/admin-ajax.php","rtl":0}); } }); // reduce the time during which asura's prev/next buttons are broken on load.. untilDOM(()=>$$$(`//script[contains(text(),"ts_reader.run")]`)[0]).then(tsr=>{ const { prevUrl, nextUrl } = JSON.parse($$$(`//script[contains(text(),"ts_reader.run")]`)[0].textContent.match(/ts_reader.run\((?<json>.*)\);/).groups.json); $$`a.ch-prev-btn`.forEach(a => a.href = prevUrl); $$`a.ch-next-btn`.forEach(a => a.href = nextUrl); }); // manga-scans junk untilDOM(()=>$$$(`//div[contains(text(),"[rp-form]")]/..`)[0]).then(junk=>junk.remove()); } /** * - left/right arrow keys or A/D keys can be used to navigate chapers * - K/L keys can be used to rotate the page orientation * - dragging with the mouse can scroll the page * - mouse swiping horizontally can be used to navigate chapters * - in landscape mode, the primary mousewheel can scroll the page */ function augmentInteractions() { const CURSOR_PREV = 'data:image/svg+xml;base64,'+btoa` <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#913fe2" viewBox="0 0 14 14" width="32" height="32"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1 7.3 6.3a1 1 180 0 0 0 1.4L13 13M7 1 1.3 6.3a1 1 180 0 0 0 1.4L7 13"/> </svg>`; const CURSOR_NEXT = 'data:image/svg+xml;base64,'+btoa` <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#913fe2" viewBox="0 0 14 14" width="32" height="32"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 13 5.7-5.3a1 1 0 0 0 0-1.4L1 1m6 12 5.7-5.3a1 1 0 0 0 0-1.4L7 1"/> </svg>`; addStyles(` /* animate transitions to/from portrait modes, and avoid scrollbar jankiness */ html { transition: transform .25s, filter .5s; width: calc(100vw - 17px); } /* disable builtin drag behavior to allow drag scrolling and swiping */ * { user-select: none; -webkit-user-drag: none; } /* nav swiping cursors */ body.prev.prev { cursor: url("${CURSOR_PREV}") 16 16, auto !important; } body.next.next { cursor: url("${CURSOR_NEXT}") 16 16, auto !important; } /* drag scrolling cursor */ body.drag { cursor: grabbing !important; } html.animate-prev { transition: transform .5s; transform: translateX(100vw); } html.animate-next { transition: transform .5s; transform: translateX(-100vw); } `); // keyboard navigation. good for long strips, which is apparently all this site has. const PREV = ".ch-prev-btn,.prev-post>a"; const NEXT = ".ch-next-btn,.next-post>a"; const prev = () => $(PREV)?.click(); const next = () => $(NEXT)?.click(); // animate chapter changes untilDOM("body").then(body=>body.addEventListener('click', e => { if (e.target.closest(PREV)?.getAttribute('href')?.[0]=='h') document.documentElement.classList.add('animate-prev'); if (e.target.closest(NEXT)?.getAttribute('href')?.[0]=='h') document.documentElement.classList.add('animate-next'); }, true)); // mobile firefox animation "fix" (prevent page-level transform: translateX() from changing visualViewport.scale.) $`meta[name="viewport"]`?.remove(); document.head.append(crel("meta", { name: "viewport", content: "width=device-width, initial-scale=1.01" })); addEventListener('keydown', e => document.activeElement.tagName != 'INPUT' && ({ ArrowLeft: prev, ArrowRight: next, a: prev, d: next, k: () => rotatePage(false), // counter-clockwise l: () => rotatePage(true), // clockwise }[e.key]?.()), true); // inertial drag scrolling, swipe navigation, some rotation logic. let orientation = 0; // degrees. one of [0, 90, 180, 270 ]; let rotating = false; // disable rotation until rotating is false again. const wheelFactor = { 0:0, 90: 1, 180: 0, 270: -1 }; let [ delta, drag, dragged, navPos ] = [0, false, false, 0]; let previousTouch; const eventListeners = { // wheel event, used to handle landscape scrolling wheel: e => scrollBy(e.wheelDeltaY * wheelFactor[orientation], 0), // mouse dragging/swiping mousedown: () => { [ delta, drag, dragged, navPos ] = [0, true, false, 0]; }, mousemove: e => { if (drag) { if (wheelFactor[orientation]) { scrollBy(delta=-e.movementX, 0); } else { scrollBy(0, delta=-e.movementY); } if (!wheelFactor[orientation]) { // nav swiping is just too confusing in landscape mode. const width = $`#readerarea,body`.clientWidth; navPos+=e.movementX; if (navPos < -width/4) document.body.classList.add("prev"); else if (navPos > width/4) document.body.classList.add("next"); else document.body.classList.remove("prev", "next"); } if (Math.abs(delta)>3) { dragged = true; document.body.classList.add('drag'); } } }, mouseup: () => { if (drag) { drag=false; rAF((_, next) => Math.abs(delta*=0.98)>1 && next(wheelFactor[orientation]?scrollBy(delta,0):scrollBy(0, delta))); } const goPrev = document.body.classList.contains("prev"); const goNext = document.body.classList.contains("next"); document.body.classList.remove("prev", "next", "drag"); if (dragged) { dragged = false; addEventListener('click', e => { if (goPrev || goNext) return; e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); } if (goPrev) prev(); if (goNext) next(); } }; events(eventListeners); // mobile nav swiping swipeHandler({ left: next, right: prev }); // non-webkit browsers need this for -webkit-user-drag: none document.addEventListener('dragstart', e=>e.preventDefault()); function swipeHandler({ left=()=>0, right=()=>0 }) { const SWIPE_TIMEOUT = 500, SWIPE_THRESHOLD = 100, VERTICAL_THRESHOLD = 50; let screenX, screenY, t; events({ touchstart(e) { ({screenX, screenY} = e.changedTouches[0]); t = Date.now(); }, touchend(e) { const touch = e.changedTouches[0]; const distX = touch.screenX - screenX; const Y = Math.abs(touch.screenY - screenY); if (Date.now()-t>SWIPE_TIMEOUT) return; // too slow, not a swipe. if (Y>VERTICAL_THRESHOLD) return; // not horizontal enough. if (distX < -SWIPE_THRESHOLD) left(); if (distX > SWIPE_THRESHOLD) right(); } }, document); } // This page rotation thingy actually feels good now. async function rotatePage(clockwise) { if (rotating) return; rotating = true; const html = document.documentElement; html.style.overflow = "hidden"; const { scrollTop, scrollLeft, clientWidth, clientHeight, style } = html; const { scrollHeight } = document.body; const oldOriginY = parseInt(style.transformOrigin.split(" ")[1]); let scrollWidth; // html.scrollWidth is wrong on Firefox. compute it ourselves. const from = ({ angle, originY, sw=()=>0, topFactor=0 }) => next => () => { style.transition = "initial"; style.transformOrigin = `${clientWidth/2}px ${originY()}px`; style.transform=`rotate(${angle(next == to0)}deg)`; scrollBy({top: topFactor*(originY() - oldOriginY), behavior:"instant"}); scrollTo({left: angle()%180?0:void 0, behavior: "instant"}); style.transition=''; scrollWidth = clientWidth/2 + originY(); return next(angle()==0); }; const to = ({angle, ty=()=>0, left=()=>void 0, top=()=>void 0}) => (flag) => new Promise(next => { style.transform=`rotate(${angle(flag)}deg)`; html.addEventListener('transitionend', () => { style.transition="initial"; if (angle()==180) style.transformOrigin = `${clientWidth/2}px ${scrollHeight/2}px`; style.transform=`rotate(${angle(true)}deg) translate(0,${ty()}px)`; scrollTo({left:left(), top:top(), behavior: "instant"}); style.transition =""; style.overflow = angle()%180 ? "auto hidden" : "hidden auto"; if (angle()==0) style.transform =''; next(angle()); }, {once: true}); }); const from0 = from({ angle:()=>0, originY:()=>scrollTop + clientHeight/2 }); const from90 = from({ angle:()=>90, originY:()=>scrollHeight - scrollLeft - clientWidth/2 - 1, topFactor:1 }); const from180 = from({ angle:()=>180, originY:()=>scrollHeight - scrollTop - clientHeight/2, topFactor:2 }); const from270 = from({ angle:to0=>to0?-90:270, originY:()=>scrollLeft + clientHeight/2, topFactor:1 }); const to0 = to({ angle:()=>0 }); const to90 = to({ angle:()=>90, ty:()=>scrollWidth - scrollHeight, left:()=>scrollHeight - html.scrollTop - clientWidth/2 - clientHeight/2 }); const to180 = to({ angle:()=>180, top:()=>scrollHeight - html.scrollTop - clientHeight }); const to270 = to({ angle:from0=>from0?-90:270, ty:()=>html.scrollTop, left:()=>html.scrollTop }); const rotations = { 0: [ from0(to270), from0(to90) ], 90: [ from90(to0), from90(to180) ], 180: [ from180(to90), from180(to270) ], 270: [ from270(to180), from270(to0) ] } orientation = await rotations[orientation][~~clockwise](); rotating = false; } } function loadAllChapterImages() { // don't be shy about loading an entire chapter untilDOM(()=>$$`img[loading="lazy"]`).then(images=>images.forEach(img => img.loading="eager")); } function retryLoadingBrokenImages() { // retry loading broken images const imgBackoff = new Map(); const imgNextRetry = new Map(); const retryImage = img => { log("RETRY LOADING IMAGE! ",img.src, {complete:img.complete, naturalHeight:img.naturalHeight}, img); const now = Date.now(); const nextRetry = imgNextRetry.has(img) ? imgNextRetry.get(img) : (imgNextRetry.set(img, now),now); if (nextRetry <= now) { // exponential backoff between retries: 0ms, 250ms, 500ms, 1s, 2s, 4s, 8s, 10s, 10s, ... imgBackoff.set(img, Math.min(10000,(imgBackoff.get(img)??125)*2)); imgNextRetry.set(img, now + imgBackoff.get(img)); img.src=img.src; } else { setTimeout(()=>retryImage(img), nextRetry - now); } } events({ load() { observeDOM(() => { [...document.images].filter(img=>img.complete && !img.naturalHeight && getComputedStyle(img).display!='none').forEach(retryImage); }); }}); } function prefetchNextChapterImages() { // and prefetch the next chapter's images for even less waiting. untilDOM(`a.ch-next-btn[href^="http"]`).then(a => fetchHTML(a.href).then(doc => [...doc.images].forEach(img => prefetch(img.src)))); } function trackLastReadChapterAndBookmarks() { addStyles(` /* add a badge on bookmark items showing the number of unread chapters */ .unread-badge { position: absolute; top: 0; right: 0; z-index: 9999; display: block; padding: 2px; margin: 5px; border: 1px solid #0005b1; border-radius: 12px; background: #ffc700; color: #0005b1; font-weight: bold; font-family: cursive; transform: rotate(10deg); width: 24px; height: 24px; line-height: 18px; text-align: center; } /* text mode badge */ .soralist .unread-badge { position: initial; display: inline-block; zoom: 0.8; } `); // have bookmarks track the last chapter you read // NOTE: If you use TamperMonkey, you can use their "Utilities" thingy to export/import this data across browsers/devices // (I wish this was an automatic sync tho.) const LAST_READ_CHAPTER_KEY = `${location.hostname}/lastReadChapterKey`; const SERIES_ID_HREF_MAP = `${location.hostname}/seriesIdHrefMap`; const SERIES_ID_LATEST_MAP = `${location.hostname}/seriesIdLatestMap`; const BOOKMARK = `${location.hostname}/bookmark`; const BOOKMARK_HTML = `${location.hostname}/bookmarkHTML`; // backward-compatibility - going away soon. const X_LAST_READ_CHAPTER_KEY = "lastReadChapter"; const X_SERIES_ID_HREF_MAP = "seriesIdHrefMap"; const X_SERIES_ID_LATEST_MAP = "seriesIdLatestMap"; const lastReadChapters = GM_getValue(LAST_READ_CHAPTER_KEY, GM_getValue(X_LAST_READ_CHAPTER_KEY, JSON.parse(localStorage.getItem(X_LAST_READ_CHAPTER_KEY) ?? "{}"))); const seriesIdHrefMap = GM_getValue(SERIES_ID_HREF_MAP, GM_getValue(X_SERIES_ID_HREF_MAP, JSON.parse(localStorage.getItem(X_SERIES_ID_HREF_MAP) ?? "{}"))); const seriesIdLatestMap = GM_getValue(SERIES_ID_LATEST_MAP, GM_getValue(X_SERIES_ID_LATEST_MAP, JSON.parse(localStorage.getItem(X_SERIES_ID_LATEST_MAP) ?? "{}"))); // sync site bookmarks into userscript data. // rules: // 1. A non-empty usBookmarks is always correct on start. // 2. any changes to localStorage while the page is loaded updates usBookmarks. const usBookmarks = GM_getValue(BOOKMARK, GM_getValue('bookmark', [])) ?? []; if (usBookmarks.length) { localStorage.bookmark = JSON.stringify(usBookmarks); } else { GM_setValue(BOOKMARK, JSON.parse(localStorage.bookmark ?? '[]')); } (async function watchBookmarks() { let lsb = localStorage.bookmark; while (true) { await until(() => lsb !== localStorage.bookmark); lsb = localStorage.bookmark; GM_setValue(BOOKMARK, JSON.parse(lsb)); } })(); function getLastReadChapter(post_id, defaultValue = {}) { return lastReadChapters[post_id] ?? defaultValue; } function setLastReadChapter(post_id, chapter_id, chapter_number) { lastReadChapters[post_id] = { id: chapter_id, number: chapter_number }; GM_setValue(LAST_READ_CHAPTER_KEY, lastReadChapters); } function getSeriesId(post_id, href) { if (post_id) { seriesIdHrefMap[href] = post_id; GM_setValue(SERIES_ID_HREF_MAP, seriesIdHrefMap); } else { post_id = seriesIdHrefMap[href]; } return post_id; } function getLatestChapter(post_id, chapter) { if (chapter) { seriesIdLatestMap[post_id] = chapter; GM_setValue(SERIES_ID_LATEST_MAP, seriesIdLatestMap); } else { chapter = seriesIdLatestMap[post_id]; } return chapter; } // series card decorations, used in bookmarks and manga lists pages. const CHAPTER_REGEX = /\bChapter (?<chapter>\d+)\b|\bch.(?<ch>\d+)\b/i; async function decorateCards(reorder = true) { const cards = await untilDOM(() => $$$("//div[contains(@class, 'listupd')]//div[contains(@class, 'bsx')]/..")); cards.reverse().forEach(b => { const post_id = getSeriesId(b.firstElementChild.dataset.id, $('a', b).href); const epxs = $('.epxs',b)?.textContent ?? b.innerHTML.match(/<div class="epxs">(?<epxs>.*?)<\/div>/)?.groups.epxs; const latest_chapter = getLatestChapter(post_id, parseInt(epxs?.match(CHAPTER_REGEX)?.groups.chapter)); const { number, id } = getLastReadChapter(post_id); if (id) { const unreadChapters = latest_chapter - number; if (unreadChapters) { // reorder bookmark, link directly to last read chapter and slap an unread count badge. if (reorder) b.parentElement.prepend(b); $('a',b).href = '/?p=' + id; $('.limit',b).prepend(crel('div', { className: 'unread-badge', textContent: unreadChapters<100 ? unreadChapters : '💀', title: `${unreadChapters} unread chapter${unreadChapters>1?'s':''}` })) } else { // nothing new to read here. gray it out. b.style = 'filter: grayscale(70%);opacity:.9'; } } else { // we don't have data on that series. leave it alone. } }); } // text-mode /manga/ page. put badges at the end of each series title, and strike through what's already read. async function decorateText() { const links = await untilDOM(()=>$`.soralist a.series` && $$`.soralist a.series`); links.forEach(a => { const post_id = getSeriesId(a.rel, a.href); const latest_chapter = getLatestChapter(post_id); const { number, id } = getLastReadChapter(post_id); if (id) { const unreadChapters = latest_chapter - number; if (unreadChapters) { a.href = '/?p=' + id; a.append(crel('div', { className: 'unread-badge', textContent: unreadChapters<100 ? unreadChapters : '💀', title: `${unreadChapters} unread chapter${unreadChapters>1?'s':''}` })) } else { // nothing new to read here. gray it out. a.style = 'text-decoration: line-through;color: #777' } } }) } // page specific tweaks const chapterMatch = document.title.match(CHAPTER_REGEX); if (chapterMatch) { until(()=>unsafeWindow.post_id).then(() => { // We're on a chapter page. Save chapter number and id if greater than last saved chapter number. const chapter_number = parseInt(chapterMatch.groups.chapter ?? chapterMatch.groups.ch); const { post_id, chapter_id } = unsafeWindow; const { number = 0 } = getLastReadChapter(post_id); if (number<chapter_number) { setLastReadChapter(post_id, chapter_id, chapter_number); } }); } if (location.pathname.match(/^\/bookmarks?\/$/)) (async () => { // We're on a bookmark page. Wait for them to load, then tweak them to point to last read chapter, and gray out the ones that are fully read so far. setTimeout(()=> { if (!$`#bookmark-pool [data-id]`) { // no data yet from bookmark API. show a fallback. $`#bookmark-pool`.innerHTML = GM_getValue(BOOKMARK_HTML, localStorage.bookmarkHTML ?? ''); // add a marker so we know this is just a cached rendering. $`#bookmark-pool [data-id]`?.classList.add('cached'); // decorate what we have. decorateCards(); } }, 1000); // wait until we get bookmark markup from the server, not cached. await untilDOM("#bookmark-pool .bs:first-child [data-id]:not(.cached)"); // bookmarks' ajax API is flaky (/aggressively rate-limited) - mitigate. GM_setValue(BOOKMARK_HTML, $`#bookmark-pool`.innerHTML); decorateCards(); })(); else { // try generic decorations on any non-bookmark page decorateCards(false); decorateText(); } untilDOM(`#chapterlist`).then(() => { // Add a "Continue Reading" button on main series pages. const post_id = $`.bookmark`.dataset.id; const { number, id } = getLastReadChapter(post_id); // add a "Continue Reading" button for series we recognize if (id) { $`.lastend`.prepend(crel('div', { className: 'inepcx', style: 'width: 100%' }, crel('a', { href: '/?p=' + id }, crel('span', {}, 'Continue Reading'), crel('span', { className: 'epcur' }, 'Chapter ' + number)) ) ); } }); } function collapseFooters() { addStyles(` /* style a custom button to expand collapsed footer areas */ button.expand { float: right; border: 0; border-radius: 20px; padding: 2px 15px; font-size: 13px; line-height: 25px; background: #333; color: #888; font-weight: bold; cursor: pointer; } button.expand:hover { background: #444; } `); function makeCollapsedFooter({ label, section }) { const elt = crel('div', { className: 'bixbox', style: 'padding: 8px 15px;height:3em' }, crel('button', { className: 'expand', textContent: label, onclick() { section.style.display = 'block'; elt.style.display = 'none'; } })); section.parentElement.insertBefore(elt, section); } untilDOM(()=>$$$("//span[text()='Related Series' or text()='Similar Series']/../../..")[0]).then(related => { // Tweak footer content on any page that has them // 1. collapse related series. makeCollapsedFooter({label: 'Show Related Series', section: related}); related.style.display = 'none'; }); untilDOM("#comments,.margin-small").then(comments => { // 2. collapse comments. makeCollapsedFooter({label: 'Show Comments', section: comments}); }); } // userscript entrypoint function main() { // survive domain changes transferData(); // ads and antifeatures cssCleanup(); // input augmentInteractions(); // network loadAllChapterImages(); retryLoadingBrokenImages(); prefetchNextChapterImages(); // UI trackLastReadChapterAndBookmarks(); collapseFooters(); } main();