TurboWarp扩展开发-2
Hello, world!
让我们从创建一个非常简单的沙盒扩展开始,我们假设你已经在上一步中设置了一个HTTP服务器
这里是一个简单的扩展,它添加了一个报告 “Hello, world!”的块
1 | class HelloWorld { |
以上是我们将用于显示扩展代码的标准组件。
请注意组件下方的 “尝试这个扩展 “ 按钮,这个链接将让你看到这个扩展的功能
请注意,这些扩展主要用于展示API功能;它们不打算在项目中实际使用
在 extensions.turbowarp.org 上几乎总会有另一个扩展能做同样的事情,但做得更好
将这段代码保存到你之前创建的hello-world.js中,这样你就可以使用你的HTTP服务器访问它。
现在,进入TurboWarp编辑器,进入扩展菜单,向下滚动并选择自定义扩展选项,然后输入扩展URL
一秒钟后,一个名为 “It works!”的扩展应该出现在侧边栏。
如果它没有出现,请打开你的开发工具,在控制台中寻找任何警告。一些最常见的错误是:
- JavaScript中的语法错误,这应该出现在你的浏览器的开发工具中
- JavaScript中的运行时错误,这应该出现在你的浏览器的开发工具中
现在,我们将按照这个文件的运行顺序来剖析它所发生的事情
构建与注册
1 | class MyExtension { |
这是一个标准的JavaScript类。用类的形式来定义你的扩展是很常规的。
类的名称并不重要,但我们建议以某种方式根据扩展的名称来命名它。在这个阶段,它不需要是唯一的
1 | Scratch.extensions.register(new HelloWorld()); |
这将你的类构造成一个对象,并介绍了允许扩展功能的特殊API:Scratch,
Scratch上有很多东西,但其中一个最重要的函数是Scratch.extensions.register
请确保总是准确地调用 register() 一次。如果你不调用它,你的扩展将永远不会被添加
我们将继续等待它加载。如果你多次调用它,其行为将无法定义,所以不要依赖它
getInfo()
1 | getInfo() { |
当你调用register()时,Scratch会在提供的对象上调用getInfo()函数。
这个对象必须返回一个带有关于扩展的元数据的对象一些必要的字段是id、name和block
下面是对这些的简短总结:
类型 | 描述 | |
---|---|---|
id | string | 一个仅由该扩展使用的唯一ID。多个扩展不能共享同一个ID。只能使用字母a-z和0-9,不能使用大写字母、空格或特殊字符 |
name | string | 出现在工具箱中的扩展名称 |
blocks | array | 一个描述项目中的块的对象列表 |
下面是对每个区块应该有的内容的简短总结:
类型 | 描述 | |
---|---|---|
opcode | string | 该块运行时应运行的函数的名称。例如,如果这是 “hello”,那么该类的 “hello “方法将被运行。每个操作码在每个扩展中必须是唯一的,所以多个扩展可以有一个操作码为 “hello “的块 |
blockType | Scratch.BlockType.* | 决定了块的形状。最常见的是Scratch.BlockType.COMMAND、Scratch.BlockType.REPORTER或Scratch.BlockType.BOOLEAN。详见下表 |
text | string | 将出现在编辑器中的块的文本。这里有一些处理参数的特殊语法,将在下一节中讨论 |
arguments | object | 可选的。在下一节讨论 |
blockType的可接受值:
描述 | 例子 | |
---|---|---|
Scratch.BlockType.COMMAND | 一个不返回的块 | 移动10步 |
Scratch.BlockType.REPORTER | 一个返回字符串或数字的块 | X坐标,Y坐标 |
Scratch.BlockType.BOOLEAN | 报告一个布尔值(true or false) | 按下鼠标? |
Scratch.BlockType.HAT | 一个响应事件而启动的块,稍后讨论 | 当角色被点击 |
虽然其他的BlockTypes确实存在,但它们的效果并不好,目前不会讨论
块
1 | hello() { |
这定义了将运行操作码为 “hello “的块的函数。在这种情况下,我们的块非常简单,只是返回一个字符串。
REPORTER块被期望返回一个字符串、数字或布尔值,而BOOLEAN块被期望只返回一个布尔值。
请注意,null、undefined、list和object都不是这些块的预期返回值。
当你想改变扩展时,只需修改扩展并重新加载页面。这里有一个提示,让你的生活更轻松:你可以使用 ?extension= URL 参数来自动加载一个扩展,而不是进入库中。
例如,如果你的扩展URL是 http://localhost:8080/hello-world.js ,你可以使用 https://turbowarp.org/editor?extension=http://localhost:8080/hello-world.js 来自动加载它。
如果你观察到当你刷新时,你的改变没有被应用,请尝试使用 F5 强制刷新