Chrome扩展程序:如何在磁盘上保存文件

svgewumm  于 2023-04-27  发布在  Go
关注(0)|答案(7)|浏览(350)

我目前正在为google chrome创建一个扩展,它可以保存硬盘上的所有图像或图像链接。
问题是我不知道如何使用JS或Google Chrome Extension API将文件保存到磁盘上。
你有主意了吗?

50few1ms

50few1ms1#

您可以使用HTML5 FileSystem features通过Download API写入磁盘。这是将文件下载到磁盘的唯一方法,并且它是有限的。
你可以看看NPAPI插件。另一种方法是简单地通过XHR POST向外部网站发送一个请求,然后另一个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下载到文件中。

s2j5cfk0

s2j5cfk02#

我一直希望为自己做一个chrome扩展来批量下载图片。但每次我都感到沮丧,因为唯一似乎适用的选项是NPAPI,chrome和firefox似乎都不想再支持它了。
我建议那些仍然想实现“将文件保存在磁盘上”功能的人看看这个Stackoverflow post,这篇文章下面的评论对我帮助很大。
现在,自chrome 31+以来,chrome.downloads API变得稳定。我们可以使用它编程下载文件。如果用户没有在chrome设置中设置ask me before every download advance选项,我们可以保存文件,而不提示用户确认!
以下是我使用的(在扩展的背景页面):

// 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在下载完成后仍然不提供Eventchrome.downloads.download的回调函数在下载begin成功时被调用(而不是在完成时)
关于chrome.downloads的官方文档是here
这不是我最初的想法关于解决方案,但我张贴在这里,希望它可能是一些使用的人。

agyaoht7

agyaoht73#

据我所知,没有办法悄悄地将文件保存到用户的驱动器上,这似乎是您希望做的。我认为您可以要求文件一次保存一个(每次提示用户)使用如下:

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

如果你只想提示用户一次,你可以默默地抓取所有的图片,压缩成一个捆绑包,然后让用户下载。这可能意味着对所有的文件执行XmlHttpRequest,用Javascript压缩它们,上传它们到暂存区域,然后询问用户是否愿意下载压缩文件。我知道,这听起来很荒谬。
浏览器中有本地存储选项,但据我所知,它们仅供开发人员在沙箱中使用。(例如Gmail离线缓存。)

2cmtqfgy

2cmtqfgy4#

我做了一个扩展,做了类似这样的事情,如果这里有人仍然感兴趣:GitHub
它使用一个XMLHTTPRequest来抓取对象,在本例中假定是一个图像,然后对它创建一个ObjectURL,一个指向该ObjectUrl的链接,并单击虚构的链接。

r1zk6ea1

r1zk6ea15#

考虑使用HTML5 FileSystem features,使使用Javascript写入文件成为可能。

0md85ypi

0md85ypi6#

看起来从浏览器阅读和写入文件已经成为可能。一些较新的基于Chromium的浏览器可以使用“本地文件系统API”。这篇2020年的博客文章展示了使用JavaScript读取和写入本地文件系统的代码示例。
https://blog.merzlabs.com/posts/native-file-system/
此链接显示哪些浏览器支持本机文件系统API。
https://caniuse.com/native-filesystem-api

bt1cpqcv

bt1cpqcv7#

由于Javascript可以从任何地方搭便车到你的电脑上,所以给予它有能力写入你的磁盘是很危险的。
这是不允许的。你认为Chrome扩展程序需要用户交互吗?否则它可能属于同一类别。

相关问题