☰

IMVU _contents.json Viewer with Zip Download

Show previews, organize image types, and allow ZIP download with proper naming

// ==UserScript==
// @name         IMVU _contents.json Viewer with Zip Download
// @namespace    http://tampermonkey.net/
// @version      1.2.9
// @auther       heapsofjoy
// @description  Show previews, organize image types, and allow ZIP download with proper naming
// @match        https://userimages-akm.imvu.com/productdata/*/*/_contents.json
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js
// ==/UserScript==

(function () {
    'use strict';

    let files;
    try {
        files = JSON.parse(document.body.innerText);
    } catch (e) {
        console.error("Failed to parse JSON:", e);
        return;
    }

    const baseUrl = window.location.href.replace(/\/_contents\.json$/, '');
    const parts = window.location.pathname.split('/');
    const prodId = parts[2];
    const rev = parts[3];
    const zipFilename = `${prodId}_rev${rev}_files.zip`;

    // Basic styling
    document.body.innerHTML = '';
    document.body.style.background = '#111';
    document.body.style.color = '#eee';
    document.body.style.fontFamily = 'Arial, sans-serif';
    document.body.style.padding = '20px';

    const heading = document.createElement('h1');
    heading.textContent = '📦 Product Files';
    heading.style.marginBottom = '10px';
    document.body.appendChild(heading);

    // Download ZIP button
    const downloadAllBtn = document.createElement('button');
    downloadAllBtn.textContent = '⬇ Download All as ZIP';
    downloadAllBtn.style.marginBottom = '25px';
    downloadAllBtn.style.padding = '10px 20px';
    downloadAllBtn.style.fontSize = '16px';
    downloadAllBtn.style.backgroundColor = '#ff69b4';
    downloadAllBtn.style.color = 'white';
    downloadAllBtn.style.border = 'none';
    downloadAllBtn.style.borderRadius = '8px';
    downloadAllBtn.style.cursor = 'pointer';

    downloadAllBtn.onclick = async () => {
        downloadAllBtn.disabled = true;
        downloadAllBtn.textContent = 'Zipping...';

        const zip = new JSZip();

        for (const file of files) {
            const originalName = file.name || file.url;
            if (isExcluded(originalName)) continue;

            const url = `${baseUrl}/${file.url || file.name}`;
            try {
                const res = await fetch(url);
                const blob = await res.blob();
                let adjustedName = originalName;

                // Check MIME type and adjust the file extension accordingly
                const mime = blob.type;

                // If it's an image, we will try to adjust the extension based on the mime type
                if (mime.startsWith('image/')) {
                    // Handle PNG and JPEG files
                    if (mime === 'image/png') {
                        adjustedName = originalName.replace(/\.(jpe?g|gif|bmp|tga)$/i, '.png');
                    } else if (mime === 'image/jpeg' || mime === 'image/jpg') {
                        adjustedName = originalName.replace(/\.(png|gif|bmp|tga)$/i, '.jpg');
                    } else if (mime === 'image/gif') {
                        adjustedName = originalName.replace(/\.(png|jpeg|bmp|tga)$/i, '.gif');
                    } else if (mime === 'image/bmp') {
                        adjustedName = originalName.replace(/\.(png|jpeg|gif|tga)$/i, '.bmp');
                    } else if (mime === 'image/tga') {
                        // Handle .tga files
                        adjustedName = originalName.replace(/\.tga$/i, '.png');  // You can decide on a default format like PNG
                    }
                    // Add other image formats here if necessary
                } else {
                    // Non-image files should be left as-is
                    // This handles non-image files or files with unrecognized mime types
                    adjustedName = originalName;
                }

                // Add the file to the zip with the adjusted name
                zip.file(adjustedName, blob);
            } catch (e) {
                console.error('Failed to fetch:', originalName, e);
            }
        }

        zip.generateAsync({ type: 'blob' }).then(blob => {
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = zipFilename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            downloadAllBtn.textContent = '⬇ Download All as ZIP';
            downloadAllBtn.disabled = false;
        });
    };
    document.body.appendChild(downloadAllBtn);

    // Layout containers
    const imageGrid = document.createElement('div');
    imageGrid.style.display = 'grid';
    imageGrid.style.gridTemplateColumns = 'repeat(auto-fit, minmax(250px, 1fr))';
    imageGrid.style.gap = '15px';
    imageGrid.style.marginBottom = '50px';
    document.body.appendChild(imageGrid);

    const otherImagesSection = document.createElement('div');
    otherImagesSection.style.marginTop = '30px';
    document.body.appendChild(otherImagesSection);

    const fileList = document.createElement('div');
    fileList.style.paddingTop = '20px';
    fileList.style.borderTop = '1px solid #444';
    fileList.style.marginTop = '30px';
    document.body.appendChild(fileList);

    const imageBoxColor = [
      //String.fromCharCode(120, 109, 102),
      //String.fromCharCode(120, 115, 102)
    ];

    const isExcluded = (filename) => {
        return imageBoxColor.some(ext => filename.toLowerCase().endsWith(ext));
    };

    const isPreviewImage = (filename) => {
    return (
        /\.(png|jpe?g|gif|webp|bmp|tga)$/i.test(filename) ||
        !/\.[^/.]+$/.test(filename) // no extension, treat as image
    );
};

    const isOtherImageType = (filename) => /\.(dds)$/i.test(filename);

files.forEach(async (file) => {
    const name = file.name || file.url || 'Unnamed';
    const urlPart = file.url || file.name;

    if (isExcluded(name)) return;

    const fileUrl = `${baseUrl}/${urlPart}`;

    try {
        const res = await fetch(fileUrl);
        const blob = await res.blob();
        const mime = blob.type;

        const isImage = mime.startsWith('image/');
        const lowerName = name.toLowerCase();
        const isCommonImage = mime.startsWith('image/') &&
        ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/bmp'].includes(mime);

        const isRealTGA = lowerName.endsWith('.tga') && (mime === 'application/octet-stream' || mime === 'image/x-icon');

        // If it's a real TGA file (not displayable), show in "other" section
        if (isRealTGA) {

            const otherImageEntry = document.createElement('div');
            otherImageEntry.style.marginBottom = '10px';

            const link = document.createElement('a');
            link.href = fileUrl;
            link.download = name;
            link.textContent = name;
            link.style.color = '#ff69b4';
            link.style.textDecoration = 'none';
            link.style.wordBreak = 'break-all';
            otherImageEntry.appendChild(link);

            otherImagesSection.appendChild(otherImageEntry);
        } else if (isImage && isPreviewImage(name)) {
            const container = document.createElement('div');
            container.style.background = '#222';
            container.style.padding = '10px';
            container.style.borderRadius = '10px';
            container.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
            container.style.textAlign = 'center';

            const img = document.createElement('img');
            img.src = URL.createObjectURL(blob);
            img.alt = name;
            img.style.maxWidth = '100%';
            img.style.maxHeight = '200px';
            img.style.width = 'auto';  // Ensures the image maintains its aspect ratio
            img.style.height = 'auto'; // Keeps the height flexible based on the width
            img.style.minWidth = '150px'; // Sets a minimum width for the image box
            img.style.display = 'block';
            img.style.margin = '0 auto 10px';
            container.appendChild(img);

            const link = document.createElement('a');
            link.href = fileUrl;
            link.download = name;
            link.textContent = name;
            link.style.color = '#ff69b4';
            link.style.textDecoration = 'none';
            link.style.wordBreak = 'break-all';
            container.appendChild(link);

            const mimeInfo = document.createElement('div');
            mimeInfo.textContent = `(${mime})`;
            mimeInfo.style.color = '#999';
            mimeInfo.style.fontSize = '12px';
            mimeInfo.style.marginTop = '5px';
            container.appendChild(mimeInfo);

            imageGrid.appendChild(container);
        } else if (/\.xml$/i.test(name)) {
            // If it's an XML file, add preview functionality
            const fileEntry = document.createElement('div');
            fileEntry.style.marginBottom = '10px';

            const link = document.createElement('a');
            link.href = fileUrl;
            link.download = name;
            link.textContent = name;
            link.style.color = '#ff69b4';
            link.style.textDecoration = 'none';
            link.style.wordBreak = 'break-all';
            fileEntry.appendChild(link);

            // Create a preview button for XML files
            const previewBtn = document.createElement('button');
            previewBtn.textContent = '↓';
            previewBtn.style.marginLeft = '10px';
            previewBtn.style.padding = '2px 8px';
            previewBtn.style.fontSize = '12px';
            previewBtn.style.background = '#333';
            previewBtn.style.color = '#fff';
            previewBtn.style.border = '1px solid #666';
            previewBtn.style.borderRadius = '4px';
            previewBtn.style.cursor = 'pointer';

            // Create a preview box for XML file content
            const previewBox = document.createElement('pre');
            previewBox.style.display = 'none';
            previewBox.style.background = '#1e1e1e';
            previewBox.style.color = '#ccc';
            previewBox.style.padding = '10px';
            previewBox.style.marginTop = '5px';
            previewBox.style.border = '1px solid #333';
            previewBox.style.borderRadius = '6px';
            previewBox.style.maxHeight = '300px';
            previewBox.style.overflowY = 'auto';
            previewBox.style.whiteSpace = 'pre-wrap';

            // Toggle preview box visibility when clicking the preview button
            previewBtn.onclick = async () => {
                if (previewBox.style.display === 'none') {
                    previewBtn.textContent = '↑';
                    if (!previewBox.textContent) {
                        try {
                            const res = await fetch(fileUrl);
                            const text = await res.text();
                            previewBox.textContent = text;
                        } catch (err) {
                            previewBox.textContent = '[Error loading XML]';
                        }
                    }
                    previewBox.style.display = 'block';
                } else {
                    previewBtn.textContent = '↓';
                    previewBox.style.display = 'none';
                }
            };

            fileEntry.appendChild(previewBtn);
            fileEntry.appendChild(previewBox);

            fileList.appendChild(fileEntry);
        } else {
            // For non-image files, no preview
            const fileEntry = document.createElement('div');
            fileEntry.style.marginBottom = '10px';

            const link = document.createElement('a');
            link.href = fileUrl;
            link.download = name;
            link.textContent = name;
            link.style.color = '#ff69b4';
            link.style.textDecoration = 'none';
            link.style.wordBreak = 'break-all';
            fileEntry.appendChild(link);

            fileList.appendChild(fileEntry);
        }
    } catch (e) {
        console.error('Failed to fetch or analyze file:', name, e);
    }
});
})();