Расширение Google Chrome для повторного размещения изображения

Я хотел бы иметь расширение Google Chrome для повторного размещения любого изображения, на которое я нажимаю.

Например, у меня есть html-документ с изображениями, использующими тег <img>. Я хочу иметь расширение, которое будет повторно размещать это изображение на другом хосте изображений. Я видел нечто подобное с расширением imgur. Я понятия не имею, с чего мне начать или что я должен сделать, чтобы получить эту работу.

Заранее спасибо за помощь!


person rsz    schedule 07.07.2012    source источник


Ответы (1)


Во-первых, вы должны получить ключ API. Если достаточно максимум 50 загрузок в час и вы не хотите регистрировать учетную запись, получите анонимный ключ API. .

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

файл манифеста, manifest.json:

{
  "name": "Rehost img at imgurl",
  "version": "1.0",
  "manifest_version": 2,
  "background": {"scripts":["background.js"]},
  "permissions": [
    "contextMenus",
    "http://*/*", // This permission is needed to fetch URLs
    "https://*/*"
  ]
}

Поместите следующий код в свой фоновый скрипт (используя chrome.contextMenus.create):

// background.js
chrome.contextMenus.create({
    title: "Rehost image",
    contexts: ["image"],
    onclick: function(info) {
        // Get the image from cache:
        var x = new XMLHttpRequest();
        x.onload = function() {
            // Create a form
            var fd = new FormData();
            fd.append("image", x.response); // x.response = blob
            fd.append("key", "API KEY HERE");

            // Now, upload the image
            var y = new XMLHttpRequest();
            y.onload = function() {
                var url = JSON.parse(xhr.responseText).upload.links.imgur_page;
                // Now, do something with the new url.
            };
            y.open('POST', 'http://api.imgur.com/2/upload.json');
            y.send(fd);
        };
        x.responseType = 'blob';    // Chrome 19+
        x.open('GET', info.srcUrl); // <-- info.srcUrl = location of image
        x.send();
    }
});

Вы можете отобразить URL-адрес пользователю (самый простой способ — prompt("Here's the URL:",url);, или использовать localStorage для сопоставления предыдущего URL-адреса с новым хостом и/или использовать chrome.webRequest API для перенаправления запросов изображений на новый хост.


Использование другого веб-сервиса/хостинга изображений для загрузки изображения. http://picstore.eu/ не предоставляет API, поэтому мы отправляем форму программно.

// background.js
chrome.contextMenus.create({
    title: "Rehost image",
    contexts: ["image"],
    onclick: function(info) {
        // Get the image from cache:
        var x = new XMLHttpRequest();
        x.onload = function() {
            var file_name = info.srcUrl.split(/[?#]/)[0].split('/').pop();
            var fd = new FormData();
            fd.append("imgUrl", "");
            fd.append("fileName[]", file_name);
            fd.append("Search files", "Browse");
            fd.append("file[]", x.response, file_name);
            fd.append("alt[]", file_name.replace(/[-_]/g, " ").replace(/\.[^.]*$/, ""));
            //fd.append("private[0]", "1"); // "Private images.."
            //fd.append("shorturl[0]", "1"); // "Create short URLs using b54"
            fd.append("new_height[]", "");
            fd.append("new_width[]", "");
            fd.append("submit", "Upload");
            var y = new XMLHttpRequest();
            y.responseType = 'document'; // Chrome 18+ (but blob is 19+)
            y.onload = function() {
                var url = y.response.getElementById('codedirect').value;
                prompt("URL:", url);
                // Now, do something with the new url.
            };
            y.open('POST', 'http://picstore.eu/upload.php');
            y.send(fd);
        };           
        x.responseType = 'blob'; // Chrome 19+
        x.open('GET', info.srcUrl); // <-- info.srcUrl = location of image
        x.send();
    }
});
person Rob W    schedule 08.07.2012
comment
Дело в том, что мне нужно рехостить не на imgur, а на моем собственном сайте для размещения изображений. Это основано на коде будущего хоста изображений, который я бы реализовал. - person rsz; 08.07.2012
comment
@ user1430562 Точная реализация зависит от API, предлагаемого вашим хостом. Основное остается неизменным: 1. Получить изображение из кеша 2. Отправить двоичные данные в веб-службу с помощью объекта FormData. - person Rob W; 08.07.2012
comment
И если у конкретного хоста изображений нет API, я не могу этого сделать? - person rsz; 08.07.2012
comment
@ user1430562 Да, можешь. FormData имитирует отправку формы. .append('blabla',Blob/File) похож на <input type="file" name="blabla">. .append('foo','bar') эквивалентно <input name='foo' value='bar'>. С минимальными усилиями вы сможете создать и отправить форму с помощью FormData. - person Rob W; 08.07.2012
comment
Да, но я никогда не кодировал этот синтаксис, поэтому я действительно не знаю, как заставить его работать. - person rsz; 08.07.2012
comment
Вы должны были упомянуть об этом сразу... Добавьте больше деталей к вопросу о веб-сервисе и вашем уровне знаний, и я мог бы попробовать еще раз. - person Rob W; 08.07.2012
comment
У меня есть это на index.php ‹form enctype=multipart/form-data action=upload.php method=post class=upform name=upload id=upload› ‹input type=text id=fileName name=fileName[] class=text_input long readonly=readonly› ‹/form› Итак, это отправка данных в upload.php. Но, как я думаю, было бы проще, если бы вы могли видеть это: [ссылка]picstore.eu Это именованный хостинг изображений, на который я хотел бы загружать изображения с помощью расширения Chrome. И есть источник: [ссылка]codefuture.co.uk/download/?id =6WKO - person rsz; 08.07.2012
comment
Спасибо за это, я создал на своем локальном компьютере папку, которую я туда поместил: manifest.json и background.js. .com URL и поэтому он не работает - person rsz; 09.07.2012
comment
@ user1430562 Обновленный ответ с кодом. Я успешно протестировал расширение с изображением граватара внизу ответа. - person Rob W; 09.07.2012