Discuss Scratch
- Discussion Forums
- » Developing Scratch Extensions
- » Creating extensions for Scratch 3.0
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
Creating extensions for Scratch 3.0
There is now official documentation regarding extensions!, but feel free to use this post to get you started
You'll want to start off by creating your extension's class, and register the extension - In my case, this would be ‘NitroBlock’
class NitroBlock { //In both instances, NitroBlock will be the name in both instances } Scratch.extensions.register(new NitroBlock());
Next, we will be constructing block and menu definitions - We will continue to use ‘NitroBlock’ through this tutorial
getInfo() { return { "id": "NitroBlock", "name": "NitroBlock", "blocks": [ ], "menus": { //we will get back to this in a later tutorial } }; }
We are going to take a look at how blocks are constructed
For those of you that are familiar with extensions for Scratch 2.0, we will start off with this: - If not, you can ignore this
['r', 'letters %n through %n of %s', 'substringy', '2', '5', 'hello world'] //breakdown below: ['r' = block type, 'letters %n through %n of %s' = block text, 'substringy' = block ID/opcode]
{ "opcode": "substringy", //This will be the ID code for the block "blockType": "reporter", //This can either be Boolean, reporter, command, or hat "text": "letters [num1] through [num2] of [string]", //This is the block text, and how it will display in the Scratch interface "arguments": { //Arguments are the input fields in the block. In the block text, place arguments in square brackets with the corresponding ID "num1": { //This is the ID for your argument "type": "number", //This can be either Boolean, number, or string "defaultValue": "2" //This is the default text that will appear in the input field, you can leave this blank if you wish }, "num2": { "type": "number", "defaultValue": "5" }, "string": { "type": "string", "defaultValue": "hello world" } } },
We will put this newly constructed code into the blocks object above - My code will now look like this
class NitroBlock { getInfo() { return { "id": "NitroBlock", "name": "NitroBlock", "blocks": [{ "opcode": "substringy", "blockType": "reporter", "text": "letters [num1] through [num2] of [string]", "arguments": { "num1": { "type": "number", "defaultValue": "2" }, "num2": { "type": "number", "defaultValue": "5" }, "string": { "type": "string", "defaultValue": "hello world" } } }, }], "menus": { //we will get back to this in a later tutorial } }; } Scratch.extensions.register(new NitroBlock());
Next we come to the most important part, the code that actually runs the blocks! - I am keeping this short and simple for tutorial's sake.
//Make sure you name this function with with the proper ID for the block you defined above substringy({num1, num2, string}) { //these names will match the argument names you used earlier, and will be used as the variables in your code //this code can be anything you want return string.substring(num1 - 1, num2); //for reporters and Boolean blocks the important thing is to use 'return' to get the value back into Scratch. }
Place this new code below your getInfo() function
class NitroBlock { getInfo() { return { "id": "NitroBlock", "name": "NitroBlock", "blocks": [{ "opcode": "substringy", "blockType": "reporter", "text": "letters [num1] through [num2] of [string]", "arguments": { "num1": { "type": "number", "defaultValue": "2" }, "num2": { "type": "number", "defaultValue": "5" }, "string": { "type": "string", "defaultValue": "hello world" } } }, }], "menus": { //we will get back to this in a later tutorial } }; substringy({num1, num2, string}) { return string.substring(num1 - 1, num2); }; }
Save this code to your computer as a js file, in my case it is NitroBlock_3.js
Congratz, you now have your extension code created!!
You can use this tutorial to add it your own personal copy of scratch
Or, you can host the extension with gh-pages, and go here to test it (provide your own url, don't use mine)
Here is the archived copy of my original post
Last edited by NitroCipher (Nov. 20, 2020 00:39:04)
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- savaka
- Scratcher
1000+ posts
Creating extensions for Scratch 3.0
Looks a lot easier to understand
Last edited by savaka (Sept. 20, 2017 19:10:14)
- Abe_Lincoln
- Scratcher
41 posts
Creating extensions for Scratch 3.0
Yes, but a lot longer than a Looks a lot easier to understandsimple line of JSON. It just means all extensions will have to be updated. Maybe I should build a converter that does that.
- JGames101
- Scratcher
100+ posts
Creating extensions for Scratch 3.0
Ooh! Translation support!
This thing is interesting - it lets you filter where your block appears (stage, sprite, both), but in the example shows another extension.
translation_map: { de: { 'extensionName': 'Einige Blöcke', 'myReporter': 'Buchstabe [LETTER_NUM] von [TEXT]', 'myReporter.TEXT_default': 'Text', 'menuA_item1': 'Artikel eins', // Dynamic menus can be translated too 'menuB_example': 'Beispiel', // This message contains ICU placeholders (see `myReporter()` below) 'myReporter.result': 'Buchstabe {LETTER_NUM} von {TEXT} ist {LETTER}.' }, it: { // ... } },
// Optional: list of target types for which this block should appear. // If absent, assume it applies to all builtin targets -- that is: // ['sprite', 'stage'] filter: ['someBlocks.wedo2', 'sprite', 'stage'] },
Last edited by JGames101 (Oct. 23, 2017 01:25:09)
- JGames101
- Scratcher
100+ posts
Creating extensions for Scratch 3.0
Here's the menu stuff I found: Hi NitroCipher,
I'm playing with scratch 3 and found this post. Can you tell me where I can find more information to make a Command button that in the arguments values come from a menu or array.
Samples:point towards [ v]
Thanks,
Allan Moreira
// Optional: define extension-specific menus here. menus: { // Required: an identifier for this menu, unique within this extension. menuA: [ // Static menu: list items which should appear in the menu. { // Required: the value of the menu item when it is chosen. value: 'itemId1', // Optional: the human-readable label for this item. // Use `value` as the text if this is absent. text: 'Item One' }, // The simplest form of a list item is a string which will be used as // both value and text. 'itemId2' ], // Dynamic menu: a string naming a function which returns an array as above. // Called each time the menu is opened. menuB: 'getItemsForMenuB' },
- AmazingMech2418
- Scratcher
1000+ posts
Creating extensions for Scratch 3.0
I actually found stuff like this on the Scratch 3.0 source code extension example. How do you add an extension to a project in Scratch 3?
I'm a programmer, ethical hacker, and space nerd!
Last edited by Neil Armstrong (July 20, 1969 20:17:00)
sam
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
I actually found stuff like this on the Scratch 3.0 source code extension example. How do you add an extension to a project in Scratch 3?
I have yet to figure out how to do it any other way than putting the code into a fork of scratch 3.0 on github
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- JGames101
- Scratcher
100+ posts
Creating extensions for Scratch 3.0
I am working on porting my extensions to Scratch 3 with the new format. Do you know where the actual used extension files are stored? Not the examples, but where the actual extension file is?
- PullJosh
- Scratcher
1000+ posts
Creating extensions for Scratch 3.0
Not I am working on porting my extensions to Scratch 3 with the new format. Do you know where the actual used extension files are stored? Not the examples, but where the actual extension file is?entirely sure what you're tying to ask, but this might be of interest: https://github.com/LLK/scratch-vm/tree/develop/src/extensions
- JGames101-Tutorials
- Scratcher
70 posts
Creating extensions for Scratch 3.0
That's exactly what I was looking for, thanksNot I am working on porting my extensions to Scratch 3 with the new format. Do you know where the actual used extension files are stored? Not the examples, but where the actual extension file is?entirely sure what you're tying to ask, but this might be of interest: https://github.com/LLK/scratch-vm/tree/develop/src/extensions
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
Thx for the sticky!
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- JGames101
- Scratcher
100+ posts
Creating extensions for Scratch 3.0
I have managed to port one of my extension to Scratch 3 (the blocks don't completely work yet, but I'm working on that, but they do load)
I followed the instructions to download the latest version of the scratch gui to work on it. I then copied the example extension, and rewrote my notifications extension in that format. Then, I uploaded it to github. I found the file that controls the list of extensions in the extensions button, and added mine. I set the URL to my github file, and it loaded in, and as you can see, the blocks appeared.
Official instructions for developing Scratch 3 extensions will be coming sometime between now and August (Scratch 3 release), according to The FAQ.
Update: I have everything working, except asking for notification permission. For some reason, that doesn't work.
Code can be found at https://github.com/JGames101/scratch-extensions/blob/master/notifications/3.js
To test your extension, add it to the index.js file located here: https://github.com/LLK/scratch-gui/tree/develop/src/lib/libraries/extensions
You can use actual URLs.
Then, if you open the page, you should see an extra Extension under the extensions popup thing. Clicking it will add your extension to the project, and you can test it.
So… testing your extensions currently requires downloading the source for scratch 3's GUI. No parts, like the VM or Renderer, are needed to be changed to test extensions, despite where default scratch extensions are stored (I went through the process of forking the VM for nothing…)
I will be making some simple demo extensions, that you'll be able to see below, and then I'll publish a fork of Scratch-GUI with some sample extensions.
I followed the instructions to download the latest version of the scratch gui to work on it. I then copied the example extension, and rewrote my notifications extension in that format. Then, I uploaded it to github. I found the file that controls the list of extensions in the extensions button, and added mine. I set the URL to my github file, and it loaded in, and as you can see, the blocks appeared.
Official instructions for developing Scratch 3 extensions will be coming sometime between now and August (Scratch 3 release), according to The FAQ.
Update: I have everything working, except asking for notification permission. For some reason, that doesn't work.
Code can be found at https://github.com/JGames101/scratch-extensions/blob/master/notifications/3.js
To test your extension, add it to the index.js file located here: https://github.com/LLK/scratch-gui/tree/develop/src/lib/libraries/extensions
You can use actual URLs.
Then, if you open the page, you should see an extra Extension under the extensions popup thing. Clicking it will add your extension to the project, and you can test it.
So… testing your extensions currently requires downloading the source for scratch 3's GUI. No parts, like the VM or Renderer, are needed to be changed to test extensions, despite where default scratch extensions are stored (I went through the process of forking the VM for nothing…)
I will be making some simple demo extensions, that you'll be able to see below, and then I'll publish a fork of Scratch-GUI with some sample extensions.
Last edited by JGames101 (Jan. 13, 2018 22:10:54)
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
I have managed to port one of my extension to Scratch 3 (the blocks don't completely work yet, but I'm working on that, but they do load)
I followed the instructions to download the latest version of the scratch gui to work on it. I then copied the example extension, and rewrote my notifications extension in that format. Then, I uploaded it to github. I found the file that controls the list of extensions in the extensions button, and added mine. I set the URL to my github file, and it loaded in, and as you can see, the blocks appeared.
Official instructions for developing Scratch 3 extensions will be coming sometime between now and August (Scratch 3 release), according to The FAQ.
Update: I have everything working, except asking for notification permission. For some reason, that doesn't work.
Code can be found at https://github.com/JGames101/scratch-extensions/blob/master/notifications/3.js
To test your extension, add it to the index.js file located here: https://github.com/LLK/scratch-gui/tree/develop/src/lib/libraries/extensions
You can use actual URLs.
Then, if you open the page, you should see an extra Extension under the extensions popup thing. Clicking it will add your extension to the project, and you can test it.
So… testing your extensions currently requires downloading the source for scratch 3's GUI. No parts, like the VM or Renderer, are needed to be changed to test extensions, despite where default scratch extensions are stored (I went through the process of forking the VM for nothing…)
I will be making some simple demo extensions, that you'll be able to see below, and then I'll publish a fork of Scratch-GUI with some sample extensions.
Cool, which format do you find easier to use? Personally I like the old format, mainly because I am more used to it, and I haven't played with the new one much.
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- JGames101
- Scratcher
100+ posts
Creating extensions for Scratch 3.0
I think that this one will be easier for people who have never made extensions before, but I think I personally prefer the older one. I don't mind the new one, though, and it has some nice new features.I have managed to port one of my extension to Scratch 3 (the blocks don't completely work yet, but I'm working on that, but they do load)
I followed the instructions to download the latest version of the scratch gui to work on it. I then copied the example extension, and rewrote my notifications extension in that format. Then, I uploaded it to github. I found the file that controls the list of extensions in the extensions button, and added mine. I set the URL to my github file, and it loaded in, and as you can see, the blocks appeared.
Official instructions for developing Scratch 3 extensions will be coming sometime between now and August (Scratch 3 release), according to The FAQ.
Update: I have everything working, except asking for notification permission. For some reason, that doesn't work.
Code can be found at https://github.com/JGames101/scratch-extensions/blob/master/notifications/3.js
To test your extension, add it to the index.js file located here: https://github.com/LLK/scratch-gui/tree/develop/src/lib/libraries/extensions
You can use actual URLs.
Then, if you open the page, you should see an extra Extension under the extensions popup thing. Clicking it will add your extension to the project, and you can test it.
So… testing your extensions currently requires downloading the source for scratch 3's GUI. No parts, like the VM or Renderer, are needed to be changed to test extensions, despite where default scratch extensions are stored (I went through the process of forking the VM for nothing…)
I will be making some simple demo extensions, that you'll be able to see below, and then I'll publish a fork of Scratch-GUI with some sample extensions.
Cool, which format do you find easier to use? Personally I like the old format, mainly because I am more used to it, and I haven't played with the new one much.
- edbotinschools
- Scratcher
3 posts
Creating extensions for Scratch 3.0
Hi.
I currently have an HTTP extension in Scratch 2. Any ideas how I can convert this to Scratch 3??
Thanks.
C
I currently have an HTTP extension in Scratch 2. Any ideas how I can convert this to Scratch 3??
Thanks.
C
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
Hi.
I currently have an HTTP extension in Scratch 2. Any ideas how I can convert this to Scratch 3??
Thanks.
C
Hi! Can you put the extension up on github? I'd be happy to take a look at it!
(I am not entirely familiar with HTTP extensions, I mainly focus on javascript)
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- CoolGamesNet
- Scratcher
24 posts
Creating extensions for Scratch 3.0
NitroCipher,
I am not the originator but I just started with the Roland Go:Keys 61 extension added to Ver.1.21 firmware.
https://rolandcom.github.io/gokeys-scratch-extension/res/gokeys_block.jpg
https://www.roland.com/us/products/gokeys_go-61k/downloads/
and
https://rolandcom.github.io/gokeys-scratch-extension/
I am https://github.com/CoolGames or here as Developer at CoolGames dot net
Please help as I am using Ubuntu Studio 17.10 Linux and have the offline editor localhost working as much I can
with out Node.JS or NPM skills.
I would like to test the existing and rewritten extension and communicate with Roland for this effort.
Lee T. Davy
Retired and still working for our children's future !
I am not the originator but I just started with the Roland Go:Keys 61 extension added to Ver.1.21 firmware.
https://rolandcom.github.io/gokeys-scratch-extension/res/gokeys_block.jpg
https://www.roland.com/us/products/gokeys_go-61k/downloads/
and
https://rolandcom.github.io/gokeys-scratch-extension/
I am https://github.com/CoolGames or here as Developer at CoolGames dot net
Please help as I am using Ubuntu Studio 17.10 Linux and have the offline editor localhost working as much I can
with out Node.JS or NPM skills.
I would like to test the existing and rewritten extension and communicate with Roland for this effort.
Lee T. Davy
Retired and still working for our children's future !
New to ScratchX first in January 2018 and now in April 2018 watching for Scratch 3.0 offline editor release.
Want to do MIDI music on Roland Go Keys 61k currently in ScratchX.
- discoverypark
- Scratcher
30 posts
Creating extensions for Scratch 3.0
How about if you could make your own extensions? (in scratch 3.0)
Last edited by discoverypark (March 15, 2018 20:48:34)
- NitroCipher
- Scratcher
500+ posts
Creating extensions for Scratch 3.0
How about if you could make your own extensions? (in scratch 3.0)
You will have to look at the existing extensions and try to decipher them. Posts on this topic may help you in your journey. You might want to look at @JGames101's posts here
I hope my post helped you in some way! Post count: 500+
Current project: [s3Blocks: scratchblocks rewritten for Scratch 3.0] ::#4b4a60 //https://scratch-mit-edu.ezproxy.canberra.edu.au/discuss/topic/290031/ Basically done!This is my signature identifier “aWFtbml0cm9jaXBoZXI=”
- Shiul93
- New Scratcher
1 post
Creating extensions for Scratch 3.0
Hello!
I'm currently working on porting a ScratchX extension to Scratch 3 and I'm having some issues.
This extension uses websockets to connect to an smartphone running an app, but I don't know how to import the websocket library in the extension, I keep getting “object not clonable” errors.
Did anyone here implement websockets on a Scratch3 extension succesfully?
I'm currently working on porting a ScratchX extension to Scratch 3 and I'm having some issues.
This extension uses websockets to connect to an smartphone running an app, but I don't know how to import the websocket library in the extension, I keep getting “object not clonable” errors.
Did anyone here implement websockets on a Scratch3 extension succesfully?
- Discussion Forums
- » Developing Scratch Extensions
- » Creating extensions for Scratch 3.0