Faire une extension Chrome Télécharger un fichier

Je crée une extension qui va télécharger un fichier mp3 sur un site Web. J'essaie de le faire en créant un nouvel onglet avec le lien vers le fichier mp3, mais Chrome continue de l'ouvrir dans le lecteur au lieu de le télécharger. Est-ce que je peux créer un pop-up pour demander à l'utilisateur de "sauvegarder-comme" le fichier?

Avance rapide 3 ans, et maintenant Google Chrome offre chrome.downloads API (depuis Chrome 31).

Après avoir déclaré l'autorisation "downloads" dans le manifeste, on peut lancer un téléchargement avec cet appel:

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

Pour plus d'options (c.-à-d., La boîte de dialogue Enregistrer sous, écrasant les fichiers existants, etc.), consultez la documentation .

J'ai utilisé une variation de la solution ici

 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 } 

Une chose que vous devez garder à l'esprit est que ce code doit être exécuté sur la page et non sur votre extension, sinon l'utilisateur ne verra pas l'action de téléchargement que Chrome utilise. Le téléchargement se produira toujours et vous pourrez le voir dans l'onglet de téléchargement, mais ils ne verront pas le téléchargement réel se produire.

Modifier (après réflexion sur l'exécution de votre code sur la page de contenu):

La façon dont vous faites une action sur la page de contenu plutôt que votre extension est d'utiliser Chrome "message passing" . Fondamentalement, vous passez un message de votre extension (qui est presque comme une page distincte) vers la page de contenu avec laquelle l'extension fonctionne. Vous avez alors un auditeur que votre extension a été injectée dans la page de contenu qui réagit au message et fait le téléchargement. Quelque chose comme ça:

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

Il s'agit d'une version légèrement modifiée de la réponse de @Steve Mc qui en fait une fonction généralisée qui peut facilement être copiée et utilisée comme elle est:

 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 } 

Je l'ai fait comme suit dans le code Appmator sur Github .

L'approche de base est de construire votre Blob, mais vous voulez (Chrome a une réponseBlob sur XmlHttpRequest afin que vous puissiez l'utiliser), créez un iframe (caché, display:none ) puis affectez le src de l'iframe pour être le Blob.

Cela créera un téléchargement et l'enregistrera dans le système de fichiers. Le seul problème est que vous ne pouvez pas encore définir le nom de fichier.

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

Un exemple d'utilisation de la réponse de XmlHttpRequestBlob (voir: 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); } 

Voici un moyen concis de télécharger un fichier en utilisant l'autorisation "Téléchargements" dans le Chrome manifeste en utilisant la solution @Xan et @ 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" });