{"id":5620,"date":"2022-03-27T17:46:20","date_gmt":"2022-03-27T17:46:20","guid":{"rendered":"https:\/\/brightchamps.com\/blog\/?p=5620"},"modified":"2024-10-03T10:38:09","modified_gmt":"2024-10-03T10:38:09","slug":"make-scratch-extension-using-javascript","status":"publish","type":"post","link":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/","title":{"rendered":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]"},"content":{"rendered":"<div class=\"yoast-breadcrumbs\"><span><span><a href=\"https:\/\/brightchamps.com\/blog\/\">Home<\/a><\/span> \u00bb <span><a href=\"https:\/\/brightchamps.com\/blog\/code-for-kids\/\">Code for Kids Corner<\/a><\/span> \u00bb <span class=\"breadcrumb_last\" aria-current=\"page\"><strong>How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]<\/strong><\/span><\/span><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s a wonderful experience to create projects in Scratch since you may utilize a range of tools and features to make your designing and coding rewarding. While exploring Scratch, you may have noticed the &#8220;Add an extension&#8221; feature. If not, don&#8217;t worry; in this blog, we&#8217;ll look through Extensions in more detail.<\/p>\n\n\n\n<div id=\"cstm_banner_cta\">&nbsp;<\/div>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-are-scratch-extensions\" data-level=\"3\">What are Scratch Extensions?\u00a0<\/a><\/li><li><a href=\"#how-to-create-your-own-extension\" data-level=\"2\">How to Create Your Extension in Scratch<\/a><ul><li><a href=\"#h-step-1-setting-up-of-development-environment\" data-level=\"4\">Step 1: Setting up of Development Environment\u00a0<\/a><\/li><li><a href=\"#h-step-2-implementing-and-creating-your-extension\" data-level=\"4\">Step 2: Implementing and Creating Your Extension\u00a0<\/a><\/li><li><a href=\"#h-working-on-the-gui\" data-level=\"3\">Working on the GUI\u00a0<\/a><\/li><\/ul><\/li><li><a href=\"#conclusion\" data-level=\"2\">Conclusion\u00a0<\/a><\/li><\/ul><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-are-scratch-extensions\"><strong>What are Scratch Extensions?&nbsp;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An extension is a category that you can add to your project to make it more advanced. It enables you to connect to information on the internet, use external hardware, and so on.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" fetchpriority=\"high\" decoding=\"async\" width=\"603\" height=\"557\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-1.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5621\" style=\"width:452px;height:418px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-1.png 603w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-1-480x443.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 603px, 100vw\" \/><figcaption class=\"wp-element-caption\"><em>Image 1: Add an extension icon<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on Add an Extension icon in Scratch you will be directed to choose an Extension section, where you can choose from available extensions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-2-1024x544.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5622\" style=\"width:768px;height:408px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-2-980x521.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-2-480x255.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><figcaption class=\"wp-element-caption\"><em>Image 2: Available extensions in Scratch 3.0<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Different pre-built extensions are Music, Pen, Video Sensing, Text-to-Speech, Translate, Makey Makey, micro: bit, LEGO MINDSTORMS EV3, LEGO BOOST, LEGO Education WeDo 2.0, and Go Direct Force &amp; Acceleration.&nbsp;When you choose an extension, you will get the blocks related to that extension on Block Palette.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Image 3: Pen Extension<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-create-your-own-extension\"><strong>How to Create Your Extension<\/strong> in Scratch<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can make your own if the feature you want isn&#8217;t available in pre-built extensions. Let&#8217;s take it further and look at how to create one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: Extensions of Scratch are developed using JavaScript Environment.&nbsp;<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><p>Follow the steps below to create your extension in Scratch.<\/p>\n<div id=\"cstm_banner_cta\"><\/div><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-step-1-setting-up-of-development-environment\"><strong>Step 1: Setting up of Development Environment&nbsp;<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">(a) Installing Git and node.js&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Download both from your favorite browser and then install them.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>Note: Node.js is an open-source, back-end JavaScript runtime environment. Git is required so that we can clone the scratch-gui and scratch-vm projects.&nbsp;<\/em><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">GUI stands for Graphical User Interface; VM stands for Virtual Machine.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(b) Create a folder and name it descriptively (for example myScratchExtensions)&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(c) Then open the Node.js command prompt. Go into the myScratchExtensions folder by copying its path in the command prompt (using cd).&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: cd stands for change directory.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"313\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-4-1024x313.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5624\" style=\"width:768px;height:235px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-4-980x299.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-4-480x147.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you are inside your folder, clone the GitHub repository scratch-gui by using the command and link:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">git clone https:\/\/github.com\/llk\/scratch-gui&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"301\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-5-1024x301.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5625\" style=\"width:768px;height:226px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-5-980x288.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-5-480x141.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It will start cloning the scratch-gui project. After this process is completed, you will see a folder named scratch-gui inside your myScratchExtensions folder.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Similarly, we have to clone the project: scratch-vm using the command and link:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">git clone https:\/\/github.com\/llk\/scratch-vm<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"189\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-6-1024x189.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5626\" style=\"width:768px;height:142px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-6-980x181.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-6-480x88.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When this is completed, you will have another folder inside myScratchExtensions named scratch-vm.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: scratch-vm is a library responsible for running and maintaining the computer programs created using Scratch blocks. scratch-gui provides the interface for creating projects.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go into these folders individually to install the packages using the npm install command.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(i) First go into the scratch-vm folder and type the command npm install.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"117\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-7-1024x117.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5627\" style=\"width:768px;height:88px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-7-980x112.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-7-480x55.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(ii) Once installation is done, type another command npm link. This will link the two folders.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"110\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-8-1024x110.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5628\" style=\"width:768px;height:83px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-8-980x105.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-8-480x51.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(iii) Repeat the above two steps for scratch-gui folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"102\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-9-1024x102.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5629\" style=\"width:768px;height:77px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-9-980x98.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-9-480x48.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"77\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-10-1024x77.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5630\" style=\"width:768px;height:58px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-10-980x74.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-10-480x36.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">(iii) Next use the command: npm start and it will start the scratch service.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><em>Remember: npm is Node Package Manager for JavaScript programming; it helps in installing various modules.&nbsp;<\/em><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">It is basically an online database consisting of packages, therefore, called as npm registry.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After completing the compilation, go to http:\/\/localhost:8601\/ on your browser and see the magic!&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Note: localhost means you are establishing a connection with your own computer. This link is not connected to the internet. So, you won&#8217;t be able to share or load your projects.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"520\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-11-1024x520.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5631\" style=\"width:768px;height:390px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-11-980x497.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-11-480x244.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-step-2-implementing-and-creating-your-extension\"><strong>Step 2: Implementing and Creating Your Extension<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Go to: scratch-vm folder &#8211; src &#8211;&nbsp; extensions&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Create a folder for storing files related to your extension in the extensions folder. I have named this folder as scratch3_myExtension.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-12-1024x525.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5632\" style=\"width:768px;height:394px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-12-1024x525.png 1024w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-12-980x503.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-12-480x246.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/brightchamps.com\/blog\/robotics-programming-for-kids\/\">robotics programming for kids<\/a> is a fun and instructive approach to introducing young students to the fascinating world of automation and technology. Checkout Here! Now, we will create a file named index.js. You can create this file using Brackets- a source code editor or any other JavaScript editor.&nbsp;<\/p>\n\n\n<div id=\"cstm_banner_cta\"><\/div>\n\n\n<p class=\"wp-block-paragraph\">In this file, first, create a class, and then, code is to be written to register the extension.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s create an Extension class in index.js:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"875\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-13.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5633\" style=\"width:593px;height:656px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-13.png 791w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-13-480x531.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 791px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here, we have created a class named Scratch2myExtension. getInfo() is a method that returns an object that is used for rendering the extension and blocks.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the get info method following terms are used:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>id:<\/strong> A unique internal name of Extension&nbsp;<\/li>\n\n\n\n<li><strong>name:<\/strong> This will be displayed on the Scratch&#8217;s section of Choose an Extension.&nbsp;<\/li>\n\n\n\n<li><strong>blocks: <\/strong>It contains the new objects\/blocks of the new extension&nbsp;<\/li>\n\n\n\n<li><strong>opcode<\/strong>: It is the method that is called to operate the block (here, writeText).&nbsp;<\/li>\n\n\n\n<li><strong>blockType<\/strong>: Describes the block type. Here we have used.COMMAND.&nbsp;<\/li>\n\n\n\n<li><strong>text: <\/strong>It contains the description of the block.&nbsp;<\/li>\n\n\n\n<li><strong>arguments:<\/strong> It is an object that contains fields for different arguments. (Here, TEXT is an argument containing fields type and default value)&nbsp;<\/li>\n\n\n\n<li><strong>menus(optional):<\/strong> It is used to create a drop-down menu for blocks.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">next go to scratch-vm folder &#8211; src &#8211;&nbsp; extension support &#8211; extension-manager.js<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In extension-manager.js, add your extension&#8217;s path.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-14-1024x525.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5634\" style=\"width:768px;height:394px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-14-980x503.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-14-480x246.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-working-on-the-gui\">Working on the GUI&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create a background image and icon you want to display for your extension.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"816\" height=\"516\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-15.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5635\" style=\"width:612px;height:387px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-15.png 816w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-15-480x304.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 816px, 100vw\" \/><figcaption class=\"wp-element-caption\">Background Image<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"600\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-16.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5636\" style=\"width:452px;height:450px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-16.png 602w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-16-480x478.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 602px, 100vw\" \/><figcaption class=\"wp-element-caption\">Extension Icon<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then go to: scratch-gui folder &#8211; src &#8211; lib &#8211; libraries &#8211; extensions<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Store your images in this folder. Also, here you will find a file named index.js; open this file. Type these commands in that file to import your images:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"91\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-17-1024x91.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5637\" style=\"width:768px;height:68px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-17-980x87.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-17-480x43.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to this, add the following code at the end of this file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-18-1024x648.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5638\" style=\"width:768px;height:486px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-18-1024x648.png 1024w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-18-980x620.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-18-480x304.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Name is the name of your extension in this sample code, and the default message is the message that will be displayed on the menu so that you can be creative with it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-19-1024x548.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5639\" style=\"width:768px;height:411px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-19-980x524.png 980w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-19-480x257.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When you click on your Extension, you will see your block on Block Palette, as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"800\" src=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-20.png\" alt=\"How To Make Your Own Extension In Scratch Using JavaScript\" class=\"wp-image-5640\" style=\"width:360px;height:600px\" srcset=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-20.png 480w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-20-180x300.png 180w, https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript-20-90x150.png 90w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I found a <a href=\"https:\/\/brightchamps.com\/blog\/coding-camp-for-kids-near-me\/\">coding camp for kids near me<\/a> that offers an exciting learning experience in programming. Checkout Here!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\"><strong>Conclusion&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cheers! You&#8217;ve just learned how to design your Extensions in Scratch using JavaScript. I&#8217;m curious how you employ this information to produce your astounding extensions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Happy creating and generating ideas!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Learn Scratch at BrightChamps with its specially designed curriculum that makes learning programming easy for students in Grades 1-12. <\/p>\n\n\n\n<div id=\"cstm_banner_cta\">&nbsp;<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">BrightChamps also teaches a variety of other programs that help kids build a foundation in computer programming through activities, interactive lessons, and other means. <a href=\"https:\/\/brightchamps.com\/\">BrightChamps<\/a> provides<a href=\"https:\/\/brightchamps.com\/blog\/teaching-financial-literacy-for-kids\/\" target=\"_blank\" rel=\"noreferrer noopener\"> financial education for kids<\/a>, equipping them with essential money management knowledge for a successful future<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s a wonderful experience to create projects in Scratch since you may utilize a range of tools and features to make your designing and coding rewarding. While exploring Scratch, you may have noticed the &#8220;Add an extension&#8221; feature. If not, don&#8217;t worry; in this blog, we&#8217;ll look through Extensions in more detail. &nbsp; What are [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":5644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"1080","footnotes":""},"categories":[49],"tags":[68],"class_list":["post-5620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-for-kids","tag-codechamps"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog<\/title>\n<meta name=\"description\" content=\"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog\" \/>\n<meta property=\"og:description\" content=\"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"BrightChamps Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BrightChamps-101266664954230\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-27T17:46:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-03T10:38:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2100\" \/>\n\t<meta property=\"og:image:height\" content=\"1185\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Team BrightChamps\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Team BrightChamps\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/\"},\"author\":{\"name\":\"Team BrightChamps\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#\\\/schema\\\/person\\\/696f52bb580934e5022585ac161e5123\"},\"headline\":\"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]\",\"datePublished\":\"2022-03-27T17:46:20+00:00\",\"dateModified\":\"2024-10-03T10:38:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/\"},\"wordCount\":1148,\"publisher\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png\",\"keywords\":[\"CodeChamps\"],\"articleSection\":[\"Code for Kids Corner\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/\",\"name\":\"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png\",\"datePublished\":\"2022-03-27T17:46:20+00:00\",\"dateModified\":\"2024-10-03T10:38:09+00:00\",\"description\":\"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png\",\"contentUrl\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png\",\"width\":2100,\"height\":1185,\"caption\":\"How To Make Your Own Extension In Scratch Using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/make-scratch-extension-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code for Kids Corner\",\"item\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/code-for-kids\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/\",\"name\":\"BrightChamps Blog\",\"description\":\"BrightChamps Blog, also known as BrightChamps Hub is a go-to resource hub for everything on Coding for kids\",\"publisher\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#organization\",\"name\":\"BrightChamps\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/BrightCHAMPS-logo-new-1.png\",\"contentUrl\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/BrightCHAMPS-logo-new-1.png\",\"width\":417,\"height\":80,\"caption\":\"BrightChamps\"},\"image\":{\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BrightChamps-101266664954230\\\/\",\"https:\\\/\\\/www.instagram.com\\\/brightchamps\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/brightchamps\\\/mycompany\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC_Afe_rMGoK5Bs4nSt8QIzQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/#\\\/schema\\\/person\\\/696f52bb580934e5022585ac161e5123\",\"name\":\"Team BrightChamps\",\"description\":\"We are an army of educators and passionate learners from BrightChamps family, committed to providing free learning resources to kids, parents &amp; students. Learn from Us\",\"url\":\"https:\\\/\\\/brightchamps.com\\\/blog\\\/author\\\/team\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog","description":"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog","og_description":"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.","og_url":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/","og_site_name":"BrightChamps Blog","article_publisher":"https:\/\/www.facebook.com\/BrightChamps-101266664954230\/","article_published_time":"2022-03-27T17:46:20+00:00","article_modified_time":"2024-10-03T10:38:09+00:00","og_image":[{"width":2100,"height":1185,"url":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png","type":"image\/png"}],"author":"Team BrightChamps","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Team BrightChamps","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#article","isPartOf":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/"},"author":{"name":"Team BrightChamps","@id":"https:\/\/brightchamps.com\/blog\/#\/schema\/person\/696f52bb580934e5022585ac161e5123"},"headline":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]","datePublished":"2022-03-27T17:46:20+00:00","dateModified":"2024-10-03T10:38:09+00:00","mainEntityOfPage":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/"},"wordCount":1148,"publisher":{"@id":"https:\/\/brightchamps.com\/blog\/#organization"},"image":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png","keywords":["CodeChamps"],"articleSection":["Code for Kids Corner"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/","url":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/","name":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide] - BrightChamps Blog","isPartOf":{"@id":"https:\/\/brightchamps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png","datePublished":"2022-03-27T17:46:20+00:00","dateModified":"2024-10-03T10:38:09+00:00","description":"Create your own extensions in\u00a0Scratch using\u00a0a JavaScript environment to expand your block palette with fantastic blocks of your choosing.","breadcrumb":{"@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#primaryimage","url":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png","contentUrl":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2022\/03\/How-To-Make-Your-Own-Extension-In-Scratch-Using-JavaScript.png","width":2100,"height":1185,"caption":"How To Make Your Own Extension In Scratch Using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/brightchamps.com\/blog\/make-scratch-extension-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brightchamps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Code for Kids Corner","item":"https:\/\/brightchamps.com\/blog\/code-for-kids\/"},{"@type":"ListItem","position":3,"name":"How To Make Your Own Extensions In Scratch Using JavaScript [2022 Guide]"}]},{"@type":"WebSite","@id":"https:\/\/brightchamps.com\/blog\/#website","url":"https:\/\/brightchamps.com\/blog\/","name":"BrightChamps Blog","description":"BrightChamps Blog, also known as BrightChamps Hub is a go-to resource hub for everything on Coding for kids","publisher":{"@id":"https:\/\/brightchamps.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brightchamps.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/brightchamps.com\/blog\/#organization","name":"BrightChamps","url":"https:\/\/brightchamps.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brightchamps.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2026\/03\/BrightCHAMPS-logo-new-1.png","contentUrl":"https:\/\/brightchamps.com\/blog\/wp-content\/uploads\/2026\/03\/BrightCHAMPS-logo-new-1.png","width":417,"height":80,"caption":"BrightChamps"},"image":{"@id":"https:\/\/brightchamps.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BrightChamps-101266664954230\/","https:\/\/www.instagram.com\/brightchamps\/","https:\/\/www.linkedin.com\/company\/brightchamps\/mycompany\/","https:\/\/www.youtube.com\/channel\/UC_Afe_rMGoK5Bs4nSt8QIzQ"]},{"@type":"Person","@id":"https:\/\/brightchamps.com\/blog\/#\/schema\/person\/696f52bb580934e5022585ac161e5123","name":"Team BrightChamps","description":"We are an army of educators and passionate learners from BrightChamps family, committed to providing free learning resources to kids, parents &amp; students. Learn from Us","url":"https:\/\/brightchamps.com\/blog\/author\/team\/"}]}},"_links":{"self":[{"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/posts\/5620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/comments?post=5620"}],"version-history":[{"count":13,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/posts\/5620\/revisions"}],"predecessor-version":[{"id":32891,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/posts\/5620\/revisions\/32891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/media\/5644"}],"wp:attachment":[{"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/media?parent=5620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/categories?post=5620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brightchamps.com\/blog\/wp-json\/wp\/v2\/tags?post=5620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}