image - Google chrome リホスト画像拡張機能

Question

クリックした画像を再ホストするための Google Chrome 拡張機能が必要です。

たとえば、<img>タグを使用した画像を含む html ドキュメントがあります。そのイメージを別のイメージ ホストに再ホストする拡張機能が必要です。imgur extensionでこのようなものを見ました。この仕事を得るためにどこから始めるべきか、何をすべきかわかりません。

事前にご協力いただきありがとうございます。

Answer 1

まず、APIキーを取得する必要があります。1 時間あたり最大 50 のアップロードで十分であり、アカウントを登録したくない場合は、匿名 API キーを取得します。

ページに干渉する可能性のある左クリック イベント ハンドラーをバインドする代わりに、chrome.contextMenusAPI を使用して contentmenu エントリを追加することをお勧めします。

マニフェスト ファイル、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.webRequestAPI を使用してイメージ リクエストを新しいホストにリダイレクトすることです。

---

別の Web サービス / 画像ホストを使用して画像をアップロードする。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();
    }
});