Extension Chrome: Comment enregistrer un fichier sur le disque

Question

Je crée actuellement une extension pour Google Chrome qui peut enregistrer toutes les images ou les liens vers des images sur le disque dur.

Le problème est que je ne sais pas comment enregistrer un fichier sur disque avec JS ou avec l'API Google Chrome Extension.

Avez-vous une idée?

Answer 1

Vous pouvez utiliser HTML5 système de fichiers dispose d' écrire sur le disque en utilisant le Téléchargement de l'API. C'est la seule façon de télécharger des fichiers sur le disque et il est limité.

Vous pouvez prendre un coup d'oeil au plugin NPAPI. Une autre façon de faire ce que vous avez besoin est tout simplement envoyer une demande à un site web externe via XHR POST et puis une autre requête GET pour récupérer le fichier qui va apparaître comme un dialogue enregistrer le fichier.

Par exemple, pour mon extension de navigateur de Mon Hangouts , j'ai créé un utilitaire à télécharger une photo à partir de HTML5 Canvas directement sur le disque. Vous pouvez prendre un coup d'oeil au code ici capture_gallery_downloader.js le code c'est:

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(':');

Si vous souhaitez la mise en œuvre de la conversion d'une URI à un Blob en HTML5, voici comment j'ai fait:

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

Ensuite, une fois que l'utilisateur clique sur le bouton de téléchargement, il utilisera le "téléchargement" Fichier HTML5 API pour télécharger le blob URI dans un fichier.

Answer 2

J'avais depuis longtemps désireux de faire une extension chrome pour moi de lot télécharger des images. Et pourtant, à chaque fois que je suis frustré parce que la seule apparence option applicable est NPAPI, qui chrome et firefox qui semblent ne pas avoir envie de soutenir plus longtemps.

Je suggère à ceux qui en voulaient à mettre en œuvre 'enregistrer le fichier sur le disque" la fonctionnalité de regarder ce Stackoverflow post, le commentaire en dessous de ce post m'aident beaucoup.

Maintenant, depuis que chrome 31+, l' chrome.downloads API est devenu stable. Nous pouvons l'utiliser pour par programme de téléchargement de fichiers. Si l'utilisateur n'a pas défini l' ask me before every download avance option chrome paramètre, nous pouvons enregistrer le fichier sans demander confirmation à l'utilisateur pour confirmer!

Voici ce que j'utilise (à l'extension de l'arrière-plan de la page):

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

Si c'est dommage que chrome ne propose pas encore une Event lorsque le téléchargement est terminé.chrome.downloads.download's fonction de callback est appelé lorsque le téléchargement begin avec succès (pas terminé)

La documentation Officielle sur chrome.downloadsest ici.

Ce n'est pas mon idée de départ au sujet de la solution, mais j'ai posté ici en espérant que cela pourra être utile à quelqu'un.

Answer 3

Il n'ya aucun moyen que je connaisse pour silencieusement enregistrer des fichiers à l'utilisateur du lecteur, qui est ce qu'il semble que vous êtes l'espoir de faire. Je pense que vous pouvez DEMANDER pour les fichiers à enregistrer une à une (en invitant l'utilisateur à chaque fois) en utilisant quelque chose comme:

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

Si vous voulais seulement demander à l'utilisateur une fois, vous pouvez prendre toutes les images en silence, zip dans un bundle, puis demandez à l'utilisateur de télécharger. Cela peut signifier faire XmlHttpRequest sur tous les fichiers, de les compresser en Javascript, en les TÉLÉCHARGEANT sur une zone de transit, puis de demander à l'utilisateur s'il souhaite télécharger le fichier zip. Ça semble absurde, je le sais.

Il y a des options de stockage dans le navigateur, mais ils sont seulement pour le développeur de l'utilisation, dans le bac à sable, pour autant que je sais. (par exemple, Gmail hors connexion, la mise en cache.) Voir les annonces récentes à partir de Google comme cette une.

Answer 4

Pensez à utiliser les fonctionnalités HTML5 FileSystem qui permettent d'écrire dans des fichiers en utilisant Javascript.

Answer 5

Google Webstore
Github

J'ai fait une extension qui fait quelque chose comme ça, si quelqu'un ici est toujours intéressé. Il utilise XMLHTTPRequest pour saisir l'objet qui, dans ce cas, est supposé être une image, puis lui crée un ObjectURL, un lien vers cet ObjectUrl et clique sur le lien imaginaire.