Creating extensions for Scratch 3.0

LegoRobin6

ScratchFoxBot wrote:
Sheep_maker wrote:
Very simple!
Know JavaScript
Read this
See these
Get scratch-vm
Add your extension the extensions folder I linked to in #3
It's that easy!

“Easy”

I know a lot a Javascript and have done “full-stack engineering” but this Scratch 3.0 extension stuff is still way above my head.
I'm trying to make a Speech-To-Text extension (since the ST never finished theirs) and the actual JS is very easy to code, but working it into a S3.0 extension is being a pain.

Is there no easier way to run/test/compile extensions than setting up some repository? I don't have any idea of how to test my extension even after I clone the scratch-vm. I've read almost every post in Discussion Forums » Developing Scratch Extensions about making Scratch 3.0 extension but most of them are out-dated, contradicting, and very complex.

Maybe it's because I understand little-to-nothing about Node JS (although I don't see why it's at all necessary)

I wish someone would make a YouTube video/series showing how to make a Scratch 3.0 extension from scratch and run/Test it
i really agreee

Last edited by LegoRobin6 (Jan. 28, 2019 23:34:23)

SimpleScratch

At the moment - all extension work is just experimental

If you set up your own dev, its “easy”

to play around and alter an existing extension (such as text-speech or translate) - I've not tried creating my own from “scratch” but modifying existing works.

On Win10 machine I did this a few days ago and it worked - barring any typos I've made

make a folder called c:\scratch3dev

cd c:\scratch3dev

git clone https://github.com/llk/scratch-gui

git clone https://github.com/llk/scratch-vm

git clone https://github.com/llk/scratch-blocks

cd scratch-vm

npm install

npm link

cd ../scratch-blocks

npm install

cd ../scratch-gui

npm install

npm link scratch-vm scratch-blocks

npm start

Then point browser to

http://localhost:8601

extensions are in scratch-vm/src

These are a variation on instructions at

https://github.com/LLK/scratch-gui/wiki/Getting-Started

Last edited by SimpleScratch (Jan. 29, 2019 12:44:20)

cdjeeklo

Hello,

Sometime ago I worked out an extension and app to allow 2 connected computers to share information. That information was designed in the extension.json file and was set up to make 2 players (one on each computer) to play with each other in a ping pong game.
I have documented the extension in https://github.com/CoderDojoBelgiumEeklo/ScratchProjects-Extensions, but I have no idea where to start to convert it to scratch 3.0.

I originally used cloud variables for the game, but the internet connection was horrible and the game had serious lag, …
https://scratch.mit.edu/projects/284628177/

Is it possible to use or to convert that extension to scratch 3.0?

Thanks in advance,
Marijke Van De Steene (lead coach CoderDojo Eeklo - Belgium)

Last edited by cdjeeklo (Feb. 5, 2019 19:03:42)

LaffytaffyWolf

@discoverypark that would be cool

Last edited by LaffytaffyWolf (Feb. 11, 2019 04:25:31)

Well welcome to my signature! I'm not sure what else to put here so you should probably just leave…
Your still here….. Seriously though leave. I don't get it, why are you still reading
Stop it! Ok fine you win, now leave.
Comm'on you can't blame me for trying
Well since your here could you do me a favor?
Oh very funny now you leave
Great your back… What was I saying? Errmmm…Ummmmmm….Uuuhh….mmmmm… Yeah I can't remember…
Distraction! https://scratch.mit.edu/discuss/youtube/dQw4w9WgXcQ/ Heck, I thought that would work! If I give you a cookie will you leave? Yes? Ok great here https://www.google.com/searchsurl=1&q=cookie&rlz=1CACLSF_enUS869&source=lnms&tbm=isch&sa=X&ved=0ahUKEwih0onMp5LlAhUYFjQIHTT7C28Q_AUIEigB&biw=1366&bih=665&safe=active&ssui=on#imgrc=Jyd5aCTCtZjOFM:
Merry Christmas!

Sheep_maker

I've updated my mod to the latest version of 3.0.
https://sheeptester.github.io/scratch-gui/?url=https://sheeptester.github.io/javascripts/utilities.js

I deleted my old mod so I had to remake the changes, and so now you can't save/load projects using URL-loaded extensions with my mod. oof

However, it seems they've fixed the extensions running the blocks some time ago, so the blocks in the extensions can now be used! Reporters now also get their own watchers (but they don't seem to use the extension's block colours) yay

I made a shallow clone of the Scratch GUI, so I can't commit my changes to Github very easily; instead, I'll just list them here.

