开发第一个scratch3.0扩展

友情提示：视频教程观看时请手动设置清晰度。

1. 先安装好git和nodejs
2. 下载Scratch3.0 preview版本（Scratch-gui）并安装。
   Shell

   1 2 3 4 5 6 7

   cd\ mkdir Scratch cd Scratch git clone https://github.com/llk/scratch-gui cd scratch-gui npm install npm start

3. 看到如下信息，表示scratch3.0正常启动。
4. 
5. 打开浏览器并输入 http://localhost:8601/ 应该可以看到如下画面，选择 Try it! 就可以进入 Scratch 3.0。

加入 Extension

前面提到，在这篇文章中我们将使用远端加载的方式加入 Extension。。

1. 在scratch-gui 根目录下建立文件夹 build。
2. 在 build 文件夹下新增文件example-browser-extension.js，內容如下：

   example-browser-extension.js

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   varBrowserExtension=function(){ };   BrowserExtension.prototype.getInfo=function(){     return{         id:‘browser’,         name:‘Browser Information’,           blocks:[             {                 opcode:'getBrowserName',                 blockType:Scratch.BlockType.REPORTER,                 text:'Get Browser Name',             }         ],           translation_map:{             zh:{                 ‘extensionName’:‘瀏覽器資訊’,                 ‘getBrowserName’:‘取得瀏覽器名稱’             }         },     }; };   BrowserExtension.prototype.getBrowserName=function(args){     returnnavigator.appVersion; };   Scratch.extensions.register(newBrowserExtension());

   在这个 Extension 脚本中，我们定义了一个名称为 Browser Information 的积木区块 (第 7 行)，里面包含一个名称为 Get Browser Information 的积木 (第 13 行)。这个积木的 opcode 为 getBrowserName (第 11 行)，因此预设情况下会执行 getBrowserName 这个函数，也就是程序第 26~28 行。

3. 选择一张用来 Extension 选择页面的代表图片，并放置到目录 scratch-gui\src\lib\libraries\extensions 下。
4. 修改文件 scratch-gui\src\lib\libraries\extensions\index.js，在

   index.js

   JavaScript

   1	import translateImage from‘./translate.png’;

   下方加上

   index.js

   JavaScript

   1	import browserImage from‘./Browsers-Free-PNG-Image.png’;

   其中 Browsers-Free-PNG-Image.png 需改成你所使用的图片名称。此外，需将

   index.js

   JavaScript

   1 2 3 4 5 6 7 8

   {         name:‘LEGO Boost’,         extensionId:‘boost’,         iconURL:boostImage,         description:‘Build with motors and sensors.’,         featured:true,         disabled:true     }

   改为

   index.js

   JavaScript

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   {         name:‘LEGO Boost’,         extensionId:‘boost’,         iconURL:boostImage,         description:‘Build with motors and sensors.’,         featured:true,         disabled:true     },     {         name:‘Browser Information’,         extensionId:‘browser’,         extensionURL:‘/example-browser-extension.js’,         iconURL:browserImage,         description:‘The extesion for querying browser information (DEMO)’,         featured:true     },

    

测试Extension

1. 回到浏览器，此时应该会重新出现欢迎页面，再次点选 Try It! 进入 Scratch 3.0 的编辑页面。
2. 点击左下方开启扩展选择页面。
3. 
4. 页面上我们可以看到从scratch-gui\src\lib\libraries\extensions 这个目录下，导入的图片。
5. 
6.