Downloading files using html5 blobs in a chrome-extension

Question

Im trying to achieve the same goal as OP there: Downloading mp3 files using html5 blobs in a chrome-extension but not the him's code, not the solution offered in discussion does not work for my google-chrome 19.0.1084.46. Im working in chrome-console on the local (file://) page, and errors for this code:

finalUrl = "http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3";
var xhr = new XMLHttpRequest();

xhr.open("GET", finalURL, true);

xhr.setRequestHeader('Content-Type', 'octet-stream');
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

xhr.onreadystatechange = function() 
{
    if(xhr.readyState == 4 && xhr.status == 200) 
    {   
        var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
        bb.append(xhr.responseText);
        var blob = bb.getBlob("application/octet-stream");

        var saveas = document.createElement("iframe");
        saveas.style.display = "none";

        saveas.src = window.webkitURL.createObjectURL(blob); 

        document.body.appendChild(saveas);

        delete xhr;
        delete blob;
        delete bb;
    }
}
xhr.send();

looks like

OPTIONS http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3 405 (Not Allowed) cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3:1 XMLHttpRequest cannot load http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3. Origin null is not allowed by Access-Control-Allow-Origin.

And the second subquestion: in according to How can i generate a file and offer it for download in plain javascript? - is the creation of iframe the best way to offer file to download?

What happens if you dont run from a file URL or install the extension so it runs from a chrome:// url? — Andrew Hall
– Andrew Hall, Commented Jul 17, 2012 at 9:23
I didnt yet check this, why you think that result may be different? Thank you for comment. — scythargon
– scythargon, Commented Jul 17, 2012 at 11:27

PAEz · Accepted Answer · 2017-03-05 19:35:40Z

2

As Andrew stated your first problem is probably that your doing it from file://. Try doing it from an extension.
After that you'll probably like to know that from Chrome 19 you can ask for the response from an xhr to be a blob.
Then for saving the file your better off using something like FileSaver.js to save the file. The iframe way works but you end up with an awful file name.
Here's an example to get you going....

manifest.json

{
  "name": "Download a file and click to save.",
  "version": "1.0",
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "browser_action": {
      "default_title": "Download a file and click to save.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "content_security_policy": "script-src 'self' https://raw.github.com/; object-src 'self'",
  "manifest_version" : 2
}

popup.html

<!doctype html>
<html>
  <head>
    <!-- https://github.com/eligrey/FileSaver.js -->
    <script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
    <!-- https://github.com/allmarkedup/jQuery-URL-Parser/tree/no-jquery -->
    <script src="https://raw.github.com/allmarkedup/jQuery-URL-Parser/no-jquery/purl.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="message">Getting File.....</div>
  </body>
</html>

popup.js

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://or.cdn.sstatic.net/chat/so.mp3', true);
xhr.filename = purl('http://or.cdn.sstatic.net/chat/so.mp3').attr('file');
xhr.responseType = 'blob';

xhr.onload = function(e) {
    var message = document.querySelector('#message');
    message.parentNode.removeChild(message);

    var link = document.createElement('A');
    link.innerText = 'Download File';
    link.href = '#';
    link.addEventListener('click', saveFile, false);
    document.body.appendChild(link);

};

xhr.onerror = function() {
    var message = document.querySelector('#message');
    message.innerText = 'Error getting file';
    this.filename = '';
}

xhr.send();

saveFile = function() {
    saveAs(xhr.response, xhr.filename); // saveAs function is from FileSaver.js
}

edited Mar 5, 2017 at 19:35

answered Jul 18, 2012 at 20:05

PAEz

8,5422 gold badges37 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

scythargon Over a year ago

wow man you are awesome!:) thanks a lot!:) wish you will be happy in all your life:)))

Jonathan Lin Over a year ago

saveAs is most likely referring to github.com/eligrey/FileSaver.js

PAEz Over a year ago

@dgm Yeah its from FileSaver. I edited the post to link to it, sorry for the confusion.

Collectives™ on Stack Overflow

Downloading files using html5 blobs in a chrome-extension

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related