src/lib/libraries/extensions/index.jsx, before line 29 I added:

    {
        name: (
            <FormattedMessage
                defaultMessage="Choose an extension"
                description="Name for the custom extension selector"
                id="gui.extension.custom.name"
            />
        ),
        iconURL: customImage,
        insetIconURL: customInsetImage,
        description: (
            <FormattedMessage
                defaultMessage="For developers"
                description="Description for the custom extension selector"
                id="gui.extension.custom.description"
            />
        ),
        featured: true
    },

This adds the “Choose an extension” button to the extensions library; customImage and customInsetImage are the icons, which you can import like so:

import customImage from './custom.png';
import customInsetImage from './custom-small.svg';

src/containers/extension-library.jsx, lines 34-39 were changed to:

let id = item.extensionId;
let url = item.extensionURL ? item.extensionURL : id;
if (!item.disabled && !id) {
    // eslint-disable-next-line no-alert
    url = prompt(this.props.intl.formatMessage(messages.extensionUrl));
    if (url) {
       id = url;
    }
}

This allows custom URLs to actually be used when loading them.

src/lib/vm-manager-hoc.jsx, after line 30 I added:

            if (window.location.search.indexOf('url=') !== -1) {
                const extensionURL = window.location.search.match(/url=(https?:\/\/[\w.\/-]+)/)[1];
                this.props.vm.extensionManager.loadExtensionURL(extensionURL);
            }

This loads the extension from the URL. I'm not sure if this is the best place to put this, but it works

- 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; }

SimpleScratch

and so now you can't save/load projects using URL-loaded extensions with my mod

Its great that your reporter block can now be used inside other blocks but not being able to save and re-load projects (like you before with your .sb3x file format) is a a great loss

Last edited by SimpleScratch (Feb. 20, 2019 14:41:37)

Sheep_maker

SimpleScratch wrote:
and so now you can't save/load projects using URL-loaded extensions with my mod

Its great that your reporter block can now be used inside other blocks but not being able to save and re-load projects (like you before with your .sb3x file format) is a a great loss

Ah, okay. I was wondering if anyone used it. I'll see if I can add that feature back then. Sorry about that!

- 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; }

SimpleScratch

Sheep_maker wrote:
[ I'll see if I can add that feature back then

SimpleScratch

Sheep_maker wrote:
I'll see if I can add that feature back then

Sheep_maker

SimpleScratch wrote:
and so now you can't save/load projects using URL-loaded extensions with my mod

Its great that your reporter block can now be used inside other blocks but not being able to save and re-load projects (like you before with your .sb3x file format) is a a great loss

Okay, so I'm not readding .sb3x support; instead, my mod will continue to output .sb3 projects. However, if you load a project using a custom extension with the extension loaded, it'll work!

When the extension manager loads an extension and gets its ID, it'll also map the ID to the extension (as opposed to only the URL). This is because .sb3 only stores the extension ID, not its source URL, so when the project is loaded again, it can only identify the extension through its ID.

Maybe old .sb3x projects might still work if one changes the file extension to .sb3? (.sb3x projects I believe just have an additional tag with the extension URLs)

- 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; }

SimpleScratch

That's fine - don't need it to be .sbx3 - just need it to be able to load/save

SimpleScratch

Just re-tried it - seems to be working fine

Could you list your changes to get this working like you did above?

Locness

https://github.com/kyleplo/scratch-three-extension-docs/wiki

I don't do stuff on Scratch anymore, sorry

whiskercat52

how i make blocks i discuss

Sheep_maker

whiskercat52 wrote:
how i make blocks i discuss

You could always copy code from an existing extension, find patterns, and change it to your liking. See this draft for more information.

- 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; }

The_Imagineer_

i so need to unfollow this discussion. Every day i get notifications from here. :\

im back baby

MasterOfGizmo

Are the translation_maps as seen in the example supposed to work? It doesn't seem to work for me and the included extensions also don't use that feature. The only place i can find a reference to the translation_map is the example itself.

Scratchy_Tomato

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!!!

Last edited by Scratchy_Tomato (March 26, 2019 10:06:24)

SimpleScratch

Need to go try out stuff one at a time
copy utilities.js to your server

Try your mod out on your copy - does it work?
If no - maybe something up with your mod

if yes
change contents of utilitles.js to one of your extensions - does it work?

Last edited by SimpleScratch (March 26, 2019 10:50:26)

Scratchy_Tomato

SimpleScratch wrote:
Need to go try out stuff one at a time
copy utilities.js to your server

Try your mod out on your copy - does it work?
If no - maybe something up with your mod

if yes
change contents of utilitles.js to one of your extensions - does it work?

Thanks for your prompt answer

Can you be more specific, step by step? I'm not sure I'm doing it according to what you mean.

- I changed the makeymakey extension by mine and it works.
- Adding a new extension folder to scratch-vm including all the follow up makes successful compiled but the server GUI gets frozen and doesn't work.
However, the other ways don't work.

Discuss Scratch