Custom Arka Plan Yöneticisi

Web siteleri için arka plan değiştirme [öncelikli manga-manhwa siteleri]
当前为 2025-01-28 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Custom Arka Plan Yöneticisi
// @namespace    http://vebascans.net/
// @version      2.1
// @description  Web siteleri için arka plan değiştirme [öncelikli manga-manhwa siteleri]
// @author       Veba
// @match        https://*/*
// @grant        none
// @icon         https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0QDJZNeXWcaD9lXWMN2yenYt5XGrqfPavkCFpWLe01CpSEsMn7IGpbOLqxEfjx4QUUi4wgTw0Kc7vP7FrKjPKpcaaCu1N6QRJzlZvS_Wwr2r3kA10-E5wI7xObsZchd8YNSxySFZATPAr2bnrkANBUrmy8Rpdx-mxG8N6QDojEj0onaNNXF_6g-s/w200/logo.png
// @homepageURL  https://vebascans.net/
// @supportURL   https://vebascans.net/
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 1) SweetAlert2 kütüphanesini otomatik yükle:
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11';
    script.onload = main; // Kütüphane yüklendikten sonra main() fonksiyonunu çalıştır
    document.head.appendChild(script);
 
    // 2) Tüm kodu main() içine alıyoruz:
    function main() {
 
        /**************************************************************************
         *  SweetAlert Tanımlaması
         **************************************************************************/
        const Toast = Swal.mixin({
            toast: true,
            position: "top",
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
 
        /**************************************************************************
         *  0) Sabitler
         **************************************************************************/
        const ACTIVE_KEY   = 'VebaScans.net_custom_wp_active';   // Son seçilen veri (URL/Color)
        const HISTORY_KEY  = 'VebaScans.net_custom_wp_history';  // Tüm geçmiş
        const SETTINGS_KEY = 'vebascans.net_custom_wp_settings'; // Arka plan ayarları (repeat/cover vs.)
 
        /**************************************************************************
         *  1) Local Storage Yardımcı Fonksiyonları
         **************************************************************************/
        function getActiveData() {
            try {
                const str = localStorage.getItem(ACTIVE_KEY);
                return str ? JSON.parse(str) : null;
            } catch (e) {
                return null;
            }
        }
 
        function setActiveData(obj) {
            localStorage.setItem(ACTIVE_KEY, JSON.stringify(obj));
            applyActiveDataToBody(); // Aktif veri her değiştiğinde body'yi güncelle
        }
 
        function removeActiveData() {
            localStorage.removeItem(ACTIVE_KEY);
            applyActiveDataToBody();
        }
 
        function getHistoryData() {
            try {
                const str = localStorage.getItem(HISTORY_KEY);
                return str ? JSON.parse(str) : [];
            } catch (e) {
                return [];
            }
        }
 
        function addToHistory(obj) {
            const history = getHistoryData();
            history.push(obj);
            localStorage.setItem(HISTORY_KEY, JSON.stringify(history));
        }
 
        // -- Ayarlar (Tekrarlı / Tek sefer)
        function getSettings() {
            try {
                const str = localStorage.getItem(SETTINGS_KEY);
                return str ? JSON.parse(str) : {};
            } catch (e) {
                return {};
            }
        }
 
        function setSettings(newSettings) {
            localStorage.setItem(SETTINGS_KEY, JSON.stringify(newSettings));
        }
 
        /**************************************************************************
         *  2) BODY Arkaplanını Aktif Veriye (URL/Color) ve Ayarlara Göre Uygulama
         **************************************************************************/
        function applyActiveDataToBody() {
            const activeData = getActiveData();
            if (!activeData) {
                // Aktif bir şey yoksa istersen varsayılan temize çek
                document.body.style.backgroundImage = 'none';
                document.body.style.backgroundColor = '';
                return;
            }
 
            if (activeData.type === 'url') {
                // Body için arkaplan resmi
                document.body.style.backgroundImage = `url(${activeData.value})`;
                document.body.style.backgroundRepeat = 'no-repeat';
                document.body.style.backgroundSize = 'cover';
                document.body.style.backgroundColor = '';
 
                // .body-wrap için deneme
 
                try {
 
                    const bodyWrap = document.querySelector('body.text-ui-light .body-wrap');
                    bodyWrap.style.backgroundImage = `url(${activeData.value})`;
                    bodyWrap.style.backgroundRepeat = 'no-repeat';
                    bodyWrap.style.backgroundSize = 'cover';
                    bodyWrap.style.backgroundColor = '';
                } catch (error) {
                    // .body-wrap yoksa hata görmezden gel
                }
                try {
                    const sitecontent = document.querySelector('.site-content');
                    sitecontent.style.backgroundImage = `url(${activeData.value})`;
                    sitecontent.style.backgroundRepeat = 'no-repeat';
                    sitecontent.style.backgroundSize = 'cover';
                    sitecontent.style.backgroundColor = '';
                } catch (error) {
                    // .site-content yoksa hata görmezden gel
                }
            } else if (activeData.type === 'color') {
                // Body için arkaplan rengi
                document.body.style.backgroundImage = 'none';
                document.body.style.backgroundColor = activeData.value;
 
                // .body-wrap için deneme
                try {
                    const bodyWrap = document.querySelector('body.text-ui-light .body-wrap');
                    bodyWrap.style.backgroundImage = 'none';
                    bodyWrap.style.backgroundColor = activeData.value;
                } catch (error) {
                    // .body-wrap yoksa hata görmezden gel
                }
 
                // .site-content için deneme
                try {
                    const sitecontent = document.querySelector('.site-content');
                    sitecontent.style.backgroundImage = 'none';
                    sitecontent.style.backgroundColor = activeData.value;
                } catch (error) {
                    // .site-content yoksa hata görmezden gel
                }
            }
        }
 
        /**************************************************************************
         *  3) MODAL Arayüzü Oluşturma
         **************************************************************************/
        let modalOverlay, modalContent;
 
        window.addEventListener('load', () => {
            createModal();
            createToggleShortcut(); // F7 ile aç/kapa
            applyActiveDataToBody(); // Sayfa açıldığında kaydedilmiş aktif veriyi uygula
        });
 
        // F7 ile modal aç/kapa
        function createToggleShortcut() {
            window.addEventListener('keydown', (e) => {
                if (e.key === 'F7') {
                    toggleModal();
                }
            });
        }
 
        function toggleModal(forceOpen) {
            const isHidden = (modalOverlay.style.display === 'none');
            if (forceOpen === true) {
                showModal();
            } else if (forceOpen === false) {
                hideModal();
            } else {
                if (isHidden) showModal(); else hideModal();
            }
        }
 
        function showModal() {
            modalOverlay.style.display = 'block';
            refreshHistoryList();
            refreshActiveLabel();
            refreshSettingsUI();
        }
 
        function hideModal() {
            modalOverlay.style.display = 'none';
        }
 
        function createModal() {
            // (1) Overlay
            modalOverlay = document.createElement('div');
            Object.assign(modalOverlay.style, {
                display: 'none',
                position: 'fixed',
                top: '0',
                left: '0',
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0,0,0,0.5)',
                zIndex: '99999',
                color: '#000'
            });
            document.body.appendChild(modalOverlay);
 
            // (2) İçerik
            modalContent = document.createElement('div');
            Object.assign(modalContent.style, {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: '400px',
                backgroundColor: '#fff',
                padding: '20px',
                borderTopLeftRadius: '15px',
                borderBottomRightRadius: '15px',
                border: '3px solid black',
                minHeight: '400px',
                fontFamily: 'Arial, sans-serif',
                fontSize: '14px',
                fontWeight: 'normal',
                color: '#000',
            });
            modalOverlay.appendChild(modalContent);
 
            // (3) Logo
            const img = document.createElement('img');
            img.src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0QDJZNeXWcaD9lXWMN2yenYt5XGrqfPavkCFpWLe01CpSEsMn7IGpbOLqxEfjx4QUUi4wgTw0Kc7vP7FrKjPKpcaaCu1N6QRJzlZvS_Wwr2r3kA4l0-E5wl7xObsZchd8YNSxySFZATPAr2bnrkANBUrmy8Rpdexe-mxG8N6QDojEj0onaNNXF_6g-s/w800/logo.png';
            img.alt = 'Logo';
            Object.assign(img.style, {
                width: '130px',
                position: 'absolute',
                top: '0',
                right: '50%',
                transform: 'translate(50%, -50%)'
            });
            modalContent.appendChild(img);
 
            // (4) Başlık
            const header = document.createElement('h3');
            header.innerHTML = '<a href=\"https://www.vebascans.net/\" style=\"color: #402870; font-weight: 500; text-decoration: none; font-family: fantasy;\">Vebascans</a> - Custom Background';
            header.style.margin = '0 0 10px 0';
            header.style.color = 'black';
            header.style.marginTop = '45px';
            modalContent.appendChild(header);
 
            // (5) Kapat butonu
            const closeBtn = document.createElement('button');
            closeBtn.innerHTML = `
                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">
                    <g fill=\"none\" fill-rule=\"evenodd\">
                        <path d=\"m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z\"/>
                        <path fill=\"currentColor\" d=\"m12 14.122l5.303 5.303a1.5 1.5 0 0 0 2.122-2.122L14.12 12l5.304-5.303a1.5 1.5 0 1 0-2.122-2.121L12 9.879L6.697 4.576a1.5 1.5 0 1 0-2.122 2.12L9.88 12l-5.304 5.304a1.5 1.5 0 1 0 2.122 2.12z\"/>
                    </g>
                </svg>`;
            Object.assign(closeBtn.style, {
                position: 'absolute',
                top: '10px',
                right: '10px',
                border: 'none',
                background: 'transparent',
                cursor: 'pointer',
                color: 'black'
            });
            closeBtn.onclick = () => hideModal();
            modalContent.appendChild(closeBtn);
 
            // (6) Seçim Menüsü (URL mi Renk mi)
            const selectDiv = document.createElement('div');
            Object.assign(selectDiv.style, {
                display: 'flex',
                flexDirection: 'row',
                gap: '5px',
                marginBottom: '10px'
            });
            modalContent.appendChild(selectDiv);
 
            const selectLabel = document.createElement('label');
            selectLabel.textContent = 'Seçim: ';
            selectLabel.style.display = 'flex';
            selectLabel.style.alignItems = 'center';
            selectDiv.appendChild(selectLabel);
 
            const selectInput = document.createElement('select');
            selectInput.id = 'typeSelect';
            selectInput.style.background ='white';
            selectInput.style.border ='2px solid black';
            selectInput.style.borderRadius  ='3px';
            selectInput.style.color = 'black';
            const optUrl   = new Option('URL', 'url');
            const optColor = new Option('Renk', 'color');
            selectInput.add(optUrl);
            selectInput.add(optColor);
            selectDiv.appendChild(selectInput);
 
            // (7) URL input
            const urlInput = document.createElement('input');
            urlInput.type = 'text';
            urlInput.id = 'urlInput';
            urlInput.placeholder = 'Görsel URL giriniz...';
            urlInput.style.background ='transparent';
            urlInput.style.border ='2px solid black';
            urlInput.style.borderRadius  ='3px';
            selectDiv.appendChild(urlInput);
 
            // (8) Color input
            const colorInput = document.createElement('input');
            colorInput.type = 'color';
            colorInput.id = 'colorInput';
            colorInput.value = '#000000';
            colorInput.style.width = '50px';
            colorInput.style.height = '30px';
            colorInput.style.display = 'none';
            selectDiv.appendChild(colorInput);
 
            // Seçim değişince hangi input görünsün?
            selectInput.addEventListener('change', () => {
                if (selectInput.value === 'url') {
                    urlInput.style.display   = 'inline-block';
                    colorInput.style.display = 'none';
                } else {
                    urlInput.style.display   = 'none';
                    colorInput.style.display = 'inline-block';
                }
            });
 
            // (9) Aktar butonu
            const aktarBtn = document.createElement('button');
            aktarBtn.textContent = 'Aktar';
            aktarBtn.style.marginLeft = '5px';
            aktarBtn.style.padding = '5px 10px';
            aktarBtn.style.cursor = 'pointer';
            aktarBtn.style.color = 'black';
            aktarBtn.style.border ='2px solid black';
            aktarBtn.style.borderRadius  ='3px';
            aktarBtn.style.background = 'transparent';
            selectDiv.appendChild(aktarBtn);
 
            aktarBtn.onclick = () => {
                const currentType = selectInput.value; // 'url' | 'color'
                let currentValue = '';
                if (currentType === 'url') {
                    currentValue = urlInput.value.trim();
                    if (!currentValue) {
                        Toast.fire({ icon: 'error', title: 'Lütfen bir URL girin.' });
                        return;
                    }
                } else {
                    currentValue = colorInput.value; // #rrggbb
                    if (!currentValue) {
                        Toast.fire({ icon: 'error', title: 'Lütfen bir renk seçin.' });
                        return;
                    }
                }
 
                // Yeni aktif obje
                const newActiveObj = { type: currentType, value: currentValue };
                setActiveData(newActiveObj);
                addToHistory(newActiveObj);
 
                refreshHistoryList();
                refreshActiveLabel();
 
                // URL tipini kullandıysa inputu temizleyelim
                if (currentType === 'url') {
                    urlInput.value = '';
                }
                Toast.fire({ icon: 'success', title: 'Yeni aktif değer atandı ve body arkaplanı güncellendi!' });
            };
 
            // (10) Tekrar / Tek Sefer AYARI
            const repeatDiv = document.createElement('div');
            repeatDiv.style.margin = '10px 0';
            repeatDiv.style.display = 'flex';
            repeatDiv.style.flexDirection = 'row';
            repeatDiv.style.gap = '10px';
            modalContent.appendChild(repeatDiv);
 
            const repeatLabel = document.createElement('span');
            repeatLabel.textContent = 'Arkaplan Tekrarı:';
            repeatLabel.style.alignSelf = 'center';
            repeatDiv.appendChild(repeatLabel);
 
            const labelRepeat = document.createElement('label');
            const radioRepeat = document.createElement('input');
            radioRepeat.type = 'radio';
            radioRepeat.name = 'bgRepeat';
            radioRepeat.value = 'repeat';
            radioRepeat.style.marginRight = '5px';
            labelRepeat.appendChild(radioRepeat);
            labelRepeat.appendChild(document.createTextNode('Tekrarlı'));
            repeatDiv.appendChild(labelRepeat);
 
            const labelNoRepeat = document.createElement('label');
            const radioNoRepeat = document.createElement('input');
            radioNoRepeat.type = 'radio';
            radioNoRepeat.name = 'bgRepeat';
            radioNoRepeat.value = 'no-repeat';
            radioNoRepeat.style.marginRight = '5px';
            labelNoRepeat.appendChild(radioNoRepeat);
            labelNoRepeat.appendChild(document.createTextNode('Tek Sefer'));
            repeatDiv.appendChild(labelNoRepeat);
 
            [radioRepeat, radioNoRepeat].forEach(radio => {
                radio.addEventListener('change', () => {
                    const newVal = radio.value; // 'repeat' | 'no-repeat'
                    const s = getSettings();
                    s.bgRepeat = newVal;
                    setSettings(s);
                    applyActiveDataToBody();
                });
            });
 
            // (11) Aktif Veriyi Sil
            const removeActiveBtn = document.createElement('button');
            removeActiveBtn.textContent = 'Aktif Veriyi Sil';
            removeActiveBtn.style.marginBottom = '10px';
            removeActiveBtn.style.padding = '5px 10px';
            removeActiveBtn.style.cursor = 'pointer';
            removeActiveBtn.style.color = 'black';
            removeActiveBtn.style.background = 'transparent';
            removeActiveBtn.style.border ='2px solid black';
            removeActiveBtn.style.borderRadius  ='3px';
            modalContent.appendChild(removeActiveBtn);
 
            removeActiveBtn.onclick = () => {
                removeActiveData();
                refreshHistoryList();
                refreshActiveLabel();
                Toast.fire({ icon: 'info', title: 'Aktif veri silindi. Arkaplan temizlendi.' });
            };
 
            // (12) Şu anda aktif veriyi gösteren label
            const activeDiv = document.createElement('div');
            activeDiv.id = 'activeDiv';
            activeDiv.style.marginTop = '10px';
            modalContent.appendChild(activeDiv);
 
            // (13) Geçmiş Başlık
            const historyTitle = document.createElement('h4');
            historyTitle.textContent = 'Geçmiş';
            historyTitle.style.margin = '10px 0 5px 0';
            modalContent.appendChild(historyTitle);
 
            // (14) Geçmiş Container
            const historyContainer = document.createElement('div');
            historyContainer.id = 'historyContainer';
            historyContainer.style.maxHeight = '200px';
            historyContainer.style.overflowY = 'auto';
            historyContainer.style.border = '1px solid #ccc';
            historyContainer.style.padding = '5px';
            modalContent.appendChild(historyContainer);
        }
 
        /**************************************************************************
         *  4) Geçmiş & Aktif Listeyi Güncelleme
         **************************************************************************/
        function refreshHistoryList() {
            const historyContainer = document.getElementById('historyContainer');
            if (!historyContainer) return;
 
            historyContainer.innerHTML = '';
 
            const historyData = getHistoryData();
            const activeData  = getActiveData(); // {type:'...', value:'...'}
 
            historyData.forEach((item) => {
                const row = document.createElement('div');
                row.style.display = 'flex';
                row.style.alignItems = 'center';
                row.style.marginBottom = '8px';
                row.style.cursor = 'pointer';
 
                // URL ise küçük görsel
                if (item.type === 'url') {
                    const imgThumb = document.createElement('img');
                    imgThumb.src = item.value;
                    imgThumb.alt = 'Görsel';
                    imgThumb.style.width = '30px';
                    imgThumb.style.height = '30px';
                    imgThumb.style.objectFit = 'cover';
                    imgThumb.style.marginRight = '8px';
                    row.appendChild(imgThumb);
 
                    const label = document.createElement('span');
                    label.textContent = 'URL';
                    row.appendChild(label);
                }
                // Renk ise kutu
                else if (item.type === 'color') {
                    const colorBox = document.createElement('span');
                    colorBox.style.display = 'inline-block';
                    colorBox.style.width = '30px';
                    colorBox.style.height = '30px';
                    colorBox.style.backgroundColor = item.value;
                    colorBox.style.marginRight = '8px';
                    colorBox.style.border = '1px solid #000';
                    row.appendChild(colorBox);
 
                    const label = document.createElement('span');
                    label.textContent = 'Renk';
                    row.appendChild(label);
                }
 
                // Aktif mi?
                if (activeData && activeData.type === item.type && activeData.value === item.value) {
                    const activeSpan = document.createElement('span');
                    activeSpan.textContent = ' (Şu anda aktif)';
                    activeSpan.style.color = 'green';
                    activeSpan.style.marginLeft = '5px';
                    row.appendChild(activeSpan);
                }
 
                // Tıklayınca bu itemi aktif yap
                row.addEventListener('click', () => {
                    setActiveData(item);
                    refreshHistoryList();
                    refreshActiveLabel();
                    Toast.fire({ icon: 'success', title: 'Aktif değer güncellendi!' });
                });
 
                historyContainer.appendChild(row);
            });
        }
 
        function refreshActiveLabel() {
            const activeDiv = document.getElementById('activeDiv');
            if (!activeDiv) return;
 
            const activeData = getActiveData();
            if (!activeData) {
                activeDiv.textContent = 'Şu anda aktif bir değer yok.';
            } else {
                if (activeData.type === 'url') {
                    activeDiv.innerHTML = `
                        Aktif: URL →
                        <img src=\"${activeData.value}\"
                            alt=\"Aktif Görsel\"
                            style=\"width: 100px; height: auto; object-fit: cover; margin-left:5px;\"/>
                    `;
                } else {
                    activeDiv.innerHTML = `
                        Aktif: Renk →
                        <span style=\"display:inline-block; width:20px; height:20px;
                                    background-color:${activeData.value};
                                    border:1px solid #000; vertical-align:middle;\">
                        </span>
                        ${activeData.value}
                    `;
                }
            }
        }
 
        /**************************************************************************
         *  5) Arkaplan Ayarı (Tekrar / Tek Sefer) Radyo Butonlarını Güncelleme
         **************************************************************************/
        function refreshSettingsUI() {
            const settings = getSettings();
            const bgRepeat = settings.bgRepeat || 'no-repeat'; // Varsayılan no-repeat
            const radios   = document.getElementsByName('bgRepeat');
            radios.forEach(radio => {
                radio.checked = (radio.value === bgRepeat);
            });
        }
 
    } // main() sonu
 
})(); // IIFE sonu