ComicWalkerRipper

Download Images From Comic-Walker
换行
// ==UserScript==
// @name        ComicWalkerRipper
// @namespace   adrian
// @author      adrian
// @match       https://comic-walker.com/*
// @version     1.1
// @description Download Images From Comic-Walker
// @require     https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
// @require     https://unpkg.com/@zip.js/[email protected]/dist/zip-full.min.js
// @grant       GM_registerMenuCommand
// @license     MIT
// ==/UserScript==

const createKey = (hash) => {
	const parts = hash.slice(0, 16).match(/[\da-f]{2}/gi);
	return new Uint8Array(parts.map((data) => Number.parseInt(data, 16)));
};

function createXorFunc(key) {
	return (image) => {
		const { length: imageLength } = image;
		const { length: keyLength } = key;
		const decrypted = new Uint8Array(imageLength);
		for (let index = 0; index < imageLength; index += 1)
			decrypted[index] = image[index] ^ key[index % keyLength];
		return decrypted;
	};
}

function toPng(webp) {
	return new Promise((resolve, reject) => {
		const canvas = document.createElement("canvas");
		const context = canvas.getContext("2d");
		const image = new Image();
		image.src = URL.createObjectURL(new Blob([webp]));
		image.crossOrigin = "anonymous";
		image.onload = (e) => {
			canvas.width = image.width;
			canvas.height = image.height;
			URL.revokeObjectURL(e.target.src);
			context.drawImage(e.target, 0, 0, canvas.width, canvas.height);
			canvas.toBlob(
				(data) => {
					resolve(data);
				},
				"image/png",
				100,
			);
		};
		image.onerror = (e) => reject(e);
	});
}

const downloadImages = async (id, title) => {
	if (
		!/https:\/\/comic-walker\.com\/detail\/.*\/episodes\/.*/.test(
			window.location.href,
		)
	)
		return;
	const progressBar = document.createElement("div");
	progressBar.id = "dl-progress";
	progressBar.textContent = "Starting...";
	progressBar.style.padding = "20px";
	progressBar.style.backgroundColor = "black";
	progressBar.style.borderRadius = "10px";
	progressBar.style.border = "1px solid white";
	progressBar.style.boxShadow = "0 25px 50px -12px rgb(0 0 0 / 0.25)";
	progressBar.style.position = "fixed";
	progressBar.style.left = "50%";
	progressBar.style.top = "50%";
	progressBar.style.transform = "translate(-50%,-50%)";
	progressBar.style.zIndex = "9999";
	progressBar.style.fontSize = "20px";
	progressBar.style.color = "white";
	document.body.appendChild(progressBar);
	let episodeId;
	if (id) {
		episodeId = id;
	} else {
		const currentPath = window.location.pathname;
		const pathSplit = currentPath.split("/");
		const episodeCode = pathSplit.pop();
		pathSplit.pop();
		const workCode = pathSplit.pop();
		const episodeData = await fetch(
			`https://comic-walker.com/api/contents/details/episode?episodeCode=${episodeCode}&workCode=${workCode}&episodeType=latest`,
		).then((res) => res.json());
		episodeId = episodeData.episode.id;
	}

	if (!episodeId) {
		progressBar.textContent = "unable to find episodeId.";
		setTimeout(() => progressBar.remove(), 1000);
	}
	console.log(episodeId);

	const apiData = await fetch(
		`https://comic-walker.com/api/contents/viewer?episodeId=${episodeId}&imageSizeType=width:1284`,
	).then((res) => res.json());

	const images = apiData.manuscripts;
	console.log(images);
	progressBar.textContent = `${images.length} images found.`;
	const zipWriter = new zip.ZipWriter(new zip.BlobWriter("application/zip"), {
		bufferedWrite: true,
	});
	for (let i = 0; i < images.length; i++) {
		const image = images[i];
		const xorKey = createKey(image.drmHash);
		const xorFunc = createXorFunc(xorKey);
		const response = await fetch(image.drmImageUrl);
		if (!response.ok) {
			progressBar.textContent = `failed to fetch image ${i + 1}/${images.length}`;
			throw new Error("Failed to fetch image");
		}
		const arrayBuffer = await response.arrayBuffer();
		const decryptedData = xorFunc(new Uint8Array(arrayBuffer));
		zipWriter.add(
			`${i + 1}.png`,
			new zip.BlobReader(await toPng(decryptedData)),
			{},
		);
		progressBar.textContent = `fetched and decrypted image ${i + 1}/${images.length}`;
		console.log("done with ", i + 1);
	}
	console.log("image fetching done. generating zip");
	progressBar.textContent = "image fetching done. generating zip";
	const blobURL = URL.createObjectURL(await zipWriter.close());
	const link = document.createElement("a");
	link.href = blobURL;
	link.download = `${title || document.title}.zip`;
	link.click();
	progressBar.textContent = "done.";
	setTimeout(() => progressBar.remove(), 1000);
};

