Я создаю расширение, которое будет загружать mp3 файл с веб-сайта. Я пытаюсь сделать это, создав новую вкладку со ссылкой на mp3 файл, но хром продолжает открывать ее внутри проигрывателя, а не загружать ее. Есть ли способ создать всплывающее окно, чтобы попросить пользователя "сохранить-как" файл?
Создание расширения Chrome для загрузки файла
Ответ 1
Перенесемся на 3 года вперед, и теперь Google Chrome предлагает chrome.downloads
API (начиная с Chrome 31).
После объявления разрешения "downloads"
в манифесте можно начать загрузку с помощью этого вызова:
chrome.downloads.download({
url: "http://your.url/to/download",
filename: "suggested/filename/with/relative.path" // Optional
});
Если вы хотите сгенерировать содержимое файла в сценарии, вы можете использовать Blob
и URL
API, например:
var blob = new Blob(["array of", " parts of ", "text file"], {type: "text/plain"});
var url = URL.createObjectURL(blob);
chrome.downloads.download({
url: url // The object URL can be used as download URL
//...
});
Дополнительные параметры (например, диалоговое окно "Сохранить как", перезапись существующих файлов и т.д.) см. в документации.
Ответ 2
Я использовал вариант решения здесь
var downloadCSS = function () {
window.URL = window.webkitURL || window.URL;
file = new BlobBuilder(); //we used to need to check for 'WebKitBlobBuilder' here - but no need anymore
file.append(someTextVar); //populate the file with whatever text it is that you want
var a = document.createElement('a');
a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
a.download = 'combined.css'; // set the file name
a.style.display = 'none';
document.body.appendChild(a);
a.click(); //this is probably the key - simulatating a click on a download link
delete a;// we don't need this anymore
}
Одна вещь, о которой вы должны иметь в виду, это то, что этот код необходимо выполнить на странице, а не в вашем расширении, иначе пользователь не увидит действие загрузки, которое делает хром. Загрузка будет продолжаться, и вы сможете увидеть ее на вкладке загрузки, но они не будут видеть, как происходит фактическое скачивание.
Изменить (после того, как вы сделали код на странице содержимого):
Как вы делаете действие на странице контента, а не на своем расширении, используйте Chrome "передача сообщений" . В основном вы передаете сообщение с вашего расширения (которое почти как отдельная страница) на страницу содержимого, с которой работает расширение. Затем у вас есть слушатель, который ваш добавочный номер ввел на страницу содержимого, которая реагирует на сообщение и выполняет загрузку. Что-то вроде этого:
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.greeting == "hello") {
try{
downloadCSS();
}
catch (err) {
alert("Error: "+err.message);
}
}
});
Ответ 3
Это слегка измененная версия ответа @Steve Mc, которая просто превращает ее в обобщенную функцию, которую можно легко скопировать и использовать как есть:
function exportInputs() {
downloadFileFromText('inputs.ini','dummy content!!')
}
function downloadFileFromText(filename, content) {
var a = document.createElement('a');
var blob = new Blob([ content ], {type : "text/plain;charset=UTF-8"});
a.href = window.URL.createObjectURL(blob);
a.download = filename;
a.style.display = 'none';
document.body.appendChild(a);
a.click(); //this is probably the key - simulating a click on a download link
delete a;// we don't need this anymore
}
Ответ 4
Ниже приведен краткий способ загрузки файла с использованием "загрузок" в манифесте Chrome с помощью @Xan и @AmanicA-решения
function downloadFile(options) {
if(!options.url) {
var blob = new Blob([ options.content ], {type : "text/plain;charset=UTF-8"});
options.url = window.URL.createObjectURL(blob);
}
chrome.downloads.download({
url: options.url,
filename: options.filename
})
}
// Download file with custom content
downloadFile({
filename: "foo.txt",
content: "bar"
});
// Download file from external host
downloadFile({
filename: "foo.txt",
url: "http://your.url/to/download"
});
Ответ 5
Я сделал это следующим образом: Appmator код Github.
Основной подход заключается в создании вашего Blob, но вы хотите (у Chrome есть responseBlob на XmlHttpRequest, чтобы вы могли его использовать), создать iframe (hidden, display:none
), а затем назначить src iframe как Blob,
Это приведет к загрузке и сохранению в файловой системе. Единственная проблема заключается в том, что вы еще не можете установить имя файла.
var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
var output = Builder.output({"binary":true});
var ui8a = new Uint8Array(output.length);
for(var i = 0; i< output.length; i++) {
ui8a[i] = output.charCodeAt(i);
}
bb.append(ui8a.buffer);
var blob = bb.getBlob("application/octet-stream");
var saveas = document.createElement("iframe");
saveas.style.display = "none";
if(!!window.createObjectURL == false) {
saveas.src = window.webkitURL.createObjectURL(blob);
}
else {
saveas.src = window.createObjectURL(blob);
}
document.body.appendChild(saveas);
Пример использования XmlHttpRequest responseBlob (см. http://www.w3.org/TR/XMLHttpRequest2/#dom-xmlhttprequest-responseblob)
var xhr = new XmlHttpRequest();
xhr.overrideMimeType("application/octet-stream"); // Or what ever mimeType you want.
xhr.onreadystatechanged = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var blob = xhr.responseBlob();
var saveas = document.createElement("iframe");
saveas.style.display = "none";
if(!!window.createObjectURL == false) {
saveas.src = window.webkitURL.createObjectURL(blob);
}
else {
saveas.src = window.createObjectURL(blob);
}
document.body.appendChild(saveas);
}