< User:Rumanti

Revision as of 08:47, 8 August 2015 by Rumanti (talk | contribs) (→‎Developing Scratch Extensions: w3schools made me learned the hard way, hopefully no one else falls into the w3 trap and feel the pain of relearning good examples.)

Developing Scratch Extensions

Scratch Extensions adds new functionality for Scratch projects, whether it is new blocks for scripts with difficult workarounds, or solutions to problems that used to be impossible to solve. Ever since ScratchX was released, everyone can learn to develop Scratch extensions. This tutorial is heavily influenced by the Developer Documentation on ScratchX. However, this is not an adaptation.

Before Developing

Before starting to develop, be sure to remember to do these things:

Required Experience

Before making extensions, the developer must have a good knowledge of JavaScript, importantly multidimensional Arrays, Objects, and Functions, (although these isn't the only required knowledge). You can learn JavaScript using the JavaScript track on Codecademy. It is very recommended to finish that track or similar courses first. However, this is not extremely necessary, as many had learned from experience.

The most important thing is that the developer must understand how their extension is going to work and all the code and algorithm to make it happen. For example, if the developer wants the extension to add the ability to upload files, the developer must first know how to upload files using JavaScript.

Efficiency is important, otherwise extensions may lag or take unnecessary time.

Other than Codecademy, Mozilla Developer Network and Khan Academy also offers JavaScript courses. Khan Academy is more friendly for beginners and demonstrates good examples a lot, Codecademy is rather advanced and is targeted for the dedicated, and Mozilla Developer Network is quite technical.

W3Schools IS NOT recommended, as it can be misleading for beginners and demonstrates bad examples.

Planning the extension

Before starting, carefully plan out your extension and maybe brainstorm. Plan out how the extension should work, what features it should have, its name, and other necessary information. Some quick notes on API documentations, or a sketch of the blocks will be surprisingly helpful. Keep your plan handy when coding the extension, so that you can focus on creating the extension, not distracted by a lack of ideas nor confused.

Set up GitHub Pages

The Scratch Team (or more specifically, the ScratchX Team) encourages developers to host their extensions using GitHub Pages, thus using the github.io domain. It is known that some extensions hosted outside github.io work[1][2], however, this is discouraged.

  1. Set up GitHub: If you already have a GitHub account, skip this. Register for an account at GitHub. An offline Git client is not necessary for developing extensions- all the steps necessary could be done online.
  2. Set up the repository: Create a new repository called (YOUR GITHUB USERNAME).github.io. Make sure to get the username right, because it wouldn't work otherwise.
  3. You're done! Now, continue and set up crossdomain.xml.

Set up crossdomain.xml

A file named crossdomain.xml is needed in your repository in order for ScratchX to load your extensions and sample projects from your GitHub Page.

This security file lets Flash know that it is allowed to load resources from your site. It will grant Flash access to files on your public repositories, but will not grant access to any private repositories. To learn more about crossdomain.xml, see this article on Adobe Developer Connection.

Create a new file named crossdomain.xml inside your github.io repository, and paste this as-is inside the file:

<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd"> <site-control permitted-cross-domain-policies="master-only"/> <allow-access-from domain="scratchx.org"/> <allow-access-from domain="llk.github.io"/> </cross-domain-policy>

Save the file. You're now done setting up crossdomain.xml, continue to coding the extension!

Coding the Extension

The extension code's contents is basically only the data about the features, functions on what the blocks do, and ScratchX will do the rest.

Start off by creating a JavaScript (.js) file with this boilerplate code, an Immediately Invoked Function Expression (IIFE).

(function(ext) {

   // Cleanup function when the extension is unloaded 
   ext._shutdown = function() {};
   // Status reporting code
   // Use this to report missing hardware, plugin or unsupported browser
   ext._getStatus = function() {
       return {status: 2, msg: 'Ready'};
   // Block and block menu descriptions
   var descriptor = {
       blocks: [
   // Register the extension
   ScratchExtensions.register('Sample extension', descriptor, ext);


Sharing Extensions


This tutorial is heavily influenced by the Developer Documentation on ScratchX, however, this is not an adaptation.

Cookies help us deliver our services. By using our services, you agree to our use of cookies.