让我们从创建一个非常简单的沙盒扩展开始。

这是一个简单的扩展，它添加了一个报告“你好，世界！

你好世界.js - 试试这个拓展（https://turbowarp.org/editor?extension=https://docs.turbowarp.org/example-extensions/hello-world.js）

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 编辑器，转到扩展菜单，向下滚动并选择自定义扩展选项，然后输入获取扩展源代码的 HTTP 服务器的完整 URL。

一秒钟后，一个名为“它有效！”的扩展应该出现在侧边栏中。如果未显示，请打开开发人员工具并在控制台中查找任何警告。一些最常见的错误是：

• JavaScript 中的语法错误。这应该显示在浏览器的开发人员工具中。

• JavaScript 中的运行时错误。这应该显示在浏览器的开发人员工具中。

• 您的广告拦截器或浏览器正在拦截对本地主机的请求。尝试关闭广告拦截器。在面向 Internet 的网站上发布扩展后，这应该不是问题。

现在，我们将按照运行顺序剖析此文件中发生的情况。

构建和注册

class MyExtension {

这是一个标准的 JavaScript 类。通常以类的形式定义扩展。类的名称无关紧要，但我们建议根据扩展的名称以某种方式制作它。在此阶段，它不必是唯一的。

Scratch.extensions.register(new HelloWorld());

这会将您的类构造到一个对象中，并引入允许扩展运行的特殊 API：。有很多关于，但最重要的功能之一是。Scratch Scratch Scratch.extensions.register

确保始终只调用一次 register（）。如果不调用它，则永远不会添加扩展，我们将继续等待它加载。如果多次调用它，则行为是未定义的，因此不要依赖它。

获取信息（）

  getInfo() {
    return {
      id: 'helloworld',
      name: 'It works!',
      blocks: [
        {
          opcode: 'hello',
          blockType: Scratch.BlockType.REPORTER,
          text: 'Hello, world!'
        }
      ]
    };
  }

当你调用register（）时，Scratch将在提供的对象上调用getInfo（）函数。此对象必须返回一个对象，其中包含有关扩展的元数据。一些必填字段是 、 和 。以下是这些内容的简短摘要：id nameblocks

块

  hello() {
    return 'Hello, world!';
  }

这定义了将使用操作码“hello”运行块的函数。在这种情况下，我们的块非常简单，只返回一个字符串。REPORTER 块应返回字符串、数字或布尔值，布尔块应仅返回布尔值。请注意，、、 列表和对象不是这些块的预期返回值。null undefined

当您要更改扩展名时，只需修改扩展名并重新加载页面即可。这里有一个提示，让你的生活更轻松：您可以使用 URL 参数自动加载扩展，而无需进入库。

后续步骤

接下来，让我们允许我们的块接受参数。