[解決済み] Chromeの拡張機能です。ディスクにファイルを保存する方法

質問

私は現在、すべての画像や画像へのリンクをハードドライブに保存できるグーグルクローム用の拡張機能を作成しています。

問題は、JSまたはGoogle Chrome Extension APIでファイルをディスクに保存する方法を知らないことです。

何かいい方法はないでしょうか？

どのように解決するのですか？

あなたは HTML5 FileSystemの機能 を使用してディスクに書き込むことができます。 ダウンロード APIを使用します。これは、ファイルをディスクにダウンロードする唯一の方法であり、制限されています。

NPAPI プラグインを見てみるといいでしょう。必要なことを行う別の方法は、XHR POST を介して外部 Web サイトにリクエストを送信し、ファイルを取得するために別の 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(':');

HTML5でURIをBlobに変換する実装をお望みなら、私がやった方法は以下の通りです。

/**
 * 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);
};

次に、ユーザーがダウンロードボタンをクリックした後、"download" HTML5 File APIを使用して、BLOB URIをファイルにダウンロードすることになります。