Ensure only json files are used when loading.

Graph title is used for file name

content_scripts/saveload.js

@@ -4,19 +4,13 @@
     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();
+  setTimeout(checkIfReady, 200);
   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);
@@ -24,8 +18,10 @@
 
   const expressionExport = document.createElement("div");
   expressionExport.id = "EXPORTEXPRESSION";
+  expressionExport.style.display = "none";
   const expressionImport = document.createElement("div");
   expressionImport.id = "IMPORTEXPRESSION";
+  expressionImport.style.display = "none";
 
   document.body.appendChild(expressionImport);
   document.body.appendChild(expressionExport);
@@ -59,6 +55,7 @@
     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.accept = ".json";
     loadButton.onchange = () => {
       const selectedFile = loadButton.files[0];
       new Response(selectedFile).json().then(json => {
@@ -79,6 +76,10 @@
     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) {
@@ -92,27 +93,16 @@
 
   function saveExpr() {
     var scriptTag = document.createElement('script');
+    const graphTitle = document.querySelector(".align-left-container").querySelector(".dcg-variable-title").textContent + ".json";
     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);
+      download(graphTitle, expressionsString);
       document.getElementById("EXPORTEXPRESSION").textContent = "";
     });
   }
 
-  // chrome.runtime.onMessage.addListener((message) => {
-  //   if (message.command === "DSMstatus") {
-  //     updateStatus();
-  //   }
-  // });
-
-  // function updateStatus() {
-  //   chrome.runtime.sendMessage({
-  //     command: "DSMstatusReport",
-  //     status: STATUS
-  //   });
-  // }
-
 })();

manifest.json

@@ -3,7 +3,7 @@
   "manifest_version": 2,
   "name": "DSMsaveload",
   "version": "1.0",
-  "homepage_url": "https://alexanderbass.com/showcase/desmossaveload",
+  "homepage_url": "https://alexanderbass.com/programming/desmossaveload",
   "permissions": [
     "activeTab"
   ],

popup/DSMsaveload.js

@@ -1,15 +0,0 @@
-
-// 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;
-//   }
-// });