-SIPC-

发表于 分类于 ，

Hello, world!

让我们从创建一个非常简单的沙盒扩展开始，我们假设你已经在上一步中设置了一个HTTP服务器
这里是一个简单的扩展，它添加了一个报告 “Hello, world!”的块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class HelloWorld {
  getInfo() {
    return {
      id: 'helloworld',
      name: 'It works!',
      blocks: [
        {
          opcode: 'hello',
          blockType: Scratch.BlockType.REPORTER,
          text: 'Hello!'
        }
      ]
    };
  }

  hello() {
    return 'World!';
  }
}

Scratch.extensions.register(new 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
2
3
4
5
6
7
8
9
10
11
12
13
getInfo() {
  return {
    id: 'helloworld',
    name: 'It works!',
    blocks: [
      {
        opcode: 'hello',
        blockType: Scratch.BlockType.REPORTER,
        text: 'Hello, world!'
      }
    ]
  };
}

当你调用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
2
3
hello() {
  return 'Hello, world!';
}

这定义了将运行操作码为 “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 强制刷新

发表于 分类于 ，

自定义扩展简介

自定义扩展是您使用JavaScript向TurboWarp添加新块的一种方式

这是不同扩展所能做的：

可以访问VM内部 可以通过URL加载
核心扩展 ✅ ❌
沙盒扩展 ❌ ✅
非沙盒扩展 ✅ ✅

兼容性

自定义扩展与Scratch不兼容。使用自定义扩展制作的项目不能上传到Scratch网站
然而，你可以使用TurboWarp打包器进行打包

准备开发环境

自定义扩展的开发需要一个地方让 TurboWarp 能够获取你的扩展。这通常是以本地静态 HTTP 服务器的形式
如果你安装了Python，那么你就有一个现成的http服务器：

1
python -m http.server 8080

这将会在你运行该命令的文件夹中启动一个本地HTTP服务器

创建一个像hello-world.js的文件以确保您能够通过访问类似 http://localhost:8080/hello-world.js 的链接在浏览器中读取文件的内容

0%