add extension

content_scripts/saveload.js

@@ -0,0 +1,118 @@
+(function () {
+
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+  //Status checking code commented out because chrome does things differently and I don't want to make two implementations
+  // var STATUS = "loading...";
+  // updateStatus();
+
+
+  checkIfReady();
+  function checkIfReady() {
+
+    console.log("DSMsaveload trying to attach to desmos...");
+    if (document.getElementById("dcg-header-container").querySelector(".align-right-container")) {
+      console.log("DSMsaveload attached!");
+      // STATUS = "running";
+      // updateStatus();
+      return makeButtonContainers();
+    }
+    setTimeout(checkIfReady, 200);
+  }
+
+  const expressionExport = document.createElement("div");
+  expressionExport.id = "EXPORTEXPRESSION";
+  const expressionImport = document.createElement("div");
+  expressionImport.id = "IMPORTEXPRESSION";
+
+  document.body.appendChild(expressionImport);
+  document.body.appendChild(expressionExport);
+
+  function download(filename, textInput) {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
+    element.setAttribute('download', filename);
+    document.body.appendChild(element);
+    element.click();
+  }
+
+
+
+
+  function makeButtonContainers() {
+    const buttonContainer = document.createElement("span");
+    buttonContainer.style = "display: inline-block; position: relative; font-size: 90%;";
+    const saveButton = document.createElement("div");
+    saveButton.classList.add("dcg-btn-primary");
+    saveButton.style = "line-height: 34px; display: inline-block;";
+    saveButton.textContent = "Save JSON";
+    saveButton.addEventListener("click", () => { saveExpr(); });
+    const loadContainer = document.createElement("div");
+    loadContainer.classList.add("dcg-btn-primary");
+    loadContainer.style = "lineHeight: 34px; postion: relative; display: inline-block; margin-left: 3px;";
+    const loadButtonLabel = document.createElement("label");
+    loadButtonLabel.for = "loadJSON";
+    loadButtonLabel.textContent = "Load JSON";
+    const loadButton = document.createElement("input");
+    loadButton.type = "file";
+    loadButton.style = "opacity: 0.0; position: absolute; top:0; left: 0; bottom: 0; right:0; width: 100%; height:100%; ";
+    loadButton.id = "loadJSON";
+    loadButton.onchange = () => {
+      const selectedFile = loadButton.files[0];
+      new Response(selectedFile).json().then(json => {
+        console.log(json);
+        loadExpr(json);
+      }, err => {
+        alert("Invalid JSON file");
+      });
+    };
+
+    loadContainer.appendChild(loadButtonLabel);
+    loadContainer.appendChild(loadButton);
+    const buttonContainer2 = document.createElement("span");
+    buttonContainer2.style = "display: inline-block; position: relative; font-size: 90%;";
+
+    buttonContainer.appendChild(saveButton);
+    buttonContainer2.appendChild(loadContainer);
+    document.getElementById("dcg-header-container").querySelector(".align-right-container").appendChild(buttonContainer).appendChild(buttonContainer2);
+  }
+
+  // creates a script in the document to interact with the page variables.
+  // the IMPORTEXPRESSION div is used as an interface to carry the data from this script to the injected script
+  function loadExpr(json) {
+    const expressions = JSON.stringify(json);
+    var scriptTag = document.createElement('script');
+    scriptTag.src = chrome.extension.getURL('inject_scripts/load.js');
+    scriptTag.onload = function () { this.parentNode.removeChild(this); };
+    document.getElementById("IMPORTEXPRESSION").textContent = expressions;
+    document.body.append(scriptTag);
+  }
+
+  function saveExpr() {
+    var scriptTag = document.createElement('script');
+    scriptTag.src = chrome.extension.getURL('inject_scripts/save.js');
+    scriptTag.onload = function () { this.parentNode.removeChild(this); };
+    document.body.append(scriptTag);
+    document.addEventListener("updatedExpression", () => {
+      const expressionsString = document.getElementById("EXPORTEXPRESSION").textContent;
+      download("Desmos Graph.json", expressionsString);
+      document.getElementById("EXPORTEXPRESSION").textContent = "";
+    });
+  }
+
+  // chrome.runtime.onMessage.addListener((message) => {
+  //   if (message.command === "DSMstatus") {
+  //     updateStatus();
+  //   }
+  // });
+
+  // function updateStatus() {
+  //   chrome.runtime.sendMessage({
+  //     command: "DSMstatusReport",
+  //     status: STATUS
+  //   });
+  // }
+
+})();

inject_scripts/load.js

@@ -0,0 +1,5 @@
+(function () {
+    const expressions = JSON.parse(document.getElementById("IMPORTEXPRESSION").textContent);
+    Calc.setExpressions(expressions);
+    document.getElementById("IMPORTEXPRESSION").textContent = "";
+})();

inject_scripts/save.js

@@ -0,0 +1,7 @@
+(function () {
+    const expressions = Calc.getExpressions();
+    const expressionBox = document.getElementById("EXPORTEXPRESSION");
+    expressionBox.textContent = JSON.stringify(expressions);
+    const updateEvent = new Event("updatedExpression");
+    document.dispatchEvent(updateEvent);
+})();

manifest.json

@@ -0,0 +1,38 @@
+{
+  "description": "Allows importing and exporting of Desmos.com graphs as json files.",
+  "manifest_version": 2,
+  "name": "DSMsaveload",
+  "version": "1.0",
+  "homepage_url": "https://alexanderbass.com/showcase/desmossaveload",
+  "permissions": [
+    "activeTab"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "*://*.desmos.com/*"
+      ],
+      "js": [
+        "content_scripts/saveload.js"
+      ]
+    }
+  ],
+  "host_permissions": [
+    "https://www.desmos.com/"
+  ],
+  "web_accessible_resources": [
+    "inject_scripts/*.js"
+  ],
+  "browser_action": {
+    "default_icon": "icons/icon-32.png",
+    "theme_icons": [
+      {
+        "light": "icons/icon-32-light.png",
+        "dark": "icons/icon-32.png",
+        "size": 32
+      }
+    ],
+    "default_title": "Desmos Save Load",
+    "default_popup": "popup/DSMsaveload.html"
+  }
+}

popup/DSMsaveload.css

@@ -0,0 +1,5 @@
+html,
+body {
+  width: 250px;
+  text-align: center;
+}

popup/DSMsaveload.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="DSMsaveload.css" />
+</head>
+
+<body>
+  <div id="popup-content">
+    <p>Desmos JSON save / load</p>
+    <p>Created by <a href="https://alexanderbass.com">Alexander Bass</a></p>
+    <p>Source code at <a href="https://git.alexanderbass.com/alexander/DSMsaveload">git.alexanderbass.com</a></p>
+    <p>Not in any way affiliated with Desmos.</p>
+
+  </div>
+  <script src="DSMsaveload.js"></script>
+</body>
+
+</html>

popup/DSMsaveload.js

@@ -0,0 +1,15 @@
+
+// Commented out because chrome does things differently and I don't want to make 2 implementations.
+// getStatus();
+// function getStatus() {
+//   browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+//     browser.tabs.sendMessage(tabs[0].id, {
+//       command: "DSMstatus"
+//     });
+//   });
+// }
+// browser.runtime.onMessage.addListener((message) => {
+//   if (message.command === "DSMstatusReport") {
+//     document.getElementById("status").textContent = message.status;
+//   }
+// });