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 des liens vers des images sur le disque dur.

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

Avez-vous une idée?

Answer 1

Vous pouvez utiliser HTML5 FileSystem propose d'écrire sur le disque en utilisant le < a href = "http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download" rel = "noreferrer"> Télécharger API. C'est la seule façon de télécharger des fichiers sur le disque et il est limité.

Vous pouvez jeter un oeil à plug-in NPAPI. Une autre façon de faire ce que vous avez besoin est simplement envoyer une demande à un site Web externe via XHR POST, puis une autre requête GET pour récupérer le dos de fichier qui apparaîtra comme une boîte de dialogue de fichier de sauvegarde.

Par exemple, pour mon extension de navigateur Mes Hangouts J'ai créé un utilitaire pour télécharger une photo de HTML5 Canvas directement sur le disque. Vous pouvez jeter un oeil au code ici capture_gallery_downloader.js le code qui fait cela 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'un URI à un Blob en HTML5 voici comment je l'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);
};

Puis, après que l'utilisateur clique sur le bouton de téléchargement, il utilisera le « télécharger » HTML5 File API pour télécharger l'URI blob dans un fichier.

Answer 2

Je l'avais depuis longtemps Souhaitant faire une extension de chrome pour moi-même pour télécharger des images par lots. Pourtant, chaque fois que je suis frustré parce que la seule apparemment l'option applicable est NPAPI, deux Chrome et Firefox ne semblent pas avoir le désir de soutenir plus longtemps.

Je suggère ceux qui voulaient encore à mettre en œuvre la fonctionnalité « sauvegarde de fichiers sur disque » pour jeter un oeil à cette Stackoverflow après, le commentaire ci-dessous ce poste me aider beaucoup.

Maintenant, puisque le chrome 31+, l'API chrome.downloads est devenu stable. Nous pouvons l'utiliser pour télécharger le fichier programme. Si l'utilisateur n'a pas défini l'option avance ask me before every download dans un cadre chromé, nous pouvons enregistrer le fichier sans demander l'utilisateur à confirmer!

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

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

Bien qu'il soit dommage que chrome ne fournit toujours pas Event lorsque la fonction de rappel de téléchargement completes.chrome.downloads.download est appelé lorsque le téléchargement begin avec succès (pas terminé)

La documentation officielle à propos chrome.downloadsis .

Ce n'est pas mon idée originale de la solution, mais j'ai posté ici en espérant qu'il peut être utile à quelqu'un.

Answer 3

Il n'y a aucun moyen que je connaisse pour sauver silencieusement des fichiers sur le disque de l'utilisateur, qui est ce qu'il semble que vous espérez faire. Je pense que vous pouvez demander des fichiers à sauvegarder un à la fois (invitant l'utilisateur à chaque fois) en utilisant quelque chose comme:

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

Si vous voulez inviter uniquement l'utilisateur une fois, vous pouvez saisir toutes les images en silence, les zip dans un paquet, puis demandez à l'utilisateur de télécharger cela. Cela pourrait signifier faire XmlHttpRequest sur tous les fichiers, les passer comme un éclair en Javascript, les transférer vers une zone de mise en scène, puis demander à l'utilisateur si elles souhaitent télécharger le fichier zip. Cela semble absurde, je sais.

Il y a des options de stockage local dans le navigateur, mais ils ne sont que pour l'usage du développeur, dans le bac à sable, pour autant que je sache. (Par exemple Gmail mise en cache hors ligne.) Voir les annonces récentes de Google comme celui-ci .

Answer 4

Pensez à utiliser le fonctionnalités HTML5 FileSystem qui rendent l'écriture de fichiers possibles à l'aide 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 un XMLHttpRequest pour saisir l'objet, qui dans ce cas est présumé être une image, puis fait un ObjectURL à lui, un lien vers ce ObjectUrl, et clique sur le lien imaginaire.

Answer 6

Depuis l'auto-stop Javascript sur votre ordinateur avec des pages Web à partir de presque où , il serait dangereux de lui donner la possibilité d'écrire sur votre disque.

Il est pas permis. Pensez-vous que l'extension Chrome nécessite une interaction utilisateur? Sinon, il pourrait tomber dans la même catégorie.