Google chrome rehost圖片擴展

Question

我想要一個Google Chrome瀏覽器擴展程序來重新放置任何我點擊的圖像。

例如，我有一個使用<img>標記的圖像的html文檔。我想要一個擴展名，將該映像重新映射到另一個映像主機。我看到類似imgur extension的東西。我不知道應該從哪裏開始，或者我該怎麼做才能完成這項工作。

感謝您的幫助提前！

Answer 1

首先，您必須獲得API密鑰。如果每小時最多50次上傳就足夠了，並且您不想註冊帳戶，get an anonymous API key。

我建議使用chrome.contextMenus API添加一個contentmenu條目，而不是綁定可能干擾頁面的左鍵單擊事件處理程序。

Manifest file，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://*/*" 
    ] 
} 

將下面的代碼在你的background script（使用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給用戶（simpliest方法是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(); 
    } 
});