RabbitMQ Payload Beautifier

README.md

RabbitMQ Payload Beautifier ✨

Core features

• Beautifies JSON payloads.
• Parses nulls, booleans, integers & uuids.
• Easily copy the whole payload to clipboard.
• Adds a "Copy" link after every uuid.

Usage

1. Create a new shortcut in your browser and copy the javascript code as url.
2. Whenever you have rabbitmq payloads visible, just click on the shortcut and every payload will be beautified ✨.

rabbitmq-payload-beautifier.js

javascript:void(function() {
    'use strict';

    function beautifyAndHighlightJSON(element) {
        const payloadString = element.textContent.trim();

        try {
            const parsedPayload = JSON.parse(payloadString);
            const beautifiedPayload = JSON.stringify(parsedPayload, null, 2);
            const highlightedPayload = syntaxHighlight(beautifiedPayload);

            const detailsElement = document.createElement('details');
            const summaryElement = document.createElement('summary');
            summaryElement.textContent = 'Payload details - beautified ✨';
            summaryElement.style = 'font-size: 14px; color: white; cursor: pointer; position: relative;';

            const preElement = document.createElement('pre');
            preElement.style = 'font-size: 13px; color: white; border-radius: 5px; word-wrap: break-word; white-space: pre-wrap;';
            preElement.innerHTML = highlightedPayload;

            const copyLink = document.createElement('a');
            copyLink.href = 'javascript:void(0);';
            copyLink.textContent = 'Copy to clipboard 📋';
            copyLink.style = 'position: absolute; right: 5px; color: #7be6ff; text-decoration: none;';
            copyLink.addEventListener('click', function () {
                copyToClipboard(beautifiedPayload);
                updateCopyLinkText(copyLink, 'Copied ✅');

                setTimeout(() => {
                    updateCopyLinkText(copyLink, 'Copy to clipboard 📋');
                }, 10000);
            });

            summaryElement.appendChild(copyLink);
            detailsElement.appendChild(summaryElement);
            detailsElement.appendChild(preElement);

            element.innerHTML = '';
            element.appendChild(detailsElement);

            element.style = 'background: black; border-radius: 5px; padding: 7px;';
        } catch (error) {
            console.error('Error beautifying payload:', error);
        }
    }

    function syntaxHighlight(jsonString) {
        jsonString = jsonString.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return jsonString.replace(
            /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|\b[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\b)/ig,
            function(match) {
                let cls = 'number';
                let color = '#a6a3a3';

                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                        color = '#7be6ff';
                    } else {
                        cls = 'string';
                        color = '#ffbe6c';

                        match = match.replace(/^"(.*)"$/, function(stringMatch, stringContent) {
                            return `"${stringContent.replace(/\n/g, '\\n')}"`;
                        });

                        match = match.replace(/(\b[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\b)/ig, function(uuid) {
                            return `<span class="uuid" style="color: #fff56c; margin: 0; padding: 0">${uuid}</span>`;
                        });

                        if (/(\b[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}\b)/i.test(match)) {
                            const uuidWithoutQuotes = match.match(/([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/i)[0];
                            match += ` <a style="cursor: pointer;" onclick="copyToClipboardAndChangeText('${uuidWithoutQuotes}', this);">Copy</a>`;
                        }
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                    color = '#ff81bf';
                } else if (/null/.test(match)) {
                    cls = 'null';
                    color = '#a6a3a3';
                } else if (/0|1/.test(match)) {
                    color = '#ff81bf';
                }

                return `<span class="${cls}" style="color: ${color}; padding: 0; white-space: ${
                    cls === 'string' ? 'normal' : 'pre-wrap'
                }">${match}</span>`;
            }
        );
    }

    const copyToClipboardScript = document.createElement('script');
    copyToClipboardScript.textContent = `
        function updateCopyLinkText(link, newText, applied) {
            link.textContent = newText;
            if (applied) {
                link.style.color = "rgb(123, 230, 255)";
            } else {
                link.style.color = "";
            }
        }

        function copyToClipboardAndChangeText(text, link) {
            copyToClipboard(text);
            updateCopyLinkText(link, 'Copied ✅', true);

            setTimeout(() => {
                updateCopyLinkText(link, 'Copy', false);
            }, 10000);
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text)
                .then(() => {
                    console.log('Payload successfully copied to clipboard');
                })
                .catch((err) => {
                    console.error('Unable to copy to clipboard', err);
                });
        }
    `;
    document.head.appendChild(copyToClipboardScript);

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text)
            .then(() => {
                console.log('Payload successfully copied to clipboard');
            })
            .catch((err) => {
                console.error('Unable to copy to clipboard', err);
            });
    }

    function updateCopyLinkText(link, newText) {
        link.textContent = newText;
    }

    const payloadElements = document.querySelectorAll('.msg-payload');
    payloadElements.forEach(beautifyAndHighlightJSON);
})();