前言

在前一篇文章中,我們開發了一個利用遠端載入的 Scratch 3.0 Extension。而在這篇文章中,我們將原本用來取得瀏覽器名稱的區塊與積木轉換成 scratch-vm 的格式,可用來開發功能更為強大的 Scratch 3.0 Extension。

安裝 Preview 版 Scratch 3.0

除了安裝 Node.js、Git、與 scratch-gui 之外,使用 scratch-vm 開發 Scratch 3.0 的 Extension 還必須額外安裝 scratch-vm。詳細步驟請參考後面的說明。

安裝 Node.js

安裝步驟請參考文章 開發你的第一個 Scratch 3.0 Extension

安裝 Git

安裝步驟請參考文章 開發你的第一個 Scratch 3.0 Extension

下載 Scratch 3.0 Preview

  1. 點選左下角 “開始” 輸入 cmd 後執行 “命令提示字元”。

    開啟命令提示字元

    開啟命令提示字元

  2. 在命令提示字元視窗內,依序輸入下列指令。部分指令執行時需要一段不短的時間,請耐心等候或考慮喝個咖啡休息一下。指令執行完畢後,請勿關閉此命令提示字元視窗。
  3. 再次點選左下角 “開始” 輸入 cmd 後執行新的 “命令提示字元”。

    開啟命令提示字元

    開啟命令提示字元

  4. 在新開啟的命令提示字元視窗內,依序輸入下列指令。
  5. 如果看到類似下面的訊息,表示 Scratch 3.0 已經正確啟動。

    Scratch 3.0 正確啟動

    Scratch 3.0 正確啟動

  6. 此時打開瀏覽器並在網址列輸入 http://localhost:8601/ 應可看到類似下面的畫面,選擇 Try it! 就可以進入 Scratch 3.0。

    Scratch 3.0 歡迎畫面

    Scratch 3.0 歡迎畫面

加入 Extension

為了簡化說明,在這個範例中我將直接把 Extension 腳本放在本機的目錄下。不過比較建議的做法還是應該使用 Github 或類似的服務來做腳本的管控。

  1. 利用檔案總管在 C:\Scratch3\scratch-vm\src\extensions 下建立目錄 scratch3_browser。
  2. 在 scratch3_browser 目錄中新增檔案 index.js,內容如下:

    這個 Extension 腳本的寫法雖然由 javascript Prototype 改為物件的形式,但是主要內容與架構不變。函式 getInfo (第 8 行) 回傳同樣的內容,而積木所呼叫的函式 getBrowserName (第 22 行) 也完全一樣。最大的差別在於建構子 constructor (第 4 行) 將會接收 runtime 這個物件,可以用來進行更複雜的功能。此外,引入方式也所不同 (第 27 行)。
  3. 修改檔案 C:\Scratch3\scratch-vm\src\extension-support\extension-manager.js,將

    修改為
  4. 選擇一張用來作為 Extension 選擇頁面的代表圖片,並放置到目錄 C:\Scratch3\scratch-gui\src\lib\libraries\extensions 下。
  5. 修改檔案 C:\Scratch3\scratch-gui\src\lib\libraries\extensions\index.js,在

    下方加上

    其中 Browsers-Free-PNG-Image.png 需改成你所使用的圖片名稱。此外,需將

    改為

    與使用遠端載入方式不同的是這裡不需要設定 extensionURL 這個參數。

測試 Extension

  1. 回到瀏覽器,此時應該會重新出現歡迎畫面,再次點選 Try It! 進入 Scratch 3.0 的編輯頁面。
  2. 點選左下方圖示開啟 Extension 選擇頁面。

    開啟 Scratch 3.0 Extension 選擇頁面

    開啟 Scratch 3.0 Extension 選擇頁面

  3. 拉到最下方應該可以看到我們新增的 Extension,而顯示的圖示則會是你之前複製到 C:\Scratch3\scratch-gui\src\lib\libraries\extensions 這個目錄下的圖片。點選這個圖示就可以載入我們新增的 Extension。

    選取新增的 Extension

    選取新增的 Extension

  4. 載入成功後可以看到左邊下方出現 Browser Information 的選項,而且只有一個名為 Get Browser Name 的積木。

    使用新增的 Extension

    使用新增的 Extension

  5. 設計如下的積木,並點選兩下執行這段積木,就可以看到 Scratch 貓咪正確說出瀏覽器的名稱了。

    Extension 執行結果

    Extension 執行結果

透過這個簡單的範例,我們了解到如何利用 scratch-vm 來開發 Scratch 3.0 的 Extension。而有關 Extension 腳本更為完整的設計方式,可參考官方的 Extension 原始碼

Facebook 留言
Print Friendly, PDF & Email
Summary
利用 scratch-vm 開發 Scratch 3.0 Extension
Article Name
利用 scratch-vm 開發 Scratch 3.0 Extension
Description
在這篇文章中,我們將原本用來取得瀏覽器名稱的區塊與積木轉換成 scratch-vm 的格式,可用來開發功能更為強大的 Scratch 3.0 Extension。
Author
Publisher Name
Everlearn Studio
Publisher Logo