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

Question

Я пишу расширение для Chrome, и мне нужно загрузить файл со страницы, на которой сейчас находится пользователь, на мой сервер для обработки, но я не могу понять, как загрузить файл.Я рассмотрел просто передачу ссылки на сервер и загрузку файла с сервера, однако, если сайт требует аутентификации, это не сработает.Можно ли загрузить файл с расширением Chrome на мой сервер?

Answer 1

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

Использовался следующий подход:

1. Загрузка файлов: например, получите свойство src элемента <img>.
2. Получить файл из кеша - используйте XMLHttpRequest со страницы фона.
3. Используйте Web Worker на фоновой странице для обработки загрузки.

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

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

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

Содержимое скрипта

// Example: Grab the first <img> 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);
    }
});

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

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

Исходный код полифилла доступен по 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}
• chrome.runtime.onMessage ^{Google Chrome Extensions}
• XMLHttpRequest Уровень 2 ^{Спецификация W3c}
• FormData (XHR2) ^MDN
• Ответы ArrayBuffer (XHR2) ^{HTML5 пород} (примечание: ответы массив-буфера устарели в пользу типизированных массивов, полифилл был обновлен для отражения этого изменения)

Answer 2

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

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

Answer 3

Вы должны оформить заказ:

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

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

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

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

Гудлак