Estensione di immagine di Google Chrome per il rehost

Mi piacerebbe avere un’estensione Google Chrome per rehostare qualsiasi immagine su cui clicco.

Ad esempio, ho un documento html con immagini che usano il tag . Voglio avere un’estensione che re-ospiterà quell’immagine ad un altro host di immagini. Ho visto qualcosa di simile con l’ estensione imgur . Non ho idea di dove dovrei iniziare o cosa dovrei fare per ottenere questo lavoro.

Grazie per il vostro aiuto in anticipo!

Innanzitutto, devi ottenere una chiave API . Se è sufficiente un massimo di 50 caricamenti all’ora e non si desidera registrare un account, ottenere una chiave API anonima .

Invece di associare un gestore di eventi del tasto sinistro del mouse, che potrebbe interferire con una pagina, suggerisco di aggiungere una voce chrome.contextMenus usando l’API chrome.contextMenus .

File manifest.json , 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://*/*" ] } 

Inserisci il seguente codice nel tuo script in background (usando 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(); } }); 

È ansible visualizzare l'URL per l'utente (il metodo più semplice è prompt("Here's the URL:",url); oppure utilizzare localStorage per mappare l'URL precedente al nuovo host e / o utilizzare l'API chrome.webRequest per redirect l'immagine richieste al nuovo host.


Utilizzando un servizio Web / host di immagini diverso per caricare l'immagine. http://picstore.eu/ non fornisce un'API, quindi inviamo un modulo in modo programmatico.

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