Here is Scratch3 extension generator based on Create React App.

The Scratch3 extension generator

As scratch3 gets better and better, we find that many users want to implement their own plugins. But writing a plugin for scratch3 is not a simple matter, it requires a solid JavaScript development capability; for professional JavaScript programmers, writing a scratch3 plugin is just tedious and waste of time. The purpose of this webapp is to let you complete your scratch3 plugin framework code in 10 minutes. Hope you guys like it~

中文使用说明

Instructions

Step1

Open：https://kittenbot.github.io/scratch3-extension/

Step2

Give your extension a name and ID. Note that the extension ID needs to be in ASCII characters and cannot contain spaces or special strings. The plugin ID should be unique in the runtime context of scratch3.

You can also choose prefered color for your extension.

Step3

Give your extension an icon. The icon is recommended to use less than 200x200 pixels square png or svg images.

Step4

Then we will create a block, click on the Add Function Block. Then click on the Add Text Variable in the pop-up modal box and name the variable to WORD. Note that the variable name needs to be ASCII letters, and cannot contain special characters, and recommend all uppercase.

Finally we have to change our block ID, the block ID needs to be unique in the current plugin. Here we will name the ID to sayhello.

• Note that the extension ID also needs to be an ASCII string and cannot contain a special characters.

Step5

You can click on the Generate Preview in the upper right corner to see the effect of our plugin loading in scratch3.

Step6

Finally click on the export index.js in the lower right corner to export the plugin source code.

For standard scratch3, please load index.js into the extension of scratch-vm.

---

The following steps are only valid for Kittenblock. You can download the latest Kittenblock at [https://www.kittenbot.cn/software/] (https://www.kittenbot.cn/software/).

Step7

Please create a extension folder in the extensions directory of the Kittenblock root directory. Here we will name it sayhello. Copy the generated index.js to this directory.

Step8

Create a file named extension.json under the changed folder, which contains the following contents:

{
    "name": "Say Hello",
    "type": "scratch3",
    "image": "logo.png"
}

Then find a picture you like as the main image of the extension, name it logo.png, and put it in the folder. Finally, our sayhello folder has the following three files.

Step9

Open Kittenblock and select Load External Plugin in the lower left corner then find the plugin we just added.

The final effect

---

You only need to change the corresponding block execution code in index.js to implement the function of a block.

Please keep tuned to our upcoming updates.