🏠 Home 

Scratch Editor Extension Maker

Adds a button to open an Extension Maker interface in the Scratch editor.


Install this script?
  1. // ==UserScript==
  2. // @name Scratch Editor Extension Maker
  3. // @namespace https://scratch.mit.edu/projects/editor/
  4. // @version 1.0.0
  5. // @description Adds a button to open an Extension Maker interface in the Scratch editor.
  6. // @author YourName
  7. // @match https://scratch.mit.edu/projects/editor/*
  8. // @grant none
  9. // @license this is my maker for scratch
  10. // ==/UserScript==
  11. (function() {
  12. 'use strict';
  13. // Function to create and show the Extension Maker modal
  14. function showExtensionMaker() {
  15. // Check if the modal already exists to prevent duplicates
  16. if (document.querySelector('#extensionMakerModal')) return;
  17. // Create the modal overlay
  18. const modalOverlay = document.createElement('div');
  19. modalOverlay.id = 'extensionMakerModal';
  20. modalOverlay.style.position = 'fixed';
  21. modalOverlay.style.top = '0';
  22. modalOverlay.style.left = '0';
  23. modalOverlay.style.width = '100%';
  24. modalOverlay.style.height = '100%';
  25. modalOverlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
  26. modalOverlay.style.display = 'flex';
  27. modalOverlay.style.justifyContent = 'center';
  28. modalOverlay.style.alignItems = 'center';
  29. modalOverlay.style.zIndex = '1000';
  30. // Create the modal content container
  31. const modalContent = document.createElement('div');
  32. modalContent.style.backgroundColor = '#fff';
  33. modalContent.style.padding = '20px';
  34. modalContent.style.borderRadius = '10px';
  35. modalContent.style.width = '50%';
  36. modalContent.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
  37. // Modal header
  38. const modalHeader = document.createElement('h2');
  39. modalHeader.innerText = 'Extension Maker';
  40. modalHeader.style.marginTop = '0';
  41. modalContent.appendChild(modalHeader);
  42. // Close button
  43. const closeButton = document.createElement('button');
  44. closeButton.innerText = 'Close';
  45. closeButton.style.marginBottom = '10px';
  46. closeButton.style.cursor = 'pointer';
  47. closeButton.addEventListener('click', () => {
  48. modalOverlay.remove();
  49. });
  50. modalContent.appendChild(closeButton);
  51. // Example input form
  52. const form = document.createElement('form');
  53. // Extension name input
  54. const nameLabel = document.createElement('label');
  55. nameLabel.innerText = 'Extension Name: ';
  56. const nameInput = document.createElement('input');
  57. nameInput.type = 'text';
  58. nameInput.style.marginBottom = '10px';
  59. form.appendChild(nameLabel);
  60. form.appendChild(nameInput);
  61. form.appendChild(document.createElement('br'));
  62. // Extension description input
  63. const descLabel = document.createElement('label');
  64. descLabel.innerText = 'Description: ';
  65. const descInput = document.createElement('textarea');
  66. descInput.style.width = '100%';
  67. descInput.style.height = '50px';
  68. form.appendChild(descLabel);
  69. form.appendChild(descInput);
  70. form.appendChild(document.createElement('br'));
  71. // Submit button
  72. const submitButton = document.createElement('button');
  73. submitButton.innerText = 'Create Extension';
  74. submitButton.style.cursor = 'pointer';
  75. submitButton.addEventListener('click', (event) => {
  76. event.preventDefault();
  77. alert(`Extension Created:\nName: ${nameInput.value}\nDescription: ${descInput.value}`);
  78. modalOverlay.remove();
  79. });
  80. form.appendChild(submitButton);
  81. // Append form to modal content
  82. modalContent.appendChild(form);
  83. // Append modal content to modal overlay
  84. modalOverlay.appendChild(modalContent);
  85. // Append modal overlay to document body
  86. document.body.appendChild(modalOverlay);
  87. }
  88. // Function to add the custom button
  89. function addCustomButton() {
  90. // Check if the button already exists to prevent duplicates
  91. if (document.querySelector('#extensionMakerButton')) return;
  92. const button = document.createElement('button');
  93. button.id = 'extensionMakerButton';
  94. button.innerText = 'Open Extension Maker';
  95. button.style.position = 'absolute';
  96. button.style.top = '10px';
  97. button.style.right = '10px';
  98. button.style.zIndex = '1000';
  99. button.style.backgroundColor = '#007bff';
  100. button.style.color = '#ffffff';
  101. button.style.border = 'none';
  102. button.style.padding = '10px';
  103. button.style.cursor = 'pointer';
  104. button.addEventListener('click', showExtensionMaker);
  105. // Append the button to the document body
  106. document.body.appendChild(button);
  107. }
  108. // Wait for the Scratch editor to load fully
  109. window.addEventListener('load', () => {
  110. // Ensure the Scratch editor has fully loaded
  111. const checkEditorLoaded = setInterval(() => {
  112. if (document.querySelector('.stage-header_stage-header-button_')) {
  113. clearInterval(checkEditorLoaded);
  114. addCustomButton();
  115. }
  116. }, 1000);
  117. });
  118. })();