Я пишу расширение для Chrome, и мне нужно загрузить файл со страницы, на которой пользователь в настоящее время находится на моем сервере для обработки, но я не могу понять, как загрузить файл. Я считал, что просто передаю ссылку на сервер и сервер загружает файл, однако, если сайт требует аутентификации, это не сработает. Возможно ли загрузить файл через расширение Chrome на мой сервер?
Загрузите файл в расширение Google Chrome
Ответ 1
Недавно я разработал расширение Chrome, которое извлекает содержимое со страницы и отправляет его на сервер.
Был использован следующий подход:
- Загрузка файлов: например, получить свойство
src
элемента<img>
. - Извлеките файл из Cache - используйте
XMLHttpRequest
на исходной странице. - Используйте веб-работник на главной странице для обработки загрузки.
Обратите внимание, чтобы взять контрольную сумму изображения, Crypto-JS: MD5. Пример (где xhr
- это объект XMLHttpRequest
с responseType
, установленный на arraybuffer
, см. Демонстрацию Worker):
var md5sum = Crypto.MD5( new Uint8Array(xhr.response) );
Полный пример
Содержимое script
// 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});
}
Фон script (с рабочим)
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
. Вот почему я написал для него polyfill. Этот код должен быть включен в веб-рабочий, используя 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
-
chrome.runtime.onMessage
Расширения Google Chrome -
XMLHttpRequest
Уровень 2 Спецификация W3c -
FormData
(XHR2) MDN - Ответы ArrayBuffer (XHR2) Поля HTML5 (примечание: ответы arraybuffer устарели в пользу типизированных массивов, polyfill был обновлен, чтобы отразить это изменение).
Ответ 2
Простейшие решения, как представляется, для вашего расширения для отправки URI файла на ваш сервер, а затем ваш серверный код будет загружать его со страницы на сервер и обрабатывать.
Создайте серверную часть script, например http://mysite.com/process.php?uri=[file URI), которая обработает данный файл. Используйте AJAX для вызова этого URL-адреса (подробнее на http://code.google.com/chrome/extensions/xhr.html). script вернет обработанный файл, который вы затем можете использовать в своем расширении.
Ответ 3
Вы должны проверить следующее:
chrome.extension.sendRequest() и chrome.extension.onRequest()
Подробнее о них вы можете узнать здесь: http://code.google.com/chrome/extensions/messaging.html
В основном вы будете настраивать страницу на сервере, чтобы следить за расширением Chrome, и после их подключения вам понадобится javascript, который будет выполнять задачу загрузки для вас.
Я не тестировал это, но он может получить вас там, где вам нужно. Также вы можете прочитать раздел "Долгоживущие соединения".
Гудлак