web-dev-qa-db-ja.com

Chrome拡張機能でファイルをダウンロードする

Webサイトからmp3ファイルをダウンロードする拡張機能を作成しています。 mp3ファイルへのリンクを含む新しいタブを作成することでこれを行おうとしていますが、chromeダウンロードする代わりにプレーヤー内で開き続けます。ポップを作成する方法はありますか-ユーザーにファイルを「名前を付けて保存」するよう依頼する

javascripthtmlgoogle-chromegoogle-chrome-extension
43
Franz Payer

早送り3年、そして今Google Chromeオファー chrome.downloads AP​​I （Chrome 31）以来。

マニフェストで"downloads"権限を宣言した後、次の呼び出しでダウンロードを開始できます。

chrome.downloads.download({
  url: "http://your.url/to/download",
  filename: "suggested/filename/with/relative.path" // Optional
});

スクリプトでファイルコンテンツを生成する場合は、 Blob および URL APIを使用できます。例：

var blob = new Blob(["array of", " parts of ", "text file"], {type: "text/plain"});
var url = URL.createObjectURL(blob);
chrome.downloads.download({
  url: url // The object URL can be used as download URL
  //...
});

その他のオプション（[名前を付けて保存]ダイアログ、既存のファイルの上書きなど）については、 documentation を参照してください。

97
Xan

ソリューションのバリエーションを使用しました こちら

var downloadCSS = function () {
    window.URL = window.webkitURL || window.URL;
    file = new BlobBuilder(); //we used to need to check for 'WebKitBlobBuilder' here - but no need anymore
    file.append(someTextVar); //populate the file with whatever text it is that you want
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
    a.download = 'combined.css'; // set the file name
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click(); //this is probably the key - simulatating a click on a download link
    delete a;// we don't need this anymore
}

頭に入れておく必要があることの1つは、このコードを拡張機能ではなくページで実行する必要があることです。そうしないと、chromeが実行するダウンロードアクションが表示されません。ダウンロードタブに表示されますが、実際のダウンロードは表示されません。

Edit（コンテンツページでコードを実行することについての思い返し）：

拡張機能ではなくコンテンツページでアクションを実行する方法は、Chrome "message passing" を使用することです。基本的に、拡張機能からメッセージを渡します（これは、拡張機能が動作しているコンテンツページへの別のページのようなものです）次に、メッセージに反応してダウンロードを行うコンテンツページに拡張機能が挿入したリスナーを取得します。

chrome.extension.onMessage.addListener(
  function (request, sender, sendResponse) {  
      if (request.greeting == "hello") {
          try{
              downloadCSS();
          }
          catch (err) {
              alert("Error: "+err.message);
          }
      }
  });
13
Steve Mc

これは@Steve Mcの答えを少し修正したもので、一般的な関数に変換するだけで、簡単にコピーしてそのまま使用できます。

function exportInputs() {
    downloadFileFromText('inputs.ini','dummy content!!')
}

function downloadFileFromText(filename, content) {
    var a = document.createElement('a');
    var blob = new Blob([ content ], {type : "text/plain;charset=UTF-8"});
    a.href = window.URL.createObjectURL(blob);
    a.download = filename;
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click(); //this is probably the key - simulating a click on a download link
    delete a;// we don't need this anymore
}
9
AmanicA

"downloads" Chrome @Xanおよび@AmanicAのソリューションを使用したマニフェストでの許可）を使用してファイルをダウンロードする簡潔な方法

function downloadFile(options) {
    if(!options.url) {
        var blob = new Blob([ options.content ], {type : "text/plain;charset=UTF-8"});
        options.url = window.URL.createObjectURL(blob);
    }
    chrome.downloads.download({
        url: options.url,
        filename: options.filename
    })
}

// Download file with custom content
downloadFile({
  filename: "foo.txt",
  content: "bar"
});

// Download file from external Host
downloadFile({
  filename: "foo.txt",
  url: "http://your.url/to/download"
});
7
Apoorv Saxena

AppmatorGithub のコードで次のように行いました。

基本的なアプローチは、Blobを構築することです（ただし、ChromeはXmlHttpRequestにresponseBlobを持っているため、それを使用できます）。iframeを作成します（非表示、display:none）次に、iframeのsrcをBlobに割り当てます。

これにより、ダウンロードが開始され、ファイルシステムに保存されます。唯一の問題は、ファイル名をまだ設定できないことです。

var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();

var output = Builder.output({"binary":true});
var ui8a = new Uint8Array(output.length);

for(var i = 0; i< output.length; i++) {
  ui8a[i] = output.charCodeAt(i);
}

bb.append(ui8a.buffer);

var blob = bb.getBlob("application/octet-stream");
var saveas = document.createElement("iframe");
saveas.style.display = "none";

if(!!window.createObjectURL == false) {
  saveas.src = window.webkitURL.createObjectURL(blob); 
}
else {
  saveas.src = window.createObjectURL(blob); 
}

document.body.appendChild(saveas);

XmlHttpRequestのresponseBlobの使用例（参照： http://www.w3.org/TR/XMLHttpRequest2/#dom-xmlhttprequest-responseblob ）

var xhr = new XmlHttpRequest();
xhr.overrideMimeType("application/octet-stream"); // Or what ever mimeType you want.
xhr.onreadystatechanged = function() {
if(xhr.readyState == 4 && xhr.status == 200) {

  var blob = xhr.responseBlob();
  var saveas = document.createElement("iframe");
  saveas.style.display = "none";

  if(!!window.createObjectURL == false) {
    saveas.src = window.webkitURL.createObjectURL(blob); 
  }
  else {
    saveas.src = window.createObjectURL(blob); 
  }

  document.body.appendChild(saveas);
}
5
Kinlan