☰

Custom Scratch Block Maker

Create custom blocks for Scratch

  1. // ==UserScript==
  2. // @name         Custom Scratch Block Maker
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Create custom blocks for Scratch
  6. // @author       You
  7. // @match        https://scratch.mit.edu/projects/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Add a sidebar menu for custom blocks
  15.     const sidebar = document.createElement('div');
  16.     sidebar.id = 'custom-block-sidebar';
  17.     sidebar.style.position = 'fixed';
  18.     sidebar.style.top = '10px';
  19.     sidebar.style.left = '10px';
  20.     sidebar.style.backgroundColor = 'white';
  21.     sidebar.style.border = '1px solid #ccc';
  22.     sidebar.style.padding = '10px';
  23.     sidebar.style.zIndex = '1000';
  24.  
  25.     const header = document.createElement('h3');
  26.     header.innerText = 'Custom Scratch Block Maker';
  27.     sidebar.appendChild(header);
  28.  
  29.     const blockNameLabel = document.createElement('label');
  30.     blockNameLabel.innerText = 'Block Name: ';
  31.     const blockNameInput = document.createElement('input');
  32.     blockNameInput.type = 'text';
  33.     sidebar.appendChild(blockNameLabel);
  34.     sidebar.appendChild(blockNameInput);
  35.  
  36.     const blockCategoryLabel = document.createElement('label');
  37.     blockCategoryLabel.innerText = 'Block Category: ';
  38.     const blockCategoryInput = document.createElement('input');
  39.     blockCategoryInput.type = 'text';
  40.     sidebar.appendChild(blockCategoryLabel);
  41.     sidebar.appendChild(blockCategoryInput);
  42.  
  43.     const createBlockButton = document.createElement('button');
  44.     createBlockButton.innerText = 'Create Block';
  45.     createBlockButton.onclick = function() {
  46.         const blockName = blockNameInput.value;
  47.         const blockCategory = blockCategoryInput.value;
  48.         if (blockName && blockCategory) {
  49.             addCustomBlock(blockName, blockCategory);
  50.         }
  51.     };
  52.     sidebar.appendChild(createBlockButton);
  53.  
  54.     document.body.appendChild(sidebar);
  55.  
  56.     // Function to add the custom block to Scratch
  57.     function addCustomBlock(blockName, blockCategory) {
  58.         // Create the custom block element in the Scratch blocks menu
  59.         const customBlock = document.createElement('block');
  60.         customBlock.setAttribute('type', blockName);
  61.         customBlock.setAttribute('category', blockCategory);
  62.  
  63.         // Add to Scratch's block palette
  64.         const blockMenu = document.querySelector('.blocklyToolbox');
  65.         const newBlockCategory = document.createElement('category');
  66.         newBlockCategory.setAttribute('name', blockCategory);
  67.         newBlockCategory.appendChild(customBlock);
  68.         blockMenu.appendChild(newBlockCategory);
  69.  
  70.         // Map the block to Scratch's scripting area functionality (simplified)
  71.         const blockly = window.Blockly;
  72.         const blockDef = {
  73.             init: function() {
  74.                 this.appendDummyInput()
  75.                     .appendField(blockName);
  76.                 this.setColour(160);
  77.                 this.setOutput(true, null);
  78.                 this.setTooltip('Custom block');
  79.                 this.setHelpUrl('');
  80.             }
  81.         };
  82.  
  83.         blockly.Blocks[blockName] = blockDef;
  84.  
  85.         // Refresh the Scratch editor to show the new block
  86.         blockly.selected = null;
  87.         blockly.svgResize();
  88.     }
  89. })();