scratch 3.0二次开发—插件添加

scratch 3.0——extension添加

介绍了scratch环境配置，开始介绍scratch插件的添加。
插件是scratch完成功能的重要组成部分，而进行二次开发也可以从插件入手。
那么，如何添加插件呢？

第一步：下载插件

刚开始学，我们可能不具备做插件的能力，但我们可以找相应插件自己添加练练手。
hello world

第二步：添加插件

我们知道scratch本身是具有插件的，但这些插件放在什么位置，应该怎样去添加呢？

插件其实由两部分构成，功能（函数）部分、图像部分

一、功能（函数）部分

1. 打开\scratch-gui-develop\node_modules\scratch-vm\src\extensions
   新建文件夹scratch3_hello_world，将index.js文件放在其中。

2. 打开\scratch-gui-develop\node_modules\scratch-vm\src\extension-support
   更改其中extension-manager.js

//helloworld
const Scratch3HelloBlocks = require('../extensions/scratch3_hello_world');

const builtinExtensions = {
	……
	//helloworld
	helloWorld:() => require('../extensions/scratch3_hello_world')，
	……
	}

注意逗号（,）添加，若无可能报错。

到此为止，函数功能部分就结束了，那么图像部分怎么处理。

二、图像部分

打开\scratch-gui-develop\src\lib\libraries\extensions

1. 添加图片
   在目录下新建一名为helloworld的文件夹，添加两张图片，更改命名及格式。

2. 更改图片函数
   打开该目录下的index.jsx文件

//hello world 
import helloworldImage from './helloworld/helloworld.png';
import helloworldInsetImage from './helloworld/helloworld-small.svg';

仿照文件夹原extension格式更改内容

//hello world
	{
        name: (
            <FormattedMessage
                defaultMessage="hello world"
                description="Name for the 'hello world' extension"
                id="gui.extension.helloworld.name"
            />
        ),
        extensionId: 'helloWorld',
        iconURL: helloworldImage,
        insetIconURL: helloworldInsetImage,
        description: (
            <FormattedMessage
                defaultMessage="hello world."
                description="Description for the 'hello world' extension"
                id="gui.extension.helloworld.description"
            />
        ),
        featured: true
    },

添加图片功能及描述

第三步：试验结果

打开scratch网址，看看什么效果吧

编译成功说明，代码没有出错。(仅仅是代码没有硬性问题)打开网页说明成功！

拖动及点击代码块，试验一下插件效果。

如何添加插件已经讲完了，大家学废了吗？
简单插件添加大家已经明白了，但是不是所有的插件都是helloworld哦，搞清其中原理才是根本之道。

下一节：细说插件