Loads all manga pages at once in a simplified vertical layout
目前为
// ==UserScript==
// @name Eza's Pixiv Fixiv
// @namespace https://inkbunny.net/ezalias
// @description Loads all manga pages at once in a simplified vertical layout
// @include http://www.pixiv.net/member_illust.php?mode=manga&illust_id=*
// @version 1.6
// ==/UserScript==
// On manga pages, load all images without having to manually scroll to each one.
// Pixiv is terribly designed. Maybe it's a cultural Japanese thing, where they still expect single-page click-and-wait browsing like it's still 1998. The site is just openly hostile to users' time and enjoyment.
// To wit, I recommend Eza's Image Glutton, which directs from the "medium" landing pages to either the full-size single image or the manga page. Tedium is for robots.
// Ideally we'd trigger whatever mechanism tells the page to load each image.
// Three problems with that: I'm an HTML/JS amateur, the coders didn't speak much English, and - crucially - we'd still be loading medium-size images.
// So instead we're going to scrape the page for URLs, build our own no-bullshit HTML, and replace the entire Body of the page.
// Pixiv's super-paranoid anti-hotlinking mechanisms will not trigger because it only sees one of its own pages requesting these images. We don't have to worry about 403s.
// mmmaybe replace the custom click-to-advance page with a thumbnail page that instead links to the full-size images? less scrolling through meh, less looking at full-size squick, but more clicking and ctrl+w'ing.
// can I just 'touch' all the pages and force them to load within pixiv's own source? I mean, I'm essentially recreating their page now.
// I could also just regex document.body.innerHTML for big images. I think the 'small' mode scales them instead of loading some smaller file.
// <script>pixiv.context.images[1] = 'http://i2.pixiv.net/img108/img/ukaban/29548141_p1.jpg';pixiv.context.thumbnailImages[1] = 'http://i2.pixiv.net/img108/img/ukaban/mobile/29548141_128x128_p1.jpg';</script></div><div class="item-container"><script>pixiv.context.pages[1] = [2];</script><a href="/member_illust.php?mode=manga_big&illust_id=29548141&page=1" target="_blank" class="full-size-container ui-tooltip" data-tooltip="オリジナルサイズを表示"><i class="_icon sprites-full-size"></i></a><img src="http://source.pixiv.net/www/images/common/transparent.gif" class="image ui-scroll-view" data-filter="manga-image" data-src="http://i2.pixiv.net/img108/img/ukaban/29548141_p1.jpg" data-index="1">
// Images could be scaled to "height=100%", and apparently that means window height and not the original height of the image. JS is fuckin' weird. Leaning toward "no" for the sake of tall comics. Width=100% for super-large images sounds good, though.
// Should Pixiv Fixiv load real thumbnails? Pixiv provides them. It's not like Tumblr Scrape where you want to save the small images; they only exist to provide an overview.
// Using full-size images indicates when they're done loading.
// Pixiv is now screwing with Image Toolbar. The toolbar appears with big icons and text labels (doubled text labels, in fact), and middle-clicking doesn't work. I hate this website.
// onError stuff probably isn't necessary now that we're grabbing URLs from Pixiv's own array.
// Why is this script running on e.g. http://www.pixiv.net/member_illust.php?mode=medium&illust_id=47549579 ? The single @include here obviously doesn't match. Is the "?" a wildcard?
// Might be missing larger files in e.g. http://www.pixiv.net/member_illust.php?mode=manga&illust_id=47191879#1 - gelbooru copy http://gelbooru.com/index.php?page=post&s=view&id=2485245#dnr is bigger than 1200px, and pixiv fixiv image is master_1200 nonsense.
// Yeah, fullsize is http://i4.pixiv.net/img-original/img/2014/11/22/01/44/36/47191879_p1.png - not shown directly (in unmolested view), but appears when you click the 'enlarge' twin-arrows icon.
// http://i4.pixiv.net/c/1200x1200/img-master/img/2014/11/22/01/44/36/47191879_p1_master1200.jpg - currently shown
// http://i4.pixiv.net/img-original/img/2014/11/22/01/44/36/47191879_p1.png - what we want
// http://i4.pixiv.net/img-original/img/2014/11/22/01/44/36/47191879_p1.jpg - Why isn't this working? Arg, right, JPG vs. PNG. Obvious.
// Fixed-ish. Now looking for problems.
// Problem: http://www.pixiv.net/member_illust.php?mode=manga&illust_id=28640373 doesn't work. All images fail.
// http://i2.pixiv.net/c/1200x1200/img-master/img/2014/10/02/01/07/37/28640373_p0_master1200.jpg - normal size
// http://i2.pixiv.net/img-original/img/2014/10/02/01/07/37/28640373_p0.gif - full size - gif? seriously? ugh.
// Sometimes an image is just slow to load, but it never goes back from GIF. Add an if-then to the already convoluted onError function. (Or just cycle through indefinitely.)
// Once the img-original thing works, add an option (using GM API) to switch between 1200-size and original-size images.
// Arg. @grant fucked me. '@grant none' says 'gm_getsetting not found.' '@grant gm_getsetting' says 'pixiv (the array) not found.' fuck your scope bullshit, greasemonkey. be unsafe and useful.
// onError should only have to suss out image extensions once per image. Break it out into a function (onError="myFunction()") and have it change the big-image src's as well as the image-link href's.
// Mousewheel doesn't work anymore? Unhide scrollbar in CSS, I guess. No - it's present with Greasemonkey off. What the hell? (Intermittent. Arg.)
var html_dump = document.getElementsByTagName('html')[0].innerHTML; // read full page HTML as string - admittedly overkill, but it's kilobytes, so who really cares? (Could be a reference if it matters.)
var thumbnail_html = "";
var options_html = "";
var new_html = "";
// Build a simplified version of the manga page, using high-res images. Clicking an image jumps to the next one. (Keyboard controls not implemented.)
for( var page_number = 0; page_number < pixiv.context.images.length; page_number++ ) {
var page_url = pixiv.context.images[ page_number ]; // Pixiv now helpfully provides a <script>-generated array of URLs.
page_url = page_url.replace( 'c/1200x1200/img-master', 'img-original' ); // Change 1200-sized URL into original-sized URL
page_url = page_url.replace( '_master1200', '' );
page_url = page_url.replace( '.png', '.jpg' ); // Change PNG to JPG - so we only have to do JPG->PNG in our onError function.
page_url = page_url.replace( '.gif', '.jpg' ); // Same deal, change GIF to JPG. onError cycles from JPG -> PNG -> GIF.
// Display thumbnails for an overview of this manga's contents (and easy links to each page)
thumbnail_html = thumbnail_html + "<a href='#" + page_number + "'>"; // link thumbnail to the relevant page anchor
thumbnail_html = thumbnail_html + "<img src='" + page_url + "' height='100' width='auto' onerror='this.src = this.src.replace(\".png\",\".gif\"); this.src = this.src.replace(\".jpg\", \".png\");'></a> ";
// Display thumbnail at fixed height - browser should maintain aspect ratio.
// onError function rotates incorrect file extensions, since the right one can't be sussed out beforehand.
// Display pages centered, each linked to the next, kind of like Pixiv does
new_html = new_html + "<a id='" + page_number + "'>"; // Anchor for thumbnails and previous page to link to
new_html = new_html + "<a href='#" + (1.0+page_number) + "'>"; // Link this image to the next image's anchor
new_html = new_html + "<img src='" + page_url + "' onerror='this.src=this.src.replace(\".png\",\".gif\");this.src=this.src.replace(\".jpg\",\".png\");getElementById(\""+page_number+"link\").href=this.src;'></a></br>";
// onError function rotates incorrect file extensions, but also finds the image link by its ID and makes it link to the correct source image. Sorry this is a clusterfuck.
new_html = new_html + "<a id='" + page_number + "link' href='" + page_url + "'>Image link</a>"; // Link to the image, so it's easy to open a particular page in tabs
new_html = new_html + "<br><br>";
}
// Replace page with our custom HTML.
new_html = new_html + "<br><br><br><a id = '" + pixiv.context.images.length + "'></a>"; // add one last anchor tag, so clicking the last image brings you to the end of the page
new_html = thumbnail_html + "<center><br>"+options_html+"<br>" + new_html; // thumbnails first, then main images
document.body.innerHTML = new_html; // replace the HTML body with new_html, which should now contain a long list of <img>s that load in a sensible manner