Greasy Fork is available in English.
Dual-page manga reading mode for 4chan threads with navigation controls and backlinks display
当前为
// ==UserScript==
// @name 4chan manga reader
// @namespace http://tampermonkey.net/
// @version 1.4
// @description Dual-page manga reading mode for 4chan threads with navigation controls and backlinks display
// @author sakanon
// @match *://boards.4chan.org/a/thread/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let active = false;
let currentIndex = 0;
let images = [];
// Add toggle button
const toggleButton = document.createElement('button');
toggleButton.innerText = '📖';
toggleButton.style.position = 'fixed';
toggleButton.style.bottom = '10px';
toggleButton.style.right = '10px';
toggleButton.style.zIndex = 9999;
document.body.appendChild(toggleButton);
toggleButton.addEventListener('click', () => {
active = !active;
if (active) {
enterReadingMode();
} else {
exitReadingMode();
}
});
async function enterReadingMode() {
document.body.style.overflowY = 'hidden';
toggleButton.style.display = 'none';
images = Array.from(document.querySelectorAll('.fileThumb')).map(a => {
return {
src: a.href.endsWith('.webm') ? a.href.replace('.webm', 's.jpg') : a.href,
postId: a.closest('.post').id,
backlinks: a.closest('.post').querySelector('.backlink')?.innerHTML || ""
};
});
currentIndex = 0;
await showImages();
document.addEventListener('keydown', navigateImages);
}
function exitReadingMode() {
document.body.style.overflowY = 'auto';
toggleButton.style.display = 'block';
const overlay = document.getElementById('reading-overlay');
if (overlay) overlay.remove();
document.removeEventListener('keydown', navigateImages);
}
async function showImages() {
const overlay = document.getElementById('reading-overlay') || createOverlay();
overlay.innerHTML = ''; // Clear previous images
// Create elements for the first image
const img1 = await createImage(images[currentIndex].src);
const img1Backlinks = createBacklinks(images[currentIndex].backlinks, true);
// Create elements for the second image (if it exists and both images are portrait)
const img2 = ((currentIndex != 0) && (currentIndex + 1 < images.length) && await isPortrait(images[currentIndex].src) && await isPortrait(images[currentIndex + 1].src)) ? await createImage(images[currentIndex + 1].src) : null;
const img2Backlinks = img2 ? createBacklinks(images[currentIndex + 1].backlinks, false) : null;
const pageWrapper = document.createElement('div');
pageWrapper.style.display = 'flex';
pageWrapper.style.justifyContent = 'center';
pageWrapper.style.flexDirection = 'row-reverse'; // For right to left reading
if (img1) pageWrapper.appendChild(img1);
if (img2) pageWrapper.appendChild(img2);
overlay.appendChild(pageWrapper);
if (img1Backlinks) overlay.appendChild(img1Backlinks);
if (img2Backlinks) overlay.appendChild(img2Backlinks);
document.body.appendChild(overlay);
}
async function navigateImages(e) {
if (e.key === 'ArrowLeft' && currentIndex + 1 < images.length) {
currentIndex += (await isPortrait(images[currentIndex].src) && currentIndex != 0 && await isPortrait(images[currentIndex + 1].src)) + 1;
await showImages();
} else if (e.key === 'ArrowRight' && currentIndex > 0) {
currentIndex -= (await isPortrait(images[currentIndex].src) && (currentIndex - 1) > 0 && await isPortrait(images[currentIndex - 1].src)) + 1;
await showImages();
} else if (e.key === 'Escape') {
exitReadingMode();
} else if (e.key === 'o') {
offsetPages();
}
}
function createOverlay() {
const overlay = document.createElement('div');
overlay.id = 'reading-overlay';
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
overlay.style.zIndex = 9998;
overlay.style.overflowY = 'hidden';
overlay.style.display = 'flex';
overlay.style.alignItems = 'center';
overlay.style.justifyContent = 'center';
return overlay;
}
async function createImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
img.style.maxHeight = '100vh';
img.style.maxWidth = (img.width < img.height) ? '50vw' : '100vw';
resolve(img);
};
img.onerror = () => {
reject(new Error('Failed to load image'));
};
img.src = src;
});
}
function createBacklinks(backlinksHtml, isRight) {
if (!backlinksHtml) return null;
const backlinksDiv = document.createElement('div');
backlinksDiv.innerHTML = backlinksHtml;
backlinksDiv.style.margin = '5px';
backlinksDiv.style.cursor = 'pointer';
backlinksDiv.className = 'backlink';
backlinksDiv.style.position = 'fixed';
backlinksDiv.style.top = '0';
backlinksDiv.style.width = '50%';
if (isRight) {
backlinksDiv.style.right = '0';
backlinksDiv.style.textAlign = 'right';
} else {
backlinksDiv.style.left = '0';
}
// Add hover event to display post content
backlinksDiv.querySelectorAll('.quotelink').forEach(link => {
link.addEventListener('mouseenter', (e) => {
const postId = link.href.split('#')[1];
const post = document.getElementById(postId);
if (post) {
const tooltip = createTooltip(post.innerHTML);
tooltip.style.top = `${e.clientY + 5}px`;
if (isRight) {
tooltip.style.right = `${window.innerWidth - e.clientX + 5}px`;
} else {
tooltip.style.left = `${e.clientX + 5}px`;
}
link.appendChild(tooltip);
}
});
link.addEventListener('mouseleave', () => {
const tooltip = link.querySelector('.tooltip');
if (tooltip) tooltip.remove();
});
});
return backlinksDiv;
}
function createTooltip(content) {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.innerHTML = content;
tooltip.style.position = 'absolute';
tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
tooltip.style.color = 'white';
tooltip.style.padding = '5px';
tooltip.style.zIndex = '10000';
tooltip.style.fontSize = '10pt';
tooltip.style.wordBreak = 'break-word';
return tooltip;
}
async function isPortrait(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = () => {
resolve(img.width < img.height);
};
img.onerror = () => {
reject(new Error('Failed to load image'));
};
});
}
function offsetPages() {
currentIndex += 1;
showImages();
}
})();