- Create your account
- Setup your development environment
- Create your extension
- Publish your extension
If you already have a GitHub account, you can skip to the next step.
Go to https://github.com
Click on Sign up
Create your account
Note that your GitHub username will be part of the web address for your modified Scratch fork, so you may want to keep that in mind when you choose your username.
When you get to the Welcome screen, you can fill in the personalization survey if you wish, but it is okay to click on the Skip personalization link at the bottom of the screen if you prefer.
You should now have a GitHub account, ready to create your Scratch repository.
Go to https://github.com/dalelane/scratch-extension-development
If you aren't already logged into GitHub, you should log in now.
Click on Use this template and then choose Create a new repository
Give your new repository a name.
Note that the repository name will be part of the web address for your modified Scratch fork, so you may want to keep that in mind when you choose a name.
Your repository is ready for use.
Click on Code -> Codespaces -> Create codespace
It can take a minute or two to set up your codespace.
Your codespace is ready for use.
In the terminal at the bottom of the window, run:
./0-setup.sh
This should be very quick.
You only need to do this once (but it is safe if you run it again).
The instructions here will show you how to write an extension that can lookup the title of a book from the ISBN number, using an online API.
The instructions will go through the template JavaScript one section at a time.
Open the your-scratch-extension/index.js file.
Edit the getInfo() function to provide a description of your first block.
getInfo () {
return {
// unique ID for your extension
id: 'yourScratchExtension',
// name displayed in the Scratch UI
name: 'Demo',
// colours to use for your extension blocks
color1: '#000099',
color2: '#660066',
// your Scratch blocks
blocks: [
{
// function where your code logic lives
opcode: 'myFirstBlock',
// type of block
blockType: BlockType.REPORTER,
// label to display on the block
text: 'Title for ISBN book [BOOK_NUMBER]',
// true if this block should end a stack
terminal: false,
// arguments used in the block
arguments: {
BOOK_NUMBER: {
defaultValue: 1718500564,
// type/shape of the parameter
type: ArgumentType.NUMBER
}
}
}
]
};
}
Edit the myFirstBlock function implementation to look up book info using the OpenLibrary API.
myFirstBlock ({ BOOK_NUMBER }) {
return fetch('https://openlibrary.org/isbn/' + BOOK_NUMBER + '.json')
.then((response) => {
if (response.ok) {
return response.json();
}
else {
return { title: 'Unknown' };
}
})
.then((bookinfo) => {
return bookinfo.title;
});
}
Your code is now ready to test.
In the terminal at the bottom of the window, run:
./2-build.sh
This can take a minute to run. Wait for this to complete.
In the terminal at the bottom of the window, run:
./3-run-private.sh
A pop-up should appear in the bottom-right with a button to open a private window with your modified version of Scratch.
If it doesn't appear, or you accidentally dismiss it, you can get the link from the Open in browser button on the Ports tab.
Either way, click on Open in browser.
This is a private copy of Scratch that only you can access. You can use this to test your new extension.
Click on the Extensions button.
You should see your extension added to the menu. Click on it.
Make a simple Scratch project using your extension.
If you need to make a change, stop your Scratch test by pressing Control-C in the terminal.
Make your code changes.
Then re-build and test again by typing:
./2-build.sh
./3-run-private.shOnce you have finished, stop your Scratch test by pressing Control-C in the terminal.
The instructions here will show you how to write an extension that can estimate the number of syllables in some English text, using a JavaScript module.
The instructions will go through the template JavaScript one section at a time.
Select a module from https://www.npmjs.com - for this example, I'm using syllable.
Run ./1-add-dependency.sh with the name of the module you've selected.
./1-add-dependency.sh syllable
As long as you have spelled it exactly correctly, it will update the dependencies for your private Scratch build to include the new module.
If you want to add multiple dependencies, you can run this script multiple times. Running the script with the name of a dependency you have already added is safe, but not necessary.
Open the your-scratch-extension/index.js file again.
Edit the constructor function to load the module.
constructor (runtime) {
import('syllable')
.then((syllableModule) => {
this.syllable = syllableModule.syllable;
});
}
Edit the getInfo() function to add a second block, after the block we defined before.
The complete getInfo() function will now contain:
getInfo () {
return {
// unique ID for your extension
id: 'yourScratchExtension',
// name displayed in the Scratch UI
name: 'Demo',
// colours to use for your extension blocks
color1: '#000099',
color2: '#660066',
// your Scratch blocks
blocks: [
{
// function where your code logic lives
opcode: 'myFirstBlock',
// type of block
blockType: BlockType.REPORTER,
// label to display on the block
text: 'Title for ISBN book [BOOK_NUMBER]',
// true if this block should end a stack
terminal: false,
// arguments used in the block
arguments: {
BOOK_NUMBER: {
defaultValue: 1718500564,
// type/shape of the parameter
type: ArgumentType.NUMBER
}
}
},
{
// function where your code logic lives
opcode: 'mySecondBlock',
// type of block
blockType: BlockType.REPORTER,
// label to display on the block
text: 'Syllables in [MY_TEXT]',
// true if this block should end a stack
terminal: false,
// arguments used in the block
arguments: {
MY_TEXT: {
defaultValue: 'Hello World',
// type/shape of the parameter
type: ArgumentType.STRING
}
}
}
]
};
}
Add a mySecondBlock function implementation to return a count of syllables using the loaded npm module.
mySecondBlock ({ MY_TEXT }) {
return this.syllable(MY_TEXT);
}
Your code is now ready to test.
As before, build your code:
./2-build.sh
Then run a private instance of Scratch to test it.
./3-run-private.sh
When prompted, click on the Open in browser button to open your private Scratch instance.
You can make a simple Scratch script to verify that your new block is working.
When you've finished your test, close the Scratch window, and then stop the test instance by pressing Control-C in the Terminal.
The extensions menu includes images to represent each extension. Each extension has a large background image, and a small inset icon.
Placeholder images are provided for your extension.
If you're happy with these, you can skip to the next step.
If you want to customize these, you can edit the image files your-extension-background.png and your-extension-icon.png to better represent your Scratch extension.
I recommend keeping the dimensions of the images the same as they currently are to best fit in the menu.
Note that you will need to rebuild your extension after making changes to these files.
./2-build.shAnd to see the new menu in action you will want to start your private test instance again.
./3-run-private.shBefore proceeding to the next step, make sure you have stopped your private test instance of Scratch by pressing Control-C in the terminal.
In the terminal at the bottom of the window, run:
./4-publish.sh
This can take a minute to run.
Your Scratch fork will be live and publicly accessible at:
https://<YOUR-GITHUB-USERNAME>.github.io/<YOUR-REPOSITORY-NAME>/scratch
Note that this can sometimes take a minute to go live, so if the link doesn't work, it's worth waiting a minute and trying again. (But if it still doesn't work, check you have got the URL correct!)
You can give this URL to your students.
You only need your codespace running while you are developing your extension. Once it's published, you must stop your codespace.
On your repository page, click on Code -> Codespaces -> Stop codespace.
Your published Scratch instance, with your extensions, will still be accessible after you do this.