boostDalleDownloadImages.js

/* A simple Arc boost that injects a button to download all images from a generated set. */

const sleep = ms => { return new Promise(resolve => setTimeout(resolve, ms)) }

const downloadImages = async () => {
	const newImages = document.querySelector(".task-page-generations");
	const imageThumbnails = newImages.querySelectorAll(".generated-image-overlay");

	for (const imageThumbnail of imageThumbnails) {
		imageThumbnail.click();
		// There is a transition when you go into an image, so we wait for ~200ms to be sure.
		await sleep(200);
		
		const buttons = document.querySelector(".edit-page-image-buttons");
		if (buttons)  buttons.children[1].click();
		else          console.error("button not found");

		const backButton = document.querySelector(".edit-page-buttons").children[0].children[0];
		backButton.click();

		// Similiarly, there seems to be a bit of a delay before it actually downloads the images
		// i.e. you can be "too fast", so... we wait!
		await sleep(1000);
	}
}

const injectButton = async () => {
	// Similiarly, we also need to wait for the page to load in...
	await sleep(1000);

	const buttonContainer = document.querySelector(".image-prompt-form-header").children[1];
	if (!buttonContainer) return; 

	for (const button of buttonContainer.children)
		if (button.textContent === "Download Images") return;
	
	const buttonDownloadImages = document.createElement("button");
	buttonDownloadImages.classList.add("btn", "btn-small", "btn-filled", "btn-secondary");
	buttonDownloadImages.append("Download Images");
	buttonDownloadImages.addEventListener("pointerdown", downloadImages);
	buttonContainer.insertBefore(buttonDownloadImages, buttonContainer.firstChild);
}

// The button is demounted once you go in a child, so we have to observe and re-render
const observer = new MutationObserver(injectButton);
observer.observe(document.body, {  childList: true, subtree: true });