Download project

Author: rgantzos

features/download-project/data.json

@@ -0,0 +1,12 @@
+{
+  "title": "Download Projects",
+  "description": "Adds a button to project pages that allows you to download the project as an .sb3 file.",
+  "credits": [
+    { "username": "rgantzos", "url": "https://scratch.mit.edu/users/rgantzos/" }
+  ],
+  "type": ["Website"],
+  "tags": ["New", "Featured"],
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+  "resources": [{ "name": "download-btn", "path": "/download.svg" }]
+}

features/download-project/download.svg

@@ -0,0 +1,30 @@
+export default async function ({ feature, console }) {
+  ScratchTools.waitForElements(
+    ".preview .inner .flex-row.action-buttons",
+    async function (row) {
+      if (row.querySelector(".ste-download")) return;
+      let button = document.createElement("button");
+      button.className = "button action-button ste-download";
+      button.textContent = "Download"
+      button.addEventListener("click", async function () {
+        let { title } = feature.redux.getState().preview.projectInfo;
+        saveBlob(await feature.traps.vm.saveProjectSb3(), title + ".sb3");
+      });
+      row.appendChild(button)
+
+      window.feature = feature;
+      var saveBlob = (function () {
+        var a = document.createElement("a");
+        document.body.appendChild(a);
+        a.style = "display: none";
+        return function (blob, fileName) {
+          var url = window.URL.createObjectURL(blob);
+          a.href = url;
+          a.download = fileName;
+          a.click();
+          window.URL.revokeObjectURL(url);
+        };
+      })();
+    }
+  );
+}

features/download-project/script.js

@@ -0,0 +1,13 @@
+.ste-download::before {
+    background-image: var(--scratchtoolsresource-download-btn);
+    display: inline-block;
+    margin-right: .25rem;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    width: .875rem;
+    height: .875rem;
+    vertical-align: bottom;
+    content: "";
+    transform: scale(1.3);
+}

features/download-project/style.css

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "download-project",
+    "versionAdded": "v3.7.0"
+  },
   {
     "version": 2,
     "id": "blur-modal",