当前位置: 首页>>WEB开发>>正文


制作Chrome扩展程序下载文件

Ivan WEB开发 , , , 去评论

问题描述

我正在创建一个将从网站下载mp3文件的扩展名。我想通过创建一个带有mp3文件链接的新标签来实现,但是chrome不断地在播放器中打开它,而不是下载它。有没有办法我可以创建一个pop-up来询问用户”save-as”的文件?

最佳解决方案

Fast-forward 3年,现在Google Chrome提供chrome.downloads API(自Chrome 31起)。

在清单中声明"downloads"权限后,可以通过此呼叫启动下载:

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

有关更多选项(即另存为对话框,覆盖现有文件等),请参阅documentation

次佳解决方案

我在解决方案here上使用了一个变体

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
}

您需要考虑的一件事是,该代码需要在页面上执行,而不是您的扩展名 – 否则用户将看不到chrome的下载操作。下载仍然会发生,您将能够在下载选项卡中看到它们,但不会看到实际的下载。

编辑(事后考虑使您的代码在内容页上执行):

您在内容页面上进行操作的方式而不是扩展名的方式是使用Chrome “message passing”。基本上,您将扩展程序(这几乎像一个单独的页面)的消息传递给扩展程序正在使用的内容页面。然后,您将有一个监听器,您的扩展名已注入内容页面,对消息做出反应并进行下载。这样的事情

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

第三种解决方案

这是@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
}

第四种方案

我在GithubAppmator代码中做了如下。

基本的方法是构建您的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);
}

参考文献

注:本文内容整合自google/baidu/bing辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:gxnotes#qq.com(#替换为@)。

本文由《共享笔记》整理, 博文地址: https://gxnotes.com/article/152836.html,未经允许,请勿转载。
Go