Download wont download with javascript

Question

So, I have this code, and the download won't download this variable. Here is the code:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Extension Maker</title>
    </head>
    <body>
    <form>
    <h1>Extension maker for chrome</h1>
    <input id="name" size="22" placeholder="Extension name">
    <br>
    <input id="vers" size="22" placeholder="Version">
    <br>
    <textarea id="desc" placeholder="Description"></textarea>
    <br><br><br>
    <input type="checkbox" id="popup">Popup <input id="popup-html" placeholder="Popup html">
    <br>
    <input type="checkbox" id="urlo">Change contents of single page <input id="page-cont" placeholder="Page HTML">
    <select id="select">
    <option value="newtab">New Tab Page</option>
    <option value="bookmarks">Bookmarks Page</option>
    <option value="history">History Page</option>
    </select>
    <br>
    <input type="checkbox" id="js">Run JavaScript <input id="js" placeholder="JS">
    <br><br><br>
    <button onclick="downloadAll()" id="downloadbutton">Download</button>
    </form>
    <script>
    
        
        function download(filename, text) {
        alert("download script working");
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', filename);
    
        element.style.display = 'none';
        document.body.appendChild(element);
    
        element.click();
    
        document.body.removeChild(element);
    };
        function downloadAll() {
        
        alert("downloadall works!");
        var first = document.getElementById("popup").checked;
        var second = document.getElementById("urlo").checked;
        var third = document.getElementById("js").checked;
        var name = document.getElementById("name").value;
        var vers = document.getElementById("vers").value;
        var desc = document.getElementById("desc").value;
        var pophtml = document.getElementById("popup-html").value;
        var manifeststart = "{     'name': " + name + ",     'version': " + vers + ",     'description': " + desc + ",               'manifest_version': 2   ";
        if(first === true){
        var manifest = manifeststart + "'default_popup': 'popup.html',       'default_icon': {         '16': 'images/get_started16.png'       }     },}";
        var text = document.getElementById("popup-html").value;
        var filename = "popup.html";
        
        download(filename, text);
        };
        if(second === true){
        var select = var text = document.getElementById("select").value;
        var manifest = manifest + "'chrome_url_overrides' : { ' " + select + "': 'myPage.html' }";
        var text = document.getElementById("page-cont").value;
        var filename = "myPage.html";
        
        download(filename, text);
        };
        if(third === true){
        var manifest = manifest + "'background': {'scripts': ['background.js'],'persistent': false },";
        var text = document.getElementById("js").value;
        var filename = "background.js";
        
        download(filename, text);
        };
        
        var text = manifest;
        var filename = "manifest.json";
        
        download(filename, text);
    };
        </script>
</body>
</html>

It adds json depending on the checked boxes. It just doesn't want to download the manifest.json. Also, when it downloads the json, is the json valid?

What's happening instead of the download? Did you try this answer: https://stackoverflow.com/questions/5192917/force-download-through-js-or-query/18330145#18330145 ? — Capricorn, Jul 08 '18 at 18:31
@Capricorn one download downloads. the other doesnt. multiple downloads enabled — EthanZone Coding, Jul 09 '18 at 08:20

score 0 · Answer 1 · answered Sep 16 '21 at 14:54

Valid json should be surround with "" not with '', you also had duplicated id on you JS elements Try this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Extension Maker</title>
  </head>
  <body>
    <form>
      <h1>Extension maker for chrome</h1>
      <input id="name" size="22" placeholder="Extension name" />
      <br />
      <input id="vers" size="22" placeholder="Version" />
      <br />
      <textarea id="desc" placeholder="Description"></textarea>
      <br /><br /><br />
      <input type="checkbox" id="popup" />Popup
      <input id="popup-html" placeholder="Popup html" />
      <br />
      <input type="checkbox" id="urlo" />Change contents of single page
      <input id="page-cont" placeholder="Page HTML" />
      <select id="select">
        <option value="newtab">New Tab Page</option>
        <option value="bookmarks">Bookmarks Page</option>
        <option value="history">History Page</option>
      </select>
      <br />
      <input type="checkbox" id="js" />Run JavaScript
      <input id="js-code" placeholder="JS" /> <br /><br /><br />
      <button onclick="downloadAll()" id="downloadbutton">Download</button>
    </form>
    <script>
      function download(filename, text) {
        // alert("download script working");
        var element = document.createElement("a");
        element.setAttribute(
          "href",
          "data:text/plain;charset=utf-8," + encodeURIComponent(text)
        );
        element.setAttribute("download", filename);

        element.style.display = "none";
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);
      }
      function downloadAll() {
        // alert("downloadall works!");
        var first = document.getElementById("popup").checked;
        var second = document.getElementById("urlo").checked;
        var third = document.getElementById("js").checked;
        var name = document.getElementById("name").value;
        var vers = document.getElementById("vers").value;
        var desc = document.getElementById("desc").value;
        var pophtml = document.getElementById("popup-html").value;

        var manifeststart =
          '{"name": "' + name + '","version":"' + vers + '","description":"' + desc + '","manifest_version": 2,';

        if (first === true) {
          var manifest =
            manifeststart +
            '"default_popup": "popup.html", "default_icon": {"16": "images/get_started16.png"}';
          var text = document.getElementById("popup-html").value;
          var filename = "popup.html";

          download(filename, text);
        }

        if (second === true) {
          var select = (text = document.getElementById("select").value);
          var manifest =
            manifest +
            ',"chrome_url_overrides" : {"' +
            select +
            '":"myPage.html"},';
          var text = document.getElementById("page-cont").value;
          var filename = "myPage.html";

          download(filename, text);
        }

        if (third === true) {
          var manifest =
            manifest +
            '"background": {"scripts": ["background.js"],"persistent": false }}';
          var text = document.getElementById("js-code").value;
          var filename = "background.js";
          alert(text);
          download(filename, text);
        }

        var text = manifest;
        var filename = "manifest.json";

        download(filename, text);
      }
    </script>
  </body>
</html>

Download wont download with javascript

1 Answers1