From e7e8269cbf49288e1e20d852b2c0759b9adfacbb Mon Sep 17 00:00:00 2001
From: Christoph Stahl <christoph.stahl@uni-dortmund.de>
Date: Wed, 26 Jun 2019 21:51:45 +0200
Subject: [PATCH] Added Greasemonkey script and updated README with more
 detailed instructions (Thanks to TeaWithLucas)

---
 README.md                | 23 +++++++++++++++++++++++
 greasemonkey_autoload.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 greasemonkey_autoload.js

diff --git a/README.md b/README.md
index a11bf87..ea4baf9 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,20 @@ Save Configuration and STL of https://www.heroforge.com/
 Usage
 -----
 
+You can use HeroSaver in one of two fashions. Either you let it load as soon as you visit HeroForge (You need a browser extension for that), or you load it manually through your browsers console (No extension needed).
+
+### Automatically
+
+You can automatically load HeroSaver when you visit HeroForge by adding a GreaseMonkey/TamperMonkey script. For that you need to install GreaseMonkey or TamperMonkey (Click [here](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) or [here](https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/) for Firefox, or [here](https://chrome.google.com/webstore/detail/tampermonkey/) for Chrome, and install the addon).
+
+Now click on the GreaseMonkey or TamperMonkey icon in your browser, and select something like "New Script" or "New Userscript" and paste the contents of the following file: <https://raw.githubusercontent.com/christofsteel/herosaver/master/greasemonkey_autoload.js>. Hit save and you are done.
+
+*Note:* There is a version of TamperMonkey for Safari and Edge, but I never tried them. It is very much possible, that the same workflow works for those browsers.
+
+### Manually
+
+Alternatively you can load the HeroSaver manually everytime you visit HeroForge.
+
   1. Go to https://www.heroforge.com/
   2. Open the Javascript Console [F12], then click on Console
   3. Paste the following
@@ -14,6 +28,15 @@ Usage
 var xhr=new XMLHttpRequest;xhr.open("get","https://raw.githubusercontent.com/christofsteel/herosaver/master/herosaver.min.js",true);xhr.onreadystatechange=function(){if(xhr.readyState==4){var script=document.createElement("script");script.type="text/javascript";script.text=xhr.responseText;document.body.appendChild(script)}};xhr.send(null);
 ```
 
+
+### Buttons
+
+Once HeroSaver is loaded, you have these additional buttons on the top bar: 
+
+* Export Model (STL) - Exports the current model and downloads a STL of it.
+* Export (JSON) - Exports the current model settings in a JSON format.
+* Import (JSON) - Imports a previously exported JSON file with model settings.
+
 Limitations
 -----------
 
diff --git a/greasemonkey_autoload.js b/greasemonkey_autoload.js
new file mode 100644
index 0000000..b7d7b8e
--- /dev/null
+++ b/greasemonkey_autoload.js
@@ -0,0 +1,33 @@
+// ==UserScript==
+// @name     HeroSaver for HeroForge
+// @version  1
+// @namespace https://github.com/christofsteel/herosaver
+// @match  https://www.heroforge.com/
+// ==/UserScript==
+
+var observerOptions = {
+    childList: true,
+    subtree: true
+}
+
+var observer = new MutationObserver(function(mutationList, observer) {
+    mutationList.forEach((mutation) => {
+        if (Array.from(mutation.removedNodes).some((element) => {
+            return element.className === "loadingScreen";
+        })) {
+            observer.disconnect();
+            var xhr=new XMLHttpRequest;
+            xhr.open("get","https://raw.githubusercontent.com/christofsteel/herosaver/master/herosaver.min.js",true);
+            xhr.onreadystatechange=function(){
+                if (xhr.readyState == 4) {
+                    var script=document.createElement("script");
+                    script.type="text/javascript";
+                    script.text=xhr.responseText;
+                    document.body.appendChild(script)
+                }
+            };
+            xhr.send(null);
+        }
+    });
+});
+observer.observe(document.querySelector("body"), observerOptions);