87

現在、すべての画像または画像へのリンクをハードドライブに保存できる Google Chrome の拡張機能を作成しています。

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

アイデアはありますか？

4

7 に答える 7

43

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

NPAPI プラグインを参照してください。必要なことを行うもう 1 つの方法は、XHR POST を介して外部 Web サイトにリクエストを送信し、別の GET リクエストを送信してファイルを取得することです。これは、ファイルの保存ダイアログとして表示されます。

たとえば、私のブラウザ拡張機能My Hangoutsでは、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);
};

次に、ユーザーがダウンロード ボタンをクリックすると、「ダウンロード」HTML5 ファイル API を使用して BLOB URI がファイルにダウンロードされます。

于 2010-01-28T21:24:32.330 に答える
5

ファイルをユーザーのドライブに静かに保存する方法を私が知っている方法はありません。これは、あなたが望んでいるようです。次のようなものを使用して、ファイルを一度に1つずつ保存するように要求できると思います（毎回ユーザーにプロンプ​​トを表示します）：

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

ユーザーに一度だけプロンプトを表示したい場合は、すべての画像を黙って取得し、それらを 1 つのバンドルに圧縮してから、ユーザーにそれをダウンロードさせることができます。これは、すべてのファイルに対して XmlHttpRequest を実行し、それらを Javascript で圧縮し、ステージング領域にアップロードしてから、zip ファイルをダウンロードするかどうかをユーザーに尋ねることを意味する場合があります。ばかげているように聞こえますが、私は知っています。

ブラウザーにはローカル ストレージ オプションがありますが、私の知る限り、それらは開発者がサンドボックス内で使用するためだけのものです。(Gmail のオフライン キャッシュなど)。Google からの最近の発表は、このようなものです。

于 2010-01-28T18:41:31.220 に答える
4

Javascriptを使用してファイルへの書き込みを可能にするHTML5ファイルシステム機能の使用を検討してください。

于 2011-08-14T08:01:10.393 に答える
4

Google ウェブストア
Github

ここにいる誰かがまだ興味を持っている場合は、このようなことを行う拡張機能を作成しました。XMLHTTPRequest を使用してオブジェクト (この場合は画像であると推定される) を取得し、オブジェクトへの ObjectURL、その ObjectUrl へのリンクを作成し、架空のリンクをクリックします。

于 2012-08-10T04:14:57.813 に答える
-5

Javascript はどこからでも Web ページを使用してコンピューターにヒッチハイクするため、ディスクに書き込む機能を Javascript に与えるのは危険です。

それは許可されていません。Chrome 拡張機能にはユーザーの操作が必要になると思いますか? そうしないと、同じカテゴリに分類される可能性があります。

于 2010-01-28T11:09:53.723 に答える