web-dev-qa-db-ja.com

Chrome extension：ディスクにファイルを保存する方法

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

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

アイデアはありますか？

javascriptgoogle-chromegoogle-chrome-extension
60
X-Blaster

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

NPAPIプラグインをご覧ください。必要なことを行う別の方法は、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);
};

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

32
Mohamed Mansour

私は、画像を一括ダウンロードするためにchrome拡張機能を自分で作成したいとずっと思っていました。しかし、一見適用できる唯一のオプションはNPAPIであるため、イライラするたびに、chromeとfirefoxの両方はもはやサポートを望んでいないようです。

まだ「ディスクにファイルを保存」機能を実装したい人は、この Stackoverflow post 、この投稿の下のコメントを見てください私を大いに助けて.

chrome 31+以降、_chrome.downloads_ APIは安定しました。これを使用して、プログラムでファイルをダウンロードできます。ユーザーがchrome設定で_ask me before every download_アドバンスオプションを設定しなかった場合、ユーザーに確認を求めることなくファイルを保存できます。

ここに私が使用するものがあります（拡張機能の背景ページで）：

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

ダウンロードが完了してもchromeがEventを提供しないのは残念ですが、_beginが正常にダウンロードされた（完了していない）場合、_chrome.downloads.download_のコールバック関数が呼び出されます

_chrome.downloads_ isに関する公式ドキュメント here 。

それは解決策についての私の最初のアイデアではありませんが、誰かに役立つかもしれないと期待してここに投稿しました。

22
Allan Ruin

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

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

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

ブラウザーにはローカルストレージオプションがありますが、私が知る限り、サンドボックス内での開発者の使用専用です。 （例：Gmailオフラインキャッシュ） this one のようなGoogleからの最近のお知らせをご覧ください。

5
sandover

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

4
Arnaud Leymet

Google Webstore
Github

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

4
DrJKL