Loads Pixiv "manga" pages without having to scroll down and wait
目前为
// ==UserScript==
// @name Eza's Pixiv Fixiv
// @namespace https://inkbunny.net/ezalias
// @description Loads Pixiv "manga" pages without having to scroll down and wait
// @include http://www.pixiv.net/member_illust.php?mode=manga&illust_id=*
// @version 1.2
// ==/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.
// 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.
// pixiv trusts anything from their own pages. I might be able to redirect from those stupid landing pages to main images etc. with a 100%,0% frame setup. then I could skip the direct-link-to-image scripts.
// 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">
// might be able to do inline JS without escaping quotes, e.g.:
/*
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
*/
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 new_html = "";
var thumbnail_html = "";
var image_url = html_dump.substring( html_dump.indexOf( '<section class="manga">' ) ); // skip to where the first page is defined
image_url = image_url.substring( image_url.indexOf( "http:" ) ); // grab that image's URL
image_url = image_url.substring( 0, image_url.indexOf( "'" ) ); // (not sure why this gives me trouble in one substring() operation)
//image_url = image_url.substring( 0, image_url.lastIndexOf( '_p' ) ) + image_url.substring( image_url.lastIndexOf( '.' ); // remove page number so we can add it in with each page
image_url = image_url.replace( '_p0', '_p' );
// http://i2.pixiv.net/img06/img/nekopuchi/33798018_p0.jpg
// if it IS a Manga, we construct a complex browsing page
// <span class="total">2
var page_count = html_dump.substring( html_dump.indexOf( '<span class="total">' ) ); // skip to where the page declares itself a manga submission
page_count = page_count.substring( page_count.indexOf( ">" )+1, page_count.indexOf( "</" ) ); // extract the number from where the page reads e.g. "2 / 2"
page_count = parseInt( page_count ); // cast as integer
for( var page_number = 0; page_number < page_count; page_number++ ) {
var page_url = image_url.replace( "_p", "_big_p" + page_number );
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(\"_big_p\", \"_p\");'></a> ";
// display thumbnail at fixed height - browser should maintain aspect ratio
new_html = new_html + "<a id = '" + page_number + "'>";
new_html = new_html + "<a href='#" + (1.0+page_number) + "'>";
new_html = new_html + "<img src='" + page_url + "' onerror='this.src = this.src.replace(\"_big_p\", \"_p\");'></a><br><br><br>";
}
new_html = new_html + "<br><br><br><a id = '" + page_count + "'></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><br><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
document.body.innerHTML = new_html;