Расширение Chrome: как сохранить файл на диске

В настоящее время я создаю расширение для google chrome, которое может сохранять все изображения или ссылки на изображения на жестком диске.

Проблема заключается в том, что я не знаю, как сохранить файл на диске с помощью JS или с API расширения Google Chrome.

У вас есть идея?

Ответ 1

С помощью Download API. Это единственный способ загрузить файлы на диск, и он ограничен.

Вы можете посмотреть плагин NPAPI. Другой способ сделать то, что вам нужно, - просто отправить запрос на внешний веб-сайт с помощью XHR POST, а затем еще один запрос GET для извлечения файла обратно, который появится в виде диалогового окна сохранения файла.

Например, для расширения моего браузера My Hangouts Я создал утилиту для загрузки фотографии с холста HTML5 прямо на диск. Вы можете посмотреть здесь код 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 блоба в файл.

Ответ 2

Я давно хотел сделать расширение chrome для себя, чтобы пакет загружать изображения. Но каждый раз, когда я расстраивался, потому что единственным применимым вариантом является NPAPI, который как хром, так и firefox, похоже, больше не хотят поддерживать.

Я предлагаю тем, кто все еще хочет реализовать функциональность "save-file-on-disk", чтобы просмотреть этот fooobar.com/questions/96175/..., комментарий ниже этого сообщения help меня много.

Теперь, когда хром 31+, API chrome.downloads стал стабильным. Мы можем использовать его для программной загрузки файла. Если пользователь не установил опцию ask me before every download advance в 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 здесь.

Это не моя оригинальная идея о решении, но я написал здесь, надеясь, что это может кому-то помочь.

Ответ 3

Я не знаю, как сохранить файлы на диск пользователя, как вы надеетесь. Я думаю, что вы можете попросить сохранить файлы по одному (каждый раз запрашивая пользователя), используя что-то вроде:

function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}

Если вы хотите запросить у пользователя только один раз, вы можете молча захватить все изображения, заархивировать их в пакет, а затем попросить пользователя загрузить это. Это может означать выполнение XmlHttpRequest для всех файлов, архивирование их в Javascript, ЗАГРУЗКА их в промежуточную область, а затем запрос пользователя, хотят ли они загрузить ZIP файл. Звучит абсурдно, я знаю.

В браузере есть опции локального хранилища, но, насколько я знаю, они предназначены только для разработчиков, в песочнице. (например, автономное кэширование Gmail.) Смотрите недавние объявления от Google, как этот.

Ответ 4

Рассмотрите возможность использования функций HTML5 FileSystem, которые делают возможным запись в файлы с помощью Javascript.

Ответ 5

Google Webstore
Github

Я сделал расширение, которое делает что-то вроде этого, если кто-то здесь все еще интересуется. Он использует XMLHTTPRequest для захвата объекта, который в этом случае считается изображением, затем создает ObjectURL, ссылку на этот объект ObjectUrl и нажимает на воображаемую ссылку.

Ответ 7

Так как Javascript позволяет совершать покупки на компьютере с веб-страницами где угодно, было бы опасно дать ему возможность записывать на ваш диск.

Это не разрешено. Вы думаете, что расширение Chrome потребует взаимодействия с пользователем? В противном случае он может попасть в ту же категорию.