DSMsaveload/content_scripts/saveload.js

(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
  //   });
  // }

})();