谷歌浏览器重新托管图像扩展 [英] Google chrome rehost image extension

问题描述

我想要一个 Google Chrome 扩展程序来重新托管我点击的任何图片.

I would like to have a Google Chrome extension to rehost any image I click on.

例如，我有一个带有图像的 html 文档，使用 <img> 标签.我想要一个扩展程序，它将将该图像重新托管到另一个图像主机.我在 imgur 扩展程序 中看到了类似的内容.我不知道我应该从哪里开始或者我应该怎么做才能完成这项工作.

For example, I have a html document with images using <img> tag. I want to have a extension which will rehost that image to an another image host. I saw something like this with the imgur extension. I have no clue where should i begin or what should I do to get this work.

提前感谢您的帮助！

推荐答案

首先，你必须获得一个 API 键.如果每小时最多上传 50 次就足够了，而您又不想注册帐户，请获取匿名 API 密钥.

First, you have to get an API key. If a maximum of 50 uploads per hour is sufficient, and you don't want to register an account, get an anonymous API key.

我建议使用 chrome.contextMenus API.

Instead of binding a left-click event handler, which may interfere with a page, I suggest to add a contentmenu entry using the 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):

Put the following code in your background script (using 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.

You could display the URL to the user (simpliest method is prompt("Here's the URL:",url);, or use localStorage to map the previous URL to the new host and/or use the chrome.webRequest API to redirect the image requests to the new host.

使用不同的网络服务/图像主机上传图片.http://picstore.eu/ 不提供 API，因此我们以编程方式提交表单.

Using a different web service / image host to upload the picture. http://picstore.eu/ does not provide an API, so we submit a form programatically.

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

这篇关于谷歌浏览器重新托管图像扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！