☰

PenguinMod stylish single-tabbed addons

Makes the addons page open in a stylish iframe instead of in a new tab.

// ==UserScript==
// @name         PenguinMod stylish single-tabbed addons
// @namespace    https://studio.penguinmod.com
// @version      2025-01-25
// @description  Makes the addons page open in a stylish iframe instead of in a new tab.
// @author       Pooiod7
// @match        https://studio.penguinmod.com/editor.html
// @match        https://studio.penguinmod.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=penguinmod.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    setInterval(() => {
        const AddonsButton = Array.from(document.querySelectorAll('div')).find(btn => {
            const div = btn.querySelector('div');
            const span = div?.querySelector('span');
            if (span?.textContent.trim() === 'Addons') {
                return btn;
            }
        });
        const existingButton = document.getElementById("StylishAddonsButton");

        if (AddonsButton && !existingButton) {
            const newAddonsButton = AddonsButton.cloneNode(true);
            newAddonsButton.id = "StylishAddonsButton";
            AddonsButton.parentNode.replaceChild(newAddonsButton, AddonsButton);

            newAddonsButton.addEventListener("click", function(event) {
                event.preventDefault();
                event.stopImmediatePropagation();

                if (document.getElementById("widgetoverlay")) return;

                const overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0, 195, 255, 0.7)';
                overlay.style.zIndex = '9999';
                overlay.id = "widgetoverlay";

                const wrapper = document.createElement('div');
                wrapper.style.position = 'absolute';
                wrapper.style.top = "50%";
                wrapper.style.left = "50%";
                wrapper.style.transform = 'translate(-50%, -50%)';
                wrapper.style.border = '4px solid rgba(255, 255, 255, 0.25)';
                wrapper.style.borderRadius = '13px';
                wrapper.style.padding = '0px';
                wrapper.style.width = '70vw';
                wrapper.style.height = '80vh';

                const modal = document.createElement('div');
                modal.style.backgroundColor = 'var(--ui-primary, white)';
                modal.style.padding = '0px';
                modal.style.borderRadius = '10px';
                modal.style.width = '100%';
                modal.style.height = '100%';
                modal.style.textAlign = 'center';

                wrapper.appendChild(modal);

                const title = document.createElement('div');
                title.style.position = 'absolute';
                title.style.top = '0';
                title.style.left = '0';
                title.style.width = '100%';
                title.style.height = '50px';
                title.style.backgroundColor = 'rgb(0, 195, 255)';
                title.style.display = 'flex';
                title.style.justifyContent = 'center';
                title.style.alignItems = 'center';
                title.style.color = 'white';
                title.style.fontSize = '24px';
                title.style.borderTopLeftRadius = '10px';
                title.style.borderTopRightRadius = '10px';
                title.innerHTML = "Addons";

                const iframe = document.createElement('iframe');
                iframe.src = '/addons.html';
                iframe.style.width = '100%';
                iframe.style.height = `calc(100% - 50px)`;
                iframe.style.marginTop = '50px';
                iframe.style.border = 'none';
                iframe.style.borderBottomLeftRadius = '10px';
                iframe.style.borderBottomRightRadius = '10px';
                modal.appendChild(iframe);

                const closeButton = document.createElement('div');
                closeButton.setAttribute('aria-label', 'Close');
                closeButton.classList.add('close-button_close-button_lOp2G', 'close-button_large_2oadS');
                closeButton.setAttribute('role', 'button');
                closeButton.setAttribute('tabindex', '0');
                closeButton.innerHTML = '<img class="close-button_close-icon_HBCuO" src="data:image/svg+xml,%3Csvg%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.48%207.48%22%3E%3Cpath%20d%3D%22M3.74%206.48V1M1%203.74h5.48%22%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E">';
                closeButton.style.position = 'absolute';
                closeButton.style.top = '50%';
                closeButton.style.right = '10px';
                closeButton.style.transform = 'translateY(-50%)';
                closeButton.style.zIndex = '1000';
                closeButton.addEventListener('click', () => {
                    document.body.removeChild(overlay);
                });
                title.appendChild(closeButton);

                modal.appendChild(title);
                overlay.appendChild(wrapper);
                document.body.appendChild(overlay);

                overlay.addEventListener('click', (e) => {
                    if (e.target === overlay) {
                        document.body.removeChild(overlay);
                    }
                });
            });
        }
    }, 1000);
})();