谷歌浏览器重新托管图像扩展

Posted 2023-03-14

【中文标题】谷歌浏览器重新托管图像扩展

【英文标题】：Google chrome rehost image extension

【发布时间】：2012-07-07 21:10:21

【问题描述】：

我想要一个谷歌浏览器扩展来重新托管我点击的任何图像。

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

提前感谢您的帮助！

【参考方案1】：

首先，您必须获得一个API 密钥。如果每小时最多上传 50 次就足够了，并且您不想注册帐户，get an anonymous API key。

我建议使用chrome.contextMenus API 添加一个内容菜单条目，而不是绑定可能会干扰页面的左键单击事件处理程序。

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（最简单的方法是 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();
    
);

【讨论】：

重点是我不需要在 imgur 上重新托管，而是在我自己的图像托管站点上。这由我将实现的代码未来图像主机提供支持。

@user1430562 确切的实现取决于您的主机提供的 API。基本保持不变：1. 从缓存中检索图像 2. 使用 FormData 对象将二进制数据提交到 Web 服务。

如果特定的图像主机没有任何api那么我不能这样做吗？

@user1430562 是的，你可以。 FormData 模拟表单提交。 .append('blabla',Blob/File) 类似于 <input type="file" name="blabla">。 .append('foo','bar') 等价于 <input name='foo' value='bar'>。通过最少的努力，您应该能够使用FormData 创建和提交表单。

是的，但我从来没有用这种语法编码，所以我真的不知道如何让它工作