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

Я пишу расширение для Chrome, и мне нужно загрузить файл со страницы, на которой пользователь в настоящее время находится на моем сервере для обработки, но я не могу понять, как загрузить файл. Я считал, что просто передаю ссылку на сервер и сервер загружает файл, однако, если сайт требует аутентификации, это не сработает. Возможно ли загрузить файл через расширение 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, который будет выполнять задачу загрузки для вас.

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

Удачи

  • загрузка нескольких файлов с использованием того же имени ввода в django
  • jQuery загрузка изображений с полным обратным вызовом
  • открыть ресурс с относительным путем в java
  • Загрузка Jquery с тегами скриптов
  • WPF загружает анимацию в отдельный stream пользовательского интерфейса? (С #)
  • Rails 3 - загрузка файлов в общий каталог
  • Загрузка файлов через AJAX в JQuery
  • Java - загрузка DLL по относительному пути и скрыть их внутри банки
  • Как загрузить пакеты в R автоматически?
  • Для начальной загрузки требуется внешняя поддержка
  • Как уменьшить размер файла изображения перед загрузкой на сервер
  • Давайте будем гением компьютера.