Carica un file in un’estensione di Google Chrome

Sto scrivendo un’estensione per Chrome, e ho bisogno di caricare un file dalla pagina che l’utente è attualmente sul mio server per essere elaborato, non riesco a capire come caricare il file però. Ho preso in considerazione solo il passaggio del collegamento al server e il download del file da parte del server, tuttavia se il sito richiede l’autenticazione, ciò non funzionerà. È ansible caricare un file tramite un’estensione di Chrome sul mio server?

Di recente ho sviluppato un’estensione di Chrome che recupera il contenuto da una pagina e lo invia al server.

È stato utilizzato il seguente approccio:

  1. Download di file: ottieni la proprietà src di un elemento , ad esempio.
  2. Scarica il file dalla cache – usa XMLHttpRequest dalla pagina di sfondo.
  3. Utilizzare un web worker nella pagina di sfondo per gestire il caricamento.

Nota a margine, per prendere il checksum dell’immagine, può essere usato Crypto-JS: MD5 . Esempio (dove xhr è l’object XMLHttpRequest con responseType impostato su arraybuffer , vedere Demo Worker):

 var md5sum = Crypto.MD5( new Uint8Array(xhr.response) ); 

Esempio completo

Script di contenuto

 // Example: Grab the first  from the document if it exists. var img = document.images[0]; if (img) { // Send the target of the image: chrome.runtime.sendMessage({method: 'postUrl', url: img.src}); } 

Script di background (con Worker)

 chrome.runtime.onMessage.addListener(function(request) { if (request.method == 'postUrl') { var worker = new Worker('worker.js'); worker.postMessage(request.url); } }); 

Web Worker

 // Define the FormData object for the Web worker: importScripts('xhr2-FormData.js') // Note: In a Web worker, the global object is called "self" instead of "window" self.onmessage = function(event) { var resourceUrl = event.data; // From the background page var xhr = new XMLHttpRequest(); xhr.open('GET', resourceUrl, true); // Response type arraybuffer - XMLHttpRequest 2 xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (xhr.status == 200) { nextStep(xhr.response); } }; xhr.send(); }; function nextStep(arrayBuffer) { var xhr = new XMLHttpRequest(); // Using FormData polyfill for Web workers! var fd = new FormData(); fd.append('server-method', 'upload'); // The native FormData.append method ONLY takes Blobs, Files or strings // The FormData for Web workers polyfill can also deal with array buffers fd.append('file', arrayBuffer); xhr.open('POST', 'http://YOUR.DOMAIN.HERE/posturl.php', true); // Transmit the form to the server xhr.send(fd); }; 

FormData per i dipendenti Web POLYFILL

I Web worker non supportano nativamente l’object FormData , utilizzato per trasmettere multipart/form-data . Ecco perché ho scritto un polyfill per questo. Questo codice deve essere incluso nel web worker, usando importScripts('xhr2-FormData.js') .

Il codice sorgente del polyfill è disponibile su https://gist.github.com/Rob–W/8b5adedd84c0d36aba64

File manifest:

 { "name": "Rob W - Demo: Scraping images and posting data", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["contentscript.js"] } ], "background": { "scripts": ["background.js"] }, "permissions": ["http://*/*", "https://*/*"] } 

Documentazione pertinente

  • Messaggio che passa Google Chrome Extensions
  • chrome.runtime.onMessage Estensioni di Google Chrome
  • XMLHttpRequest Specifica del livello 2 W3c
  • FormData (XHR2) MDN
  • ArrayBuffer responses (XHR2) HTML5 rocks (nota: le risposte dell’arraybuffer sono deprecate a favore degli array digitati, il polyfill è stato aggiornato per riflettere questa modifica)

Le soluzioni più semplici sembrano essere per il tuo interno per inviare l’URI del file al tuo server, e quindi il tuo codice lato server lo scaricherà dalla pagina nel server e lo elaborerà.

Crea uno script sul lato server come http://mysite.com/process.php?uri=%5Bfile l’URI va qui] che elaborerà il file specificato. Usa AJAX per chiamare questo URL (maggiori informazioni su http://code.google.com/chrome/extensions/xhr.html ). Lo script restituirà il file elaborato, che potrai utilizzare nella tua estensione.

Dovresti controllare quanto segue:

chrome.extension.sendRequest () e chrome.extension.onRequest ()

Puoi leggere ulteriori informazioni su di loro qui: http://code.google.com/chrome/extensions/messaging.html

Fondamentalmente configurerai la pagina sul server per controllare l’estensione di Chrome e, una volta connessa, dovrai disporre di un javascript che eseguirà l’operazione di caricamento per te.

Non l’ho provato, ma potrebbe portarti dove devi essere. Inoltre, potresti voler leggere la sezione delle connessioni a lunga vita.

In bocca al lupo