跳到主要内容

自定义扩展介绍

自定义扩展是一种使用 JavaScript 向 Bilup 添加新积木的方式。

在本教程中,我们将描述如何构建自定义扩展。可以使用侧边栏或每页底部的链接浏览页面。我们假设你在进入下一页之前完整阅读每一页并完成列出的练习(如果有的话)。

信息

我们刚刚从头重写了整个教程。

它使用了完全不同的结构和风格。我们希望它更容易理解。本教程很可能存在一些错误和遗漏。告诉我你的想法。谢谢!

当人们提到"扩展"时,他们可能指的是几种不同的东西:

可以访问 Scratch 内部可以通过 URL 加载
核心扩展(画笔、翻译等)
沙盒化自定义扩展
非沙盒化自定义扩展

本部分的文档仅指自定义扩展。虽然核心扩展共享许多基础知识,但开发它们的过程有很大不同。请参阅入门指南作为构建核心扩展的起点。

我们将在稍后讨论沙盒化和非沙盒化扩展之间的区别。

兼容性

自定义扩展与 Scratch 不兼容。使用自定义扩展创建的项目无法上传到 Scratch 网站。但是,可以使用 Bilup Packager 进行打包。

前提条件

自定义扩展开发需要 JavaScript 编程知识。如果你不熟悉 JavaScript,请先学习它。你喜欢的搜索引擎可以帮助你找到学习的地方。如果你不知道字符串 "1" 和数字 1 之间的区别,开发扩展将非常困难。作为志愿者,我们没有太多时间帮助你学习 JavaScript——抱歉。

可以使用网站或桌面应用开发扩展。

我们假设你可以访问浏览器或桌面应用中内置的开发者工具。通常可以通过右键 > 检查元素访问。在桌面应用中,可以使用 Ctrl+Shift+I(macOS 上为 Option+Command+I)显示。没有开发者工具编写 JavaScript 是极其痛苦的,我们无法提供帮助。

教程结构

本教程遵循从基础开始的方法。我们将从最基本的、实际上无用的扩展开始,逐步构建更有用的东西。

我们知道你们中的一些人会急于开始分享你的扩展,但我们要求你在发布扩展或提交给我们之前通读整个教程,以便你分享的扩展实际上是有用的。

准备开发环境

在最近版本的 Bilup 中,有几种开发扩展的方法。

文件(最简单)

最近版本的 Bilup 网站和桌面应用在自定义扩展菜单中有一个选项,可以从本地文件或复制粘贴的 JavaScript 代码加载扩展。这是开发扩展最简单的方法,因为它可以在任何计算机上只用文本编辑器完成。

本地 HTTP 服务器(推荐)

但是,如果可能,你应该使用本地 HTTP 服务器,让 Bilup 从你的计算机获取扩展。这加快了过程,因为你不必每次更改时都在 Bilup 中选择/粘贴 JavaScript 代码。有很多选项可以安装其中一个。如果你安装了 Python,你已经有一个:

cd path/to/where/you/will/store/your/extensions
python3 -m http.server 8080

这会在你运行该命令的任何文件夹中启动 http://localhost:8080/ 上的本地 HTTP 服务器。

我们最终会介绍官方开发服务器,但我们建议现在从最基本的设置开始。

现在,你应该使用不是 8000 的端口。我们稍后会详细讨论,但目前我们希望你编写的扩展在沙盒中运行。在沙盒外运行的扩展有一些额外的责任,我们将在稍后讨论。

要测试你的服务器是否工作,创建一个名为 hello-world.js 的文件并在其中放入任何文本。确保你可以通过访问像 http://localhost:8080/hello-world.js 这样的链接在浏览器中读取文件内容。

下一步

接下来,让我们创建你的第一个扩展