使用HTML5的斑点在Chrome扩展

我试着去实现相同的目标OP有下载文件： Downloading mp3 files using html5 blobs in a chrome-extension 但不是他的代码，而不是在讨论中提出的解决方案并不为我的谷歌铬19.0.1084.46工作。林铬控制台上工作本地（文件：//）网页，和错误的代码：使用HTML5的斑点在Chrome扩展

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

看起来像

OPTIONS http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3 405（不允许）cs1076.userapi。 XMLHttpRequest不能加载http://cs1076.userapi.com/u3040678/audio/d7ff6874cfa4.mp3。 Access-Control-Allow-Origin不允许Origin null。

而第二subquestion：在根据How can i generate a file and offer it for download in plain javascript? - 是iframe的创建提供文件下载的最好方法？

来源

2012-07-17 scythargon

如果您不从文件URL运行或安装扩展以使其从chrome：// url运行，会发生什么情况？ – 2012-07-17 09:23:50

我还没有检查这个，为什么你认为结果可能会不同？谢谢你的评论。 – scythargon 2012-07-17 11:27:32

Chrome对文件有一些安全策略：// urls – 2012-07-17 12:03:48

正如Andrew所说，你的第一个问题可能是你从file：//做了它。尝试从扩展名中完成。
之后，您可能会想知道，从Chrome 19开始，您可以要求xhr的响应是一个blob。
然后为了保存文件，最好使用类似FileSaver.js的文件来保存文件。 iframe的方式工作，但你最终得到一个糟糕的文件名。
下面是一个例子，让你去....

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 
}

来源

2012-07-18 20:05:08 PAEz

哇，你太棒了！:)非常感谢！:)希望你在你的生活中都会开心:)） – scythargon 2012-07-19 18:26:57

请详细说明一下saveAs代码。谢谢。 – dgm 2012-11-12 14:11:10

saveAs很可能是指https://github.com/eligrey/FileSaver.js/ – 2017-03-05 15:50:55

使用HTML5的斑点在Chrome扩展

回答

相关问题