Scratch Editor Extension Maker

Adds a button to open an Extension Maker interface in the Scratch editor.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Scratch Editor Extension Maker
// @namespace    https://scratch.mit.edu/projects/editor/
// @version      1.0.0
// @description  Adds a button to open an Extension Maker interface in the Scratch editor.
// @author       YourName
// @match        https://scratch.mit.edu/projects/editor/*
// @grant        none
// @license      this is my maker for scratch
// ==/UserScript==

(function() {
    'use strict';

    // Function to create and show the Extension Maker modal
    function showExtensionMaker() {
        // Check if the modal already exists to prevent duplicates
        if (document.querySelector('#extensionMakerModal')) return;

        // Create the modal overlay
        const modalOverlay = document.createElement('div');
        modalOverlay.id = 'extensionMakerModal';
        modalOverlay.style.position = 'fixed';
        modalOverlay.style.top = '0';
        modalOverlay.style.left = '0';
        modalOverlay.style.width = '100%';
        modalOverlay.style.height = '100%';
        modalOverlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
        modalOverlay.style.display = 'flex';
        modalOverlay.style.justifyContent = 'center';
        modalOverlay.style.alignItems = 'center';
        modalOverlay.style.zIndex = '1000';

        // Create the modal content container
        const modalContent = document.createElement('div');
        modalContent.style.backgroundColor = '#fff';
        modalContent.style.padding = '20px';
        modalContent.style.borderRadius = '10px';
        modalContent.style.width = '50%';
        modalContent.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';

        // Modal header
        const modalHeader = document.createElement('h2');
        modalHeader.innerText = 'Extension Maker';
        modalHeader.style.marginTop = '0';
        modalContent.appendChild(modalHeader);

        // Close button
        const closeButton = document.createElement('button');
        closeButton.innerText = 'Close';
        closeButton.style.marginBottom = '10px';
        closeButton.style.cursor = 'pointer';
        closeButton.addEventListener('click', () => {
            modalOverlay.remove();
        });
        modalContent.appendChild(closeButton);

        // Example input form
        const form = document.createElement('form');
        
        // Extension name input
        const nameLabel = document.createElement('label');
        nameLabel.innerText = 'Extension Name: ';
        const nameInput = document.createElement('input');
        nameInput.type = 'text';
        nameInput.style.marginBottom = '10px';
        form.appendChild(nameLabel);
        form.appendChild(nameInput);
        form.appendChild(document.createElement('br'));

        // Extension description input
        const descLabel = document.createElement('label');
        descLabel.innerText = 'Description: ';
        const descInput = document.createElement('textarea');
        descInput.style.width = '100%';
        descInput.style.height = '50px';
        form.appendChild(descLabel);
        form.appendChild(descInput);
        form.appendChild(document.createElement('br'));

        // Submit button
        const submitButton = document.createElement('button');
        submitButton.innerText = 'Create Extension';
        submitButton.style.cursor = 'pointer';
        submitButton.addEventListener('click', (event) => {
            event.preventDefault();
            alert(`Extension Created:\nName: ${nameInput.value}\nDescription: ${descInput.value}`);
            modalOverlay.remove();
        });
        form.appendChild(submitButton);

        // Append form to modal content
        modalContent.appendChild(form);

        // Append modal content to modal overlay
        modalOverlay.appendChild(modalContent);

        // Append modal overlay to document body
        document.body.appendChild(modalOverlay);
    }

    // Function to add the custom button
    function addCustomButton() {
        // Check if the button already exists to prevent duplicates
        if (document.querySelector('#extensionMakerButton')) return;

        const button = document.createElement('button');
        button.id = 'extensionMakerButton';
        button.innerText = 'Open Extension Maker';
        button.style.position = 'absolute';
        button.style.top = '10px';
        button.style.right = '10px';
        button.style.zIndex = '1000';
        button.style.backgroundColor = '#007bff';
        button.style.color = '#ffffff';
        button.style.border = 'none';
        button.style.padding = '10px';
        button.style.cursor = 'pointer';
        button.addEventListener('click', showExtensionMaker);

        // Append the button to the document body
        document.body.appendChild(button);
    }

    // Wait for the Scratch editor to load fully
    window.addEventListener('load', () => {
        // Ensure the Scratch editor has fully loaded
        const checkEditorLoaded = setInterval(() => {
            if (document.querySelector('.stage-header_stage-header-button_')) {
                clearInterval(checkEditorLoaded);
                addCustomButton();
            }
        }, 1000);
    });
})();