javascript - how - Extensión de Chrome: cómo guardar un archivo en el disco
how to create extensions for chrome (6)
Actualmente estoy creando una extensión para Google Chrome que puede guardar todas las imágenes o enlaces a imágenes en el disco duro.
El problema es que no sé cómo guardar el archivo en el disco con JS o con la API de extensión de Google Chrome.
¿Tienes una idea?
Considere usar las características de HTML5 FileSystem que hacen que escribir en archivos sea posible usando Javascript.
Debido a que el enganche de Javascript se dirige a su computadora con páginas web de casi cualquier lugar , 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.
Hace 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 aquellos que aún desean implementar la funcionalidad ''guardar archivo en disco'' para echar un vistazo a esta publicación de , el comentario debajo de esta publicación me ayuda mucho.
Ahora desde Chrome 31+, la API chrome.downloads volvió estable. Podemos usarlo para descargar archivos por programa. Si el usuario no configuró la opción ask me before every download opción de avance de ask me before every download en la configuración de cromo, podemos guardar el archivo sin ask me before every download al usuario que confirme.
Esto es lo que uso (en la página de fondo de la 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 Chrome todavía no proporcione un Event cuando la descarga se complete. chrome.downloads.download la función de devolución de llamada de chrome.downloads.download cuando la descarga begin éxito (no se completa)
La documentación oficial sobre chrome.downloads está here .
No es mi idea original sobre la solución, pero publiqué aquí con la esperanza de que pueda ser útil para alguien.
No hay forma de que sepa de guardar en silencio los archivos en el disco del usuario, que es lo que parece que esperas hacer. Creo que puede PEDIR que los archivos se guarden de a uno por vez (lo que le induce al usuario cada vez) usando algo como:
function saveAsMe (filename)
{
document.execCommand(''SaveAs'',null,filename)
}
Si solo desea solicitarle al usuario una vez, puede tomar todas las imágenes en silencio, comprimirlas en un paquete, y luego hacer 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é.
Hay opciones de almacenamiento local en el navegador, pero por lo que yo sé, son solo para uso del desarrollador, dentro del entorno limitado. (por ejemplo, el almacenamiento en caché sin conexión de Gmail). Vea los anuncios recientes de Google como este .
Puede usar las características de HTML5 FileSystem para escribir en el disco utilizando Download API. Esa es la única forma de descargar archivos en el disco y es limitada.
Puedes echarle un vistazo al plugin 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. Puedes echar un vistazo al código aquí capture_gallery_downloader.js el código que hace eso 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 la implementación de la conversión de 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 blob en un archivo.
Hice una extensión que hace algo como esto, si alguien aquí todavía está interesado. Utiliza un XMLHTTPRequest 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.