Add a button to load mod files

Author: arthuro555

Loader/gdmodext/html/menu.html

@@ -25,7 +25,8 @@ <h2 class="uk-heading-small">Overview</h2>
 			</li>
 			<li id="mods">
 				<h2 class="uk-heading-small">Mod Loader</h2>
-				<p class="uk-text-lead">Nothing here yet ;)</p>
+				<button class="uk-button-primary" id="selectMod">Load Mod</button>
+				<input type="file" id="fileInput" hidden></input>
 				<a href="#" uk-switcher-item="next">Go to Scene Switcher</a>
 			</li>
 			<li id="scenes">

Loader/gdmodext/js/injected.js

@@ -11,7 +11,7 @@ const debug = false;
 /**
  * The CDN to fetch the GDAPI files from
  */
-const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod@latest/API/";
+const CDN = "https://cdn.jsdelivr.net/gh/arthuro555/gdmod/API/";
 
 /**
  * Flag telling if that page got patched already.
@@ -88,6 +88,30 @@ function patchSceneCode() {
     }
 }
 
+/** From https://stackoverflow.com/a/12300351/10994662 */
+function dataURItoBlob(dataURI) {
+    var byteString = atob(dataURI.split(',')[1]);
+  
+    // separate out the mime component
+    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+  
+    // write the bytes of the string to an ArrayBuffer
+    var ab = new ArrayBuffer(byteString.length);
+  
+    // create a view into the buffer
+    var ia = new Uint8Array(ab);
+  
+    // set the bytes of the buffer to the correct values
+    for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+  
+    // write the ArrayBuffer to a blob, and you're done
+    var blob = new Blob([ab], {type: mimeString});
+    return blob;
+  
+  }
+
 
 // First we verify if the game is a GDevelop game
 if(window.gdjs !== undefined) {
@@ -115,6 +139,9 @@ if(window.gdjs !== undefined) {
             } else if(event.data["message"] === "changeScene") {
                 if(typeof GDAPI === "undefined") return;
                 GDAPI.currentScene.getGame()._sceneStack.replace(event.data.scene, true);
+            } else if(event.data["message"] === "loadMod") {
+                const mod = dataURItoBlob(event.data["mod"]);
+                GDAPI.loadZipMod(mod);
             }
         }
     });

Loader/gdmodext/js/menu.js

@@ -52,10 +52,23 @@ chrome.tabs.query({active: true, currentWindow: false}, function(tabs) {
         }
     });
 
+    const fileElement = document.getElementById("fileInput");
+    fileElement.addEventListener('change', function () {
+        var reader = new FileReader();
+        reader.onloadend = function() {
+            chrome.tabs.sendMessage(tabs[0].id, {message: "loadMod", mod: reader.result});
+        }
+        reader.readAsDataURL(fileElement.files[0]); 
+    });
+
     document.getElementById('mods').addEventListener('show', function () {
         chrome.tabs.sendMessage(tabs[0].id, {message: "installAPI"});
     });
 
+    document.getElementById('selectMod').addEventListener('click', function() {
+        fileElement.click();
+    });
+
     // Now that we opened the mod loader install the API into the game (the API is not crucial and is therefore only loaded when needed)
     chrome.tabs.sendMessage(tabs[0].id, {message: "connect"});
 });