Загрузите файл в расширение Google Chrome

Недавно я разработал расширение Chrome, которое извлекает контент со страницы и отправляет его на сервер.

Был использован следующий подход:

1. Загрузка файлов: например, получить свойство src элемента .
2. Извлеките файл из Cache – используйте XMLHttpRequest со справочной страницы.
3. Для обработки загрузки используйте веб-рабочий на исходной странице.

Обратите внимание: чтобы взять контрольную сумму изображения, можно использовать Crypto-JS: MD5 . Пример (где xhr – объект XMLHttpRequest с arraybuffer responseType установленным в arraybuffer , см. Демонстрацию Worker):

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

Полный пример

Скрипт контента

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

Фоновый скрипт (с рабочим)

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

Веб-рабочий

 // 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 для веб-работников POLYFILL

Веб-сотрудники не поддерживают объект FormData , используемый для передачи multipart/form-data . Вот почему я написал для него полипол. Этот код должен быть включен в веб-рабочий, используя importScripts('xhr2-FormData.js') .

Исходный код polyfill доступен по адресу https://gist.github.com/Rob–W/8b5adedd84c0d36aba64

Файл манифеста:

 { "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://*/*"] } 

Соответствующая документация

• Передача сообщений ^{Google Chrome Extensions}
• chrome.runtime.onMessage ^{Расширения Google Chrome}
• ^{Спецификация} XMLHttpRequest Level 2 ^W3c
• FormData (XHR2) ^MDN
• Ответы массива ArrayBuffer (XHR2) ^HTML5 (примечание: ответы типа arraybuffer устарели в пользу типизированных массивов, полиполк обновлен, чтобы отразить это изменение)

Простейшие решения, похоже, для вашего расширения для отправки URI файла на ваш сервер, а затем ваш серверный код загрузит его со страницы на сервер и обработает.

Создайте сценарий на стороне сервера, например, URI http://mysite.com/process.php?uri=%5Bfile), который обработает данный файл. Используйте AJAX для вызова этого URL-адреса (подробнее на странице http://code.google.com/chrome/extensions/xhr.html ). Сценарий вернет обработанный файл, который вы затем можете использовать в своем расширении.

Вы должны проверить следующее:

chrome.extension.sendRequest () и chrome.extension.onRequest ()

Подробнее о них вы можете узнать здесь: http://code.google.com/chrome/extensions/messaging.html

В основном вы будете настраивать страницу на сервере, чтобы следить за расширением Chrome, и после подключения вы должны будете иметь javascript, который будет выполнять задачу загрузки для вас.

Я не проверял это, но он может заставить вас, где вам нужно. Также вы можете прочитать раздел «Долгоживущие соединения».

Удачи