Creating extensions for Scratch 3.0

NitroCipher

Scratchy_Tomato wrote:
Hi guys,

I'm a newbie and interested in making extensions for scratch.
I'm very thankful for all your amazing posts, they are very helpful.

So, I succeeded modding the scratch-gui, scratch-vm and block. It all works fine.
I also added the extension button to add url extensions as Sheep_maker suggested: https://scratch.mit.edu/discuss/topic/277217/?page=6#post-3445574

The only extension that works for me is Sheep_maker's:
https://sheeptester.github.io/javascripts/utilities.js
I am able to upload it from the extension button and also upload it after using the url in extensionId in file index.jsx.

The other extensions from github, and my extensions (after pressing raw) I am not able to see them added to the scratch-gui.
I don't understand why only Sheep_maker's extension is working for me, and the rest isn't.

Thanks!!!

Can you link me the repo with your extensions? I just want to make sure the extension is configured correctly/up to spec. Side note: You won't be able to use the extension over github raw. You will need to enable gh-pages for that repo, and get the corresponding link from that {Like this one 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/discuss/topic/290031/ Basically done!

This is my signature identifier “aWFtbml0cm9jaXBoZXI=”

SimpleScratch

Can you be more specific, step by step?

You said you've made your own mod based on sheep_tester's code and that their extension utilities.js works

So, I'm suggesting that instead of loading from sheep_testers URL - that you make a copy of utilities.js on your computer/server and try loading it that way

Does that work?

Scratchy_Tomato

NitroCipher wrote:
Scratchy_Tomato wrote:
Hi guys,

I'm a newbie and interested in making extensions for scratch.
I'm very thankful for all your amazing posts, they are very helpful.

So, I succeeded modding the scratch-gui, scratch-vm and block. It all works fine.
I also added the extension button to add url extensions as Sheep_maker suggested: https://scratch.mit.edu/discuss/topic/277217/?page=6#post-3445574

The only extension that works for me is Sheep_maker's:
https://sheeptester.github.io/javascripts/utilities.js
I am able to upload it from the extension button and also upload it after using the url in extensionId in file index.jsx.

The other extensions from github, and my extensions (after pressing raw) I am not able to see them added to the scratch-gui.
I don't understand why only Sheep_maker's extension is working for me, and the rest isn't.

Thanks!!!

Can you link me the repo with your extensions? I just want to make sure the extension is configured correctly/up to spec. Side note: You won't be able to use the extension over github raw. You will need to enable gh-pages for that repo, and get the corresponding link from that {Like this one here}

The extension is very simple:
Your text to link here…

Thanks for pointing out about github raw, I will check it out.

Last edited by Scratchy_Tomato (March 26, 2019 17:10:44)

Scratchy_Tomato

Scratchy_Tomato wrote:
NitroCipher wrote:
Scratchy_Tomato wrote:
Hi guys,

I'm a newbie and interested in making extensions for scratch.
I'm very thankful for all your amazing posts, they are very helpful.

So, I succeeded modding the scratch-gui, scratch-vm and block. It all works fine.
I also added the extension button to add url extensions as Sheep_maker suggested: https://scratch.mit.edu/discuss/topic/277217/?page=6#post-3445574

The only extension that works for me is Sheep_maker's:
https://sheeptester.github.io/javascripts/utilities.js
I am able to upload it from the extension button and also upload it after using the url in extensionId in file index.jsx.

The other extensions from github, and my extensions (after pressing raw) I am not able to see them added to the scratch-gui.
I don't understand why only Sheep_maker's extension is working for me, and the rest isn't.

Thanks!!!

Can you link me the repo with your extensions? I just want to make sure the extension is configured correctly/up to spec. Side note: You won't be able to use the extension over github raw. You will need to enable gh-pages for that repo, and get the corresponding link from that {Like this one here}

The extension is very simple:
https://github.com/mijalk/extensions/blob/master/experiment.js

Thanks for pointing out about github raw, I will check it out.

Last edited by Scratchy_Tomato (March 26, 2019 17:12:58)

naddison

Some help for people wanting to develop their own Scratch 3.0 extensions

Here's the best post I've found on How to Develop Your Own Block for Scratch 3.0 This is effectively what I've been doing.

The Scratch 3.0 specification is now out of date and does not work https://github.com/LLK/scratch-vm/wiki/Scratch-3.0-Extensions-Specification

I've got a Dockerfile that includes in my extension as a built-in extension, compiles the Scratch 3.0 react app and copies it into a nginx image. I've deployed it to Heroku and so far so good.
https://github.com/naddison36/crypto-beasts#docker

Last edited by naddison (March 30, 2019 11:29:02)

SimpleScratch

1st link doesn't work - returns 404

Sheep_maker

SimpleScratch wrote:
1st link doesn't work - returns 404

The closing parentheses and full stop got included in the URL; here it is without them:
https://medium.com/@hiroyuki.osaki/how-to-develop-your-own-block-for-scratch-3-0-1b5892026421

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

naddison

SimpleScratch wrote:
1st link doesn't work - returns 404

I copied in Markdown which doesn't work here. I've now fixed it. Thanks

nico47

Can you do a voice recognition extension?

when green flag clicked
forever
say [Thanks]
end

dactacmac

Could you tell me the way to use UDP?

Now I'm trying to make my extension.
I installed scratch-gui,scratch-vm, use “npm start”.
It works well localhost:8601.
And I could appear some test extensions on scratch 3.0 browser.

My question is … How do I set up to use UDP.

var dgram = require ('dgram');

When I add it in the index.js, the test extension disappear on the scratch 3.0 blocks…

NitroCipher

This is an archive of the old post, as I am updating the page to be a real guide

With the upcoming Scratch 3.0, the extension structure has been completely revamped.

What we know:

Extensions are still using javascript

Block are now defined by

           {
                "opcode": "textif",
                "blockType": "reporter",
                "text": "if [bool] then [text1] else [text2]",
                "arguments": {
                    "bool": {
                        "type": "Boolean",
                        "defaultValue": ""
                    },
                    "text1": {
                        "type": "string",
                        "defaultValue": "hello"
                    },
                    "text2": {
                        "type": "string",
                        "defaultValue": "world"
                    }
                }
            },

rather than

['r', 'if %b then %s else %s', 'textif', '', 'hello', 'world'],

Extensions now have built in translation support

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: {
                // ...
            }
        },

You can define where the blocks will appear (IE just the stage or just sprites)

                // 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']
            },

Menus are now defined:

const ColorParam = {
    COLOR: 'color',
    SATURATION: 'saturation',
    BRIGHTNESS: 'brightness',
    TRANSPARENCY: 'transparency'
};

Please help contribute to this thread, check out the github to help deconstruct the new format.
(more updates will be posted later)

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/discuss/topic/290031/ Basically done!

This is my signature identifier “aWFtbml0cm9jaXBoZXI=”

smartnani

Ok, this is really a great thread for understanding the state of the art of extensions in Scratch 3. Thank you everybody for sharing your knowledge.
I'm looking for a small clarifications:
to my understanding if I'm loading an extension from URL (as in @ solution) I'll be able to load only one JS file. So there is no option to load additional files from within the extension. Is that correct?

My regards
Virgilio

Sheep_maker

smartnani wrote:
Ok, this is really a great thread for understanding the state of the art of extensions in Scratch 3. Thank you everybody for sharing your knowledge.
I'm looking for a small clarifications:
to my understanding if I'm loading an extension from URL (as in @ solution) I'll be able to load only one JS file. So there is no option to load additional files from within the extension. Is that correct?

My regards
Virgilio

My mod only loads one extension from the URL to the mod (in the query string), but you can load more custom extensions in the extensions library; it might also be possible that you could register multiple different extensions with the same script, and you could use importScripts to load scripts from other files.

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

smartnani

Sheep_maker wrote:
My mod only loads one extension from the URL to the mod (in the query string), but you can load more custom extensions in the extensions library; it might also be possible that you could register multiple different extensions with the same script, and you could use importScripts to load scripts from other files.

I'm trying to use importScript. Long story short: I want to enable mqtt communication and ther is a library (PAHO) which is full browser, not a nodejs component. And I started from your extension as a template. Now you find mine at (https://virivigio.github.io/MqttUtilities.js) and, when registering, it tries to load the PAHO library:

console.log(“Before loading PAHO source”);

try {
importScripts('https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js');
console.log(“PAHO source loaded”);
} catch (e) {
console.log(“PAHO source loading returned an error: ”);
console.log(e);
}

Scratch.extensions.register(new MqttUtilities());
console.log(“End of MqttUtilities”);

Now the problem is that, when loaded, I get
(https://virivigio.github.io/Extension%20loading%20logs.png)

which is very bad omen : an exception with nothing inside :-) (I'm not a javascript guru, you already guessed that, but it's weird anyway)

of course running a project
(https://virivigio.github.io/Scratch%20project.png)
leads nowhere
(https://virivigio.github.io/Error%20when%20running%20project.png)
any suggestion?

Virgilio

Sheep_maker

It seems the https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js relies on the `window` object, which doesn't exist in web workers (they use `self`). Defining it globally should work.

try {
    self.window = self; // add this line
    importScripts('https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js');

- Sheep_maker This is a kumquat-free signature. :P
This is my signature. It appears below all my posts. Discuss it on my profile, not the forums. Here's how to make your own.
.postsignature { overflow: auto; } .scratchblocks { overflow-x: auto; overflow-y: hidden; }

smartnani

Sheep_maker wrote:
It seems the https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js relies on the `window` object, which doesn't exist in web workers (they use `self`). Defining it globally should work.
try {
    self.window = self; // add this line
    importScripts('https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js');

Cool, actually now everything moved on. Still problems with GlobalStorage but I'll work those out.
Thank you a lot for your help

Virgilio

wHEresMYm0n3yd4d

Who wants JavaScript to be in Scratch? Me, probably.

var x = 5
var y = 5
var total = x + y
document.write(total)

Last edited by wHEresMYm0n3yd4d (April 22, 2019 01:41:07)

from kfc import chicken

SimpleScratch

If you want to intersperse Javascript code and blocks then have a look at Snap

test_coil123

Is it posible to add my controller in scratch 3?

SimpleScratch

The answer is probably no at the moment but what controller is it?

Discuss Scratch