Extensión de Chrome: cómo guardar un archivo en el disco

Question

Actualmente estoy creando una extensión para google chrome que puede guardar todas las imágenes o enlaces a las imágenes en el disco duro.

El problema es que no sé cómo guardar el archivo en el disco con JS o con Google Chrome Extension API.

¿Tienes una idea?

Answer 1

Puede usar HTML5 FileSystem features para escribir en el disco usando la API Download. Esa es la única forma de descargar archivos en el disco y es limitada.

Puede echar un vistazo al complemento NPAPI. Otra forma de hacer lo que necesita es simplemente enviar una solicitud a un sitio web externo a través de XHR POST y luego otra solicitud GET para recuperar el archivo que aparecerá como un diálogo de guardar archivo.

Por ejemplo, para la extensión de mi navegador My Hangouts Creé una utilidad para descargar una foto de HTML5 Canvas directamente al disco. Puede echar un vistazo a la código aquí capture_gallery_downloader.js el código que hace esto es:

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 desea que la aplicación de convertir un URI a un blob en HTML5 aquí es cómo lo hice:

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

Luego, después de que el usuario haga clic en el botón de descarga, usará la API de archivo HTML5 "descargada" para descargar el URI de blob en un archivo.

Answer 2

Dado que Javascript hace autostop en su computadora con páginas web de aproximadamente en cualquier parte, sería peligroso darle la capacidad de escribir en su disco.

No está permitido. ¿Estás pensando que la extensión de Chrome requerirá la interacción del usuario? De lo contrario, podría caer en la misma categoría.

Answer 3

No hay manera de que sepa de guardar en silencio los archivos en la unidad del usuario, que es lo que parece que esperas hacer. Creo que se puede pedir archivos para ser salvo uno a la vez (preguntar al usuario cada vez) usando algo como:

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

Si quería solamente pedir al usuario una vez, usted podría agarrar todas las imágenes en silencio, cópialos en un paquete, luego haz que el usuario descargue eso. Esto podría significar hacer XmlHttpRequest en todos los archivos, comprimirlos en JavaScript, CARGARlos en un área de ensayo y luego preguntarle al usuario si desea descargar el archivo zip. Suena absurdo, lo sé.

Existen opciones de almacenamiento local en el navegador, pero solo para uso del desarrollador, dentro del entorno limitado, hasta donde yo sé. (por ejemplo, almacenamiento en caché sin conexión de Gmail). Consulte los anuncios recientes de Google, como this one.

Answer 4

Considere usar el HTML5 FileSystem features que hace posible la escritura de archivos utilizando Javascript.

Answer 5

Google Webstore
Github

Hice una extensión que hace algo como esto, si alguien aquí todavía está interesada. Utiliza una solicitud XMLHTTP para tomar el objeto, que en este caso se supone que es una imagen, luego crea un ObjectURL, un enlace a ese ObjectUrl y hace clic en el enlace imaginario.

Answer 6

Hace mucho tiempo que deseaba hacer una extensión de cromo para descargar imágenes por lotes. Sin embargo, cada vez que me frustré porque la única opción aparentemente aplicable es NPAPI, que tanto Chrome como Firefox parecen no tener el deseo de mantener por más tiempo.

Sugiero a los que todavía querían implementar la funcionalidad 'guardar-archivo-en-disco' para echar un vistazo a este Stackoverflow post, el comentario debajo de esta publicación me ayuda mucho.

Ahora desde Chrome 31+, el API chrome.downloads se convirtió en estable. Podemos usarlo para descargar archivos por programa. Si el usuario no configuró la opción de avance ask me before every download en la configuración de cromo, podemos guardar el archivo sin pedirle al usuario que confirme.

Esto es lo que yo uso (al fondo de la página de extensión):

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

Aunque es una lástima que todavía cromo no proporciona una Event cuando se complete la descarga. función de devolución de chrome.downloads.download 's se llama cuando la descarga begin éxito (no completó el)

la documentación oficial sobre chrome.downloads es here.

No es mi idea original sobre la solución, pero publiqué aquí con la esperanza de que pueda ser de alguna utilidad para alguien.