function waitForElement(selector, callback) {
	const observer = new MutationObserver((mutations, observer) => {
		const element = document.querySelector(selector);
		if (element) {
			observer.disconnect();
			callback(element);
		}
	});

	observer.observe(document.body, {
		childList: true,
		subtree: true,
	});
}

function onChangeElement(selector, callback) {
	const observer = new MutationObserver((mutations, observer) => {
		const element = document.querySelector(selector);
		if (element) {
			callback(element);
		}
	});

	observer.observe(document.body, {
		childList: true,
		subtree: true,
	});
}

onChangeElement("._mainScreen_kodus_7", (element) => {
	if (element.querySelector("#dl-button")) return;
	const dlButton = document.createElement("button");
	dlButton.id = "dl-button";
	dlButton.textContent = "Download";
	dlButton.style.padding = "5px 12px";
	dlButton.style.backgroundColor = "#ef0029";
	dlButton.style.borderRadius = "8px";
	dlButton.style.border = "3px solid #000";
	dlButton.style.boxShadow = "0 4px 0 #000";
	dlButton.style.position = "absolute";
	dlButton.style.right = "5px";
	dlButton.style.bottom = "50px";
	dlButton.style.zIndex = "9999";
	dlButton.style.fontSize = ".75rem";
	dlButton.style.fontWeight = "800";
	dlButton.style.color = "white";
	dlButton.addEventListener("click", () => downloadImages());
	element.appendChild(dlButton);
});

waitForElement("._mainScreen_kodus_7", (element) => {
	if (element.querySelector("#dl-button")) return;
	const dlButton = document.createElement("button");
	dlButton.id = "dl-button";
	dlButton.textContent = "Download";
	dlButton.style.padding = "5px 12px";
	dlButton.style.backgroundColor = "#ef0029";
	dlButton.style.borderRadius = "8px";
	dlButton.style.border = "3px solid #000";
	dlButton.style.boxShadow = "0 4px 0 #000";
	dlButton.style.position = "absolute";
	dlButton.style.right = "5px";
	dlButton.style.bottom = "50px";
	dlButton.style.zIndex = "9999";
	dlButton.style.fontSize = ".75rem";
	dlButton.style.fontWeight = "800";
	dlButton.style.color = "white";
	dlButton.addEventListener("click", () => downloadImages());
	element.appendChild(dlButton);
});

const addButtons = async (element) => {
	const currentPath = window.location.pathname;
	const pathSplit = currentPath.split("/");
	pathSplit.pop();
	pathSplit.pop();
	const workCode = pathSplit.pop();
	const workData = await fetch(
		`https://comic-walker.com/api/contents/details/work?workCode=${workCode}`,
	).then((res) => res.json());
	const episodes = {};
	// biome-ignore lint/complexity/noForEach: <explanation>
	workData.latestEpisodes.result.forEach((episode) => {
		episodes[`${episode.title}　${episode.subTitle}`] = episode.id;
	});
	// biome-ignore lint/complexity/noForEach: <explanation>
	workData.firstEpisodes.result.forEach((episode) => {
		episodes[`${episode.title}　${episode.subTitle}`] = episode.id;
	});
	const episodeElements = element.querySelectorAll(
		".EpisodeThumbnail_infoWrapper__XWQHA",
	);
	for (const episode of episodeElements) {
		const episodeTitle = episode.querySelector(
			".EpisodeThumbnail_title__G1eWj",
		);
		if (episode.querySelector("#dl-button")) continue;
		if (!episodes[episodeTitle.textContent]) continue;
		const button = document.createElement("button");
		button.textContent = "Download";
		button.id = "dl-button";
		button.style.padding = "5px 12px";
		button.style.height = "fit-content";
		button.style.backgroundColor = "#ef0029";
		button.style.borderRadius = "8px";
		button.style.border = "3px solid #000";
		button.style.boxShadow = "0 4px 0 #000";
		button.style.zIndex = "9999";
		button.style.fontSize = ".75rem";
		button.style.fontWeight = "800";
		button.style.transform = "translateY(-3px)";
		button.style.color = "white";
		button.style.margin = "auto 0";
		button.addEventListener(
			"click",
			(e) => {
				e.preventDefault();
				e.stopPropagation();
				downloadImages(
					episodes[episodeTitle.textContent],
					episodeTitle.textContent.endsWith("　")
						? episodeTitle.textContent.slice(0, -1)
						: episodeTitle.textContent,
				);
			},
			false,
		);
		episode.style.gridTemplateColumns = "1fr min-content";
		episode.appendChild(button);
	}
};

waitForElement(".ContentsDetailPage_episodeList__kOQID", (element) => {
	addButtons(element);
	const observer = new MutationObserver((mutations, observer) => {
		const element = document.querySelector(
			".ContentsDetailPage_episodeList__kOQID",
		);
		if (element) {
			addButtons(element);
		}
	});

	observer.observe(element, {
		childList: true,
		subtree: true,
	});
});

VM.shortcut.register("cm-s", () => downloadImages());
VM.shortcut.enable();

GM_registerMenuCommand("Download Images (Ctrl/Cmd + S)", () =>
	downloadImages(),
);