Introduction: How to Install and Use ScratchExt: Javascript Scratch Extensions

Picture of How to Install and Use ScratchExt: Javascript Scratch Extensions

ScratchExt is set of JavaScript Extensions for Scratch, a programming environment and community for people of all ages. It is a project developed by GrannyCookies, Yoda3D and thistleeverfreen.


This project is currently still in development, so features are still being added, removed, and/or changed. Please keep this in mind while working with ScratchExt. This Instructable will be updated accordingly when significant changes are made.

System Requirements:

  • Pretty much any OS: Windows, Mac, or Linux
  • Adobe Flash Player
  • A JavaScript Enabled browser. I'd recommend Google Chrome, though Firefox or Safari should also work.


The Official website of ScratchExt.
Watch and/or download the code on floobits!

Warnings:
Though JavaScript is relatively safe as it cannot directly access your computer, unapproved external libraries can run scripts that can harm your privacy. We personally strive to safely extend the possibilities of Scratch by closely adhering to the Scratch Terms of Use and Community Guidelines, as well as warning the user before preforming potentially undesired operations. However, other imported Scratch extensions may not necessarily follow these guidelines. As expressed in the GNU General Public License v3, it is the end user who must assume full responsibility for any damages that may arise from the use of our software unless otherwise required by law or agreed upon in writing. Please see the official license for more details.

Step 1: Installing the Installer

Picture of Installing the Installer

Yes, you will need to install something to install something else.
However, this is the one and only complicated step, so don't let that scare you.

  1. Go to http://stefanbates.com/bookmarklet.html
  2. Click and drag the link to your bookmarks bar.
  3. Thats it!

This bookmarklet will run a bit of javascript to install the "– Import –" extension.
However the beauty of this extension is that it will allow you to install other extensions!
Everything else is self updating, so you shouldn't need to do much more once you have the bookmark.

If you use google Chrome, you can also install this Chrome extension
This will directly insert the installer into the Scratch webpages when you use Scratch.

Please note that these changes are not persistent. For each time you view a project that implements ScratchExt, you will need to click the bookmarklet AFTER a project is fully loaded, followed by the green flag. Consider using TamperMonkey or other browser plugin to run scripts automatically.

Step 2: Using the 'Import' Blocks

Picture of Using the 'Import' Blocks

To run a project that implements ScratchExt, click the bookmark after the project is loaded, then click the green flag again. A prompt should appear to confirm if you want to install additional extensions.

To create a project using ScratchExt, first make sure that your project is shared, otherwise Scratch will not let you share the project once you include new blocks. Then, click the bookmark while you are in the Scratch editor. The new blocks will be added to the "More Blocks" section. Use the "import library" and the "install library" blocks to get even more blocks!

Documentation for these essential blocks is provided below.
Please see the official reference (which is also still a work in progress) for more info.

– Import – (The important blocks):

import library [menu]

Prepares an official extension for installation with the name selected from the menu.
This block will only "mark" a library for installation and will not do anything until an "install libraries" block is used.

import library [string]

–A work in progress–
Prepares an unofficial extension from a link for installation.
This block will only "mark" a library for installation and will not do anything until an "install libraries" block is used.

WARNING: Unofficial extensions can do anything from forced ponification to completely hijacking your web browser. It is not recommended to use this block unless you are fully aware of an extension's capabilities; i.e. you developed an extension for yourself.

install libraries

Installs all libraries specified by previous "import library" blocks. Should be called after all desired libraries are marked for installation.

install all libraries

Installs all official libraries in a single block. Useful to quickly install everything, but will clutter the block selection and/or possibly slow down your project

Step 3: Writing Your Own Extensions

For those who want to take this a step further, you can create your own blocks.
This will require an understanding of JavaScript, as well a a way to publish JS code on the internet, such as a greasyfork. For testing purposes, you may also run your code inside your browser's JavaScript console or create your own bookmarklet.

Please see the official Scratch Extensions Document for more information.

Example Code:

Hello World:

function installHelloWorld() {
    (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: 'Installed'};
        };
        
        var descriptor = {
            blocks: [
                [' ', 'hello world', 'helloWorld']
            ]
        };
        
        //The Hello world function
        ext.helloWorld = function(){
        	alert('Hello World!')
        };
        
        ScratchExtensions.register('Hello World', descriptor, ext);
    })({});
}<br>installHelloWorld();

Basic block types:

function installBasicBlocks() {
    (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: 'Installed'};
        };
        
		var descriptor = {
			blocks: [
				[' ', 'a basic method', 'foo'],
				['h', 'a hat block', 'hatMethod'],
				['r', 'a reporter', 'reporterMethod'],
				['b', 'a boolean reporter', 'bReporterMethod'],
				['-'],	//Separator
				[' ', 'string %s number %n color %c', 'bar', 'petrichor', '42', '16775399']
			]
		};
        
		//Alert method
		ext.foo = function(){
			alert('Foo');
		};
		
		//The Hat method (runs code when this returns true)
		ext.hatMethod = function(){
			return true;
		};
		
		//Reporter
		ext.reporterMethod = function(){
			return 42;
		};
		
		//Boolean Reporter
		ext.bReporterMethod = function(){
			return true;
		};
		
		//Method with arguments
		ext.bar = function(arg1, arg2, arg3){
			alert('Received: ' + arg1 + ' ' + arg2 + ' ' + arg3);
		};
		
        ScratchExtensions.register('Basic Blocks', descriptor, ext);
    })({});
}
installBasicBlocks();

Comments

AlexB4 made it! (author)2014-10-15

Here's an example of ScratchExt in action:

JoshyRobot (author)AlexB42015-02-18

How do I set it up?

About This Instructable

3,476views

3favorites

Bio: "I am a programmer, not an artist."
More by thistleeverfreen:How to Install and Use ScratchExt: Javascript Scratch Extensions
Add instructable to: