All Cookie Viewer

Displays cookies for the current page in an overlay

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         All Cookie Viewer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Displays cookies for the current page in an overlay
// @author       
// @match        *://*/*
// @grant        none
// @license      free
// ==/UserScript==

(function() {
    'use strict';

    // Create overlay element
    const overlay = document.createElement('div');
    overlay.id = 'cookieOverlay';
    overlay.innerHTML = `
        <div class="header">
            <h3>Cookies for <span class="domain">${location.hostname}</span></h3>
            <button class="close">×</button>
        </div>
        <div class="content"></div>
    `;

    // Create and append styles
    const style = document.createElement('style');
    style.textContent = `
        #cookieOverlay {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 15px;
            border-radius: 8px;
            max-width: 400px;
            max-height: 50vh;
            overflow-y: auto;
            z-index: 9999;
            font-family: Arial, sans-serif;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        #cookieOverlay .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            position: sticky;
            top: 0;
            background: inherit;
        }
        #cookieOverlay .close {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 0 8px;
            margin-left: 10px;
        }
        #cookieOverlay .close:hover {
            color: #ff4444;
        }
        #cookieOverlay .content {
            font-size: 14px;
            line-height: 1.4;
        }
        #cookieOverlay .cookie-item {
            margin: 8px 0;
            padding: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 4px;
            word-break: break-word;
        }
        #cookieOverlay .domain {
            color: #00ff9d;
            font-weight: bold;
        }
    `;
    document.body.appendChild(style);
    document.body.appendChild(overlay);

    // Update cookie display function
    function updateCookieDisplay() {
        const domainSpan = overlay.querySelector('.domain');
        const contentDiv = overlay.querySelector('.content');
        
        domainSpan.textContent = location.hostname;
        contentDiv.innerHTML = '';

        const cookies = document.cookie.split('; ').filter(Boolean);
        
        if (cookies.length === 0) {
            contentDiv.innerHTML = '<div class="cookie-item">No cookies found</div>';
            return;
        }

        cookies.forEach(cookie => {
            const [key, ...valueParts] = cookie.split('=');
            const value = valueParts.join('=');
            const cookieDiv = document.createElement('div');
            cookieDiv.className = 'cookie-item';
            cookieDiv.innerHTML = `
                <strong>${key.trim()}</strong>: <span class="cookie-value">${decodeURIComponent(value)}</span>
            `;
            contentDiv.appendChild(cookieDiv);
        });
    }

    // Event listeners for page changes
    const updateEvents = ['load', 'DOMContentLoaded', 'popstate', 'pushState', 'replaceState'];
    updateEvents.forEach(event => window.addEventListener(event, updateCookieDisplay));

    // Monitor history changes for SPAs
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    history.pushState = function(...args) {
        originalPushState.apply(this, args);
        window.dispatchEvent(new Event('pushState'));
    };

    history.replaceState = function(...args) {
        originalReplaceState.apply(this, args);
        window.dispatchEvent(new Event('replaceState'));
    };

    // Close button functionality
    overlay.querySelector('.close').addEventListener('click', () => {
        overlay.style.display = 'none';
        localStorage.setItem('cookieOverlayHidden', 'true');
    });

    // Persist visibility state across page loads
    if (localStorage.getItem('cookieOverlayHidden') === 'true') {
        overlay.style.display = 'none';
    } else {
        overlay.style.display = 'block';
    }

    // Initial update
    updateCookieDisplay();
})();