// ==UserScript==
// @name         Add Buttons to Xiuren
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  Add custom buttons to each index_selected_box anchor in the Xiuren website
// @author       Your Name
// @match        https://xiuren.mobi/index.aspx
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to create buttons
    function createButtons() {
        const targetDivs = document.querySelectorAll('div.index_selected_warp div.index_selected_box a');

        // Check if there are any target divs
        if (targetDivs.length > 0) {
            console.log(`Found ${targetDivs.length} target divs.`);

            targetDivs.forEach((targetDiv, index) => {
                // Create a download button for each target div
                const downloadButton = document.createElement('button');
                downloadButton.className = 'download-button'; // Set a class for identification
                downloadButton.innerText = 'Download';
                downloadButton.style.fontSize = '8px'; // Font size for better visibility
                downloadButton.style.position = 'absolute'; // Position relative to parent
                downloadButton.style.backgroundColor = '#336699'; // Background color
                downloadButton.style.border = '1px solid #f92672'; // Border color
                downloadButton.style.borderRadius = '3px'; // Rounded corners
                downloadButton.style.padding = '2px'; // Padding for size
                downloadButton.style.color = 'white'; // Text color
                downloadButton.style.zIndex = '10'; // Layering above other elements
                downloadButton.style.cursor = 'pointer'; // Pointer cursor on hover
                downloadButton.style.opacity = '0.9'; // Slight transparency

                // Add functionality for the download button
                downloadButton.addEventListener('click', function() {
                    const imgElement = targetDiv.querySelector('div.index_selected div.index_selected_warp div.index_selected_box a img.lazy.index_selected_img.img-responsive');
                    if (imgElement) {
                        const imageUrl = imgElement.src;
                        const issue = imageUrl.match(/\/(\d{5,8})\//)[1];
                        const alt = imgElement.alt;
                        downloadImages(imageUrl, issue, alt);
                    } else {
                        console.error('Image element not found.');
                    }
                });

                // Calculate position based on the parent element
                const parentDiv = targetDiv.parentElement; // Get the parent element of the anchor
                const parentRect = parentDiv.getBoundingClientRect(); // Get bounding rect of parent

                // Place the button based on parent height
                downloadButton.style.top = `${parentRect.height + 5}px`; // Place button just below the parent
                downloadButton.style.right = '2px'; // Align button to the right of the parent

                // Append the button to the parent div
                parentDiv.appendChild(downloadButton);

            });
        } else {
            console.error('No target divs found!');
        }
    }

    // Function to download images
    async function downloadImages(imageUrl, issue, alt) {
        if (!imageUrl || !issue) {
            console.error('Invalid image URL or issue number.');
            return;
        }

        const baseDir = imageUrl.match(/https:\/\/.*\/(\d{4})\//)[0];
        const coverPageUrl = `${baseDir}${issue}/cover.jpg`;

        const response = await fetch(coverPageUrl);
        if (!response.ok) {
            console.error('Failed to fetch image.');
            return;
        }

        const blob = await response.blob();
        const zipName = imageUrl.split('/').pop(); // Use the image file name as the download name

        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = zipName;
        link.click();

        let index = 1;
        let imageIndex = index.toString().padStart(2, '0');
        let imageUrlWithIndex = `${baseDir}${issue}/${issue}${imageIndex}.jpg`;

        while (index <= 99) {
            const response = await fetch(imageUrlWithIndex);
            if (!response.ok) {
                break;
            }

            const blob = await response.blob();
            const zipName = imageUrlWithIndex.split('/').pop(); // Use the image file name as the download name

            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = zipName;
            link.click();

            index++;
            imageIndex = index.toString().padStart(2, '0');
            imageUrlWithIndex = `${baseDir}${issue}/${issue}${imageIndex}.jpg`;
        }
    }

    // Wait for the page to load fully and then run the script
    window.addEventListener('load', createButtons);
})();

Could you help me zip the images before downloading?  Also use this cloudflare worker  https://addroute.maestro1four1.workers.dev/ to avoid CORS problem.