test.html

(function() {
    // 1. GUI 생성 (기본 뼈대)
    const gui = document.createElement('div');
    gui.style.position = 'fixed';
    gui.style.bottom = '20px';
    gui.style.right = '20px';
    gui.style.width = '450px';
    gui.style.height = '400px';
    gui.style.backgroundColor = '#212529';
    gui.style.color = '#f8f9fa';
    gui.style.border = '1px solid #495057';
    gui.style.borderRadius = '8px';
    gui.style.boxShadow = '0 10px 15px rgba(0,0,0,0.5)';
    gui.style.zIndex = '999999';
    gui.style.display = 'flex';
    gui.style.flexDirection = 'column';
    gui.style.fontFamily = 'monospace';

    const header = document.createElement('div');
    header.style.backgroundColor = '#dc3545';
    header.style.padding = '10px';
    header.style.borderTopLeftRadius = '7px';
    header.style.borderTopRightRadius = '7px';
    header.style.display = 'flex';
    header.style.justifyContent = 'space-between';
    header.style.fontWeight = 'bold';

    const titleStr = document.createElement('span');
    titleStr.innerText = '🛑 POST Interceptor';
    
    const closeBtn = document.createElement('button');
    closeBtn.innerText = '종료';
    closeBtn.style.cursor = 'pointer';
    closeBtn.onclick = () => {
        document.body.removeChild(gui);
        window.fetch = originalFetch;
        XMLHttpRequest.prototype.open = originalXhrOpen;
        XMLHttpRequest.prototype.send = originalXhrSend;
        console.log("Hooking removed.");
    };

    header.appendChild(titleStr);
    header.appendChild(closeBtn);
    gui.appendChild(header);

    // 2. 타겟 필터 (백그라운드 통신 무시용)
    const filterArea = document.createElement('div');
    filterArea.style.padding = '10px';
    filterArea.style.backgroundColor = '#343a40';
    filterArea.style.borderBottom = '1px solid #495057';
    filterArea.innerHTML = `
        <label style="font-size:12px; font-weight:bold; color:#ffc107;">URL 필터 (포함된 단어만 가로챔):</label>
        <input type="text" id="hook-filter" placeholder="예: send, mail, message (비우면 전체)" style="width:100%; margin-top:5px; padding:5px; box-sizing:border-box;">
    `;
    gui.appendChild(filterArea);

    // 3. 편집 영역 (자동 포맷팅 제거, Raw 데이터 유지)
    const editArea = document.createElement('textarea');
    editArea.style.flexGrow = '1';
    editArea.style.margin = '10px';
    editArea.style.padding = '10px';
    editArea.style.backgroundColor = '#2b3035';
    editArea.style.color = '#20c997';
    editArea.style.border = '1px solid #495057';
    editArea.style.resize = 'none';
    editArea.placeholder = "대기 중... (원본 Raw Data가 여기에 표시됩니다)";
    gui.appendChild(editArea);

    // 4. 컨트롤 버튼
    const controlArea = document.createElement('div');
    controlArea.style.display = 'flex';
    controlArea.style.padding = '0 10px 10px 10px';
    controlArea.style.gap = '10px';

    const sendBtn = document.createElement('button');
    sendBtn.innerText = '🚀 전송 (Forward)';
    sendBtn.style.flexGrow = '1';
    sendBtn.style.padding = '10px';
    sendBtn.style.cursor = 'pointer';
    sendBtn.style.backgroundColor = '#0d6efd';
    sendBtn.style.color = 'white';
    sendBtn.style.border = 'none';
    sendBtn.style.fontWeight = 'bold';
    sendBtn.disabled = true;

    const dropBtn = document.createElement('button');
    dropBtn.innerText = '🗑️ 드롭 (Drop)';
    dropBtn.style.padding = '10px';
    dropBtn.style.cursor = 'pointer';
    dropBtn.style.backgroundColor = '#6c757d';
    dropBtn.style.color = 'white';
    dropBtn.style.border = 'none';
    dropBtn.disabled = true;

    controlArea.appendChild(sendBtn);
    controlArea.appendChild(dropBtn);
    gui.appendChild(controlArea);
    document.body.appendChild(gui);

    // ==========================================
    // 5. 인터셉터 제어 로직
    // ==========================================
    let pendingRequest = null;

    function interceptAndPause(method, url, body, resumeCallback, dropCallback) {
        if (pendingRequest) {
            resumeCallback(body); // 이미 잡혀있으면 나머지는 그냥 통과시킴
            return;
        }

        titleStr.innerText = `🛑 Intercepted!`;
        header.style.backgroundColor = '#ffc107';
        header.style.color = 'black';
        
        // 중요: 데이터를 임의로 파싱하거나 포맷팅하지 않고 그대로 넣음
        editArea.value = body;

        sendBtn.disabled = false;
        dropBtn.disabled = false;

        pendingRequest = {
            resume: () => {
                const modifiedBody = editArea.value; 
                resetGUI();
                resumeCallback(modifiedBody);
            },
            drop: () => {
                resetGUI();
                dropCallback();
            }
        };
    }

    function resetGUI() {
        pendingRequest = null;
        titleStr.innerText = '🛑 POST Interceptor';
        header.style.backgroundColor = '#dc3545';
        header.style.color = 'white';
        editArea.value = '';
        sendBtn.disabled = true;
        dropBtn.disabled = true;
    }

    sendBtn.onclick = () => { if (pendingRequest) pendingRequest.resume(); };
    dropBtn.onclick = () => { if (pendingRequest) pendingRequest.drop(); };

    // 필터 확인 함수
    function shouldIntercept(url) {
        const filterKeyword = document.getElementById('hook-filter').value.trim();
        if (!filterKeyword) return true; // 필터가 비어있으면 모두 잡음
        return url.includes(filterKeyword);
    }

    // ==========================================
    // 6. Fetch / XHR 후킹
    // ==========================================
    const originalFetch = window.fetch;
    window.fetch = async function(...args) {
        let url = typeof args[0] === 'string' ? args[0] : (args[0] && args[0].url ? args[0].url : '');
        let method = (args[1] && args[1].method) ? args[1].method.toUpperCase() : 'GET';

        if (method === 'POST' && args[1] && args[1].body && typeof args[1].body === 'string' && shouldIntercept(url)) {
            return new Promise((resolve, reject) => {
                interceptAndPause(method, url, args[1].body, 
                    (modifiedBody) => {
                        args[1].body = modifiedBody;
                        resolve(originalFetch.apply(this, args));
                    },
                    () => reject(new Error("Dropped by Interceptor"))
                );
            });
        }
        return originalFetch.apply(this, args);
    };

    const originalXhrOpen = XMLHttpRequest.prototype.open;
    const originalXhrSend = XMLHttpRequest.prototype.send;

    XMLHttpRequest.prototype.open = function(method, url, ...args) {
        this._hook_method = method ? method.toUpperCase() : 'GET';
        this._hook_url = url;
        return originalXhrOpen.apply(this, [method, url, ...args]);
    };

    XMLHttpRequest.prototype.send = function(body) {
        if (this._hook_method === 'POST' && body && typeof body === 'string' && shouldIntercept(this._hook_url)) {
            interceptAndPause(this._hook_method, this._hook_url, body,
                (modifiedBody) => originalXhrSend.apply(this, [modifiedBody]),
                () => console.log("XHR Dropped")
            );
            return; 
        }
        return originalXhrSend.apply(this, [body]);
    };

    console.log("Interceptor V2 Started! (포맷팅 방지 & URL 필터 적용됨)");
})();