Расширение Chrome:Как сохранить файл на диске
-
23-09-2019 - |
Вопрос
В настоящее время я создаю расширение для Google Chrome, которое может сохранять все изображения или ссылки на изображения на жестком диске.
Проблема в том, что я не знаю, как сохранить файл на диске с помощью JS или с помощью API расширений Google Chrome.
У вас есть идея?
Решение
Вы можете использовать Возможности файловой системы HTML5 записать на диск с помощью Скачать API.Это единственный способ загрузки файлов на диск, и он ограничен.
Вы можете взглянуть на плагин NPAPI.Другой способ сделать то, что вам нужно, — просто отправить запрос на внешний веб-сайт через XHR POST, а затем еще один запрос GET для получения файла обратно, который появится в виде диалогового окна сохранения файла.
Например, для моего расширения браузера Мои видеовстречи Я создал утилиту для загрузки фотографии из HTML5 Canvas прямо на диск.Вы можете посмотреть код здесь capture_gallery_downloader.js код, который это делает:
var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');
Если вы хотите реализовать преобразование URI в Blob в HTML5, вот как я это сделал:
/**
* Converts the Data Image URI to a Blob.
*
* @param {string} dataURI base64 data image URI.
* @param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};
Затем, после того как пользователь нажмет кнопку загрузки, он будет использовать API файлов HTML5 «загрузить» для загрузки URI BLOB-объекта в файл.
Другие советы
Я давно хотел сделать для себя расширение для Chrome для пакетной загрузки изображений.Тем не менее, каждый раз я расстраивался, потому что единственный, казалось бы, применимый вариант — это NPAPI, который, похоже, и Chrome, и Firefox больше не желают поддерживать.
Я предлагаю тем, кто все еще хотел реализовать функцию «сохранения файла на диске», взглянуть на это. Сообщение Stackoverflow, комментарий под этим постом мне очень помог.
Теперь, поскольку Chrome 31+, chrome.downloads
API стал стабильным.Мы можем использовать его для программного скачивания файла.Если пользователь не установил ask me before every download
дополнительная опция в настройках Chrome, мы можем сохранить файл, не запрашивая у пользователя подтверждения!
Вот что я использую (на фоновой странице расширения):
// remember to add "permissions": ["downloads"] to manifest.json
// this snippet is inside a onMessage() listener function
var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
chrome.downloads.download({url:imgurl},function(downloadId){
console.log("download begin, the downId is:" + downloadId);
});
Хотя жаль, что хром до сих пор не предоставляет Event
когда загрузка завершится.chrome.downloads.download
функция обратного вызова вызывается при загрузке begin
успешно (не завершено)
Официальная документация о chrome.downloads
является здесь.
Это не моя первоначальная идея решения, но я разместил здесь в надежде, что оно может кому-то пригодиться.
Я не знаю способа незаметно сохранять файлы на диск пользователя, и, похоже, именно это вы и надеетесь сделать.Я думаю, вы можете ПОПРОСИТЬ, чтобы файлы сохранялись по одному (каждый раз запрашивая пользователя), используя что-то вроде:
function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}
Если вы хотите запросить у пользователя только один раз, вы можете молча захватить все изображения, заархивировать их в пакет, а затем попросить пользователя загрузить его.Это может означать выполнение XmlHttpRequest для всех файлов, их архивирование в Javascript, ЗАГРУЗКУ их в промежуточную область, а затем запрос пользователя, хотят ли они загрузить zip-файл.Звучит абсурдно, я знаю.
В браузере есть параметры локального хранилища, но, насколько мне известно, они предназначены только для использования разработчиками в песочнице.(например.Офлайн-кэширование Gmail.) Посмотрите последние объявления Google, например Вот этот.
Рассмотрите возможность использования Возможности файловой системы HTML5 которые делают возможной запись в файлы с помощью Javascript.
Интернет-магазин Google
Гитхаб
Я сделал расширение, которое делает что-то подобное, если кому-то еще интересно.Он использует XMLHTTPRequest для захвата объекта, который в данном случае предположительно является изображением, затем создает для него ObjectURL, ссылку на этот ObjectUrl, и щелкает по воображаемой ссылке.
Поскольку Javascript автостопом попадает на ваш компьютер с веб-страницами примерно в любом месте, было бы опасно давать ему возможность записи на ваш диск.
Это не разрешено.Думаете ли вы, что расширение Chrome потребует взаимодействия с пользователем?В противном случае он может попасть в ту же категорию.