Logout Button

Inserts logout button to dead frontier outpost page
줄 바꿈
// ==UserScript==
// @name         Logout Button
// @namespace    Lucky11(13831671)
// @version      1
// @description  Inserts logout button to dead frontier outpost page
// @author       Lucky11(13831671)
// @license      MIT
// @match        https://fairview.deadfrontier.com/onlinezombiemmo/index.php?page=21
// @grant        GM_cookie
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    const BUTTON_ID = 'logOffClearBtn';
    const cookieUrl = window.location.origin;

    function createButton() {
        const existing = document.getElementById(BUTTON_ID);
        if (existing) return existing;

        const btn = document.createElement('button');
        btn.id = BUTTON_ID;
        btn.type = 'button';
        btn.textContent = 'Logout→';

        // Base visual style matching your other button (but clickable)
        Object.assign(btn.style, {
            background: 'none',
            border: 'none',
            color: 'white',
            textShadow: '0 0 10px red',
            fontSize: '20px',
            cursor: 'pointer',
            padding: '6px 8px',
            fontWeight: 'normal',
        });

        btn.addEventListener('mouseenter', () => {
            btn.style.textShadow = '0 0 10px red, 0 0 10px red, 0 0 10px red';
        });
        btn.addEventListener('mouseleave', () => {
            btn.style.textShadow = '0 0 10px red';
        });

        return btn;
    }

    function findTargetContainer() {
        // Heuristic: match the container from your example
        return Array.from(document.querySelectorAll('div')).find(d => {
            const s = d.getAttribute('style') || '';
            return /width:\s*700px/.test(s) && /margin-left:\s*auto/.test(s) && /margin-right:\s*auto/.test(s);
        }) || null;
    }

function placeButton() {
    // 1. Don't add if button already exists
    if (document.getElementById(BUTTON_ID)) return;

    let container = findTargetContainer();

    // 2. If container doesn't exist, create and inject it
    if (!container) {
        const containerHTML = `
            <div id="tm-custom-container" style="position: relative; width: 700px; margin: 0 auto; top: 0px; z-index: 9999; height: 40px;">
                <style>
                    #backToOutpostSubmit {background: none; border: none; color: white; text-shadow: 0 0 10px red; font-size: 20px; cursor: pointer;}
                    #backToOutpostSubmit:hover {text-shadow: 0 0 10px red, 0 0 10px red, 0 0 10px red;}
                </style>
                <button id="logOffClearBtn" type="button" style="background: none; border: none; color: white; text-shadow: red 0px 0px 10px; font-size: 20px; cursor: pointer; padding: 6px 8px; position: absolute; right: 10px; top: 0px;">Logout→</button>
            </div>
        `;
        //document.body.insertAdjacentHTML('afterbegin', containerHTML);
        const target = document.getElementById('block13') || document.querySelector('div[id^="block"]');

        if (target) {
            target.insertAdjacentHTML('afterbegin', containerHTML);
        } else {
            // fallback to body if target not yet present
            document.body.insertAdjacentHTML('afterbegin', containerHTML);
        }
        // Now that it's in the DOM, find it so we can use it
        container = document.getElementById('tm-custom-container');
    }

    // 3. Prepare and attach the button
    const btn = createButton();
    const cs = getComputedStyle(container);

    // Ensure the container can hold absolute-positioned children
    if (cs.position === 'static') {
        container.style.position = 'relative';
    }
    // 2. Add the clearing logic
    btn.onclick = function() {
        // List all cookies for this site
        GM_cookie.list({ url: window.location.href }, (cookies, error) => {
            if (!error) {
                // Delete every cookie found
                cookies.forEach(cookie => {
                    GM_cookie.delete({ name: cookie.name, url: window.location.href });
                });

                // 3. Refresh the site after clearing
                setTimeout(() => {
                    window.location.reload();
                }, 500);
            } else {
                console.warn('GM_cookie.list error or no cookies:', error);
            }
        });
    };
    Object.assign(btn.style, {
        position: 'absolute',
        right: '80px',
        top: '0',
    });

    container.appendChild(btn);
}

    placeButton();

    const observer = new MutationObserver(() => {
        const btn = document.getElementById(BUTTON_ID);
        const container = findTargetContainer();
        if (btn && container && btn.parentElement !== container) {
            // move existing button into container so it's aligned with the other button
            const cs = getComputedStyle(container);
            if (cs.position === 'static') container.style.position = 'relative';
            Object.assign(btn.style, {
                position: 'absolute',
                right: '10px',
                top: '0',
                zIndex: '',
                backgroundColor: '',
                border: '',
                padding: '',
                fontWeight: 'normal',
            });
            container.appendChild(btn);
            return;
        }
        if (!btn) placeButton();
    });

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

    setTimeout(() => observer.disconnect(), 3000);

})();