Google Chrome重新推介图片扩展程序 [英] Google chrome rehost image extension
问题描述
我希望有一个Google Chrome浏览器扩展程序来重新放置任何我点击的图片。 b
$ b
例如，我使用 感谢您的帮助！< img> 标签为图片提供了html文档。我想要一个扩展名，将该映像重新映射到另一个映像主机。我使用来看到类似的情况。我不知道应该从哪里开始，或者我该怎么做才能完成这项工作。
我不建议使用可能干扰页面的左键单击事件处理程序，而是使用 chrome.contextMenus API。
清单文件， manifest.json ：
{
name：Rehost img at imgurl，
version：1.0，
manifest_version：2，
background：{scripts：[background.js]}，
权限：[
contextMenus，
http：// * / *，//需要此权限才能获取URL
https：// * / *
}
将以下代码放入后台脚本（使用 chrome.contextMenus.create ）：
// background.js
chrome.contextMenus.create（{
title：Rehost image，
contexts：[ image]，
onclick：function（info）{
//从缓存中获取图像：
var x = new XMLHttpRequest（）;
x.onload = function（）{
//创建表单
var fd = new FormData（）;
fd.append（image，x.response）; // x.response = blob
fd.append（key，API KEY HERE）;
//现在，上传图片
var y = new XMLHttpRequest（）;
y.onload = function（）{
var url = JSON.parse（xhr.responseText）.upload.links.imgur_page;
//现在，用新的网址做一些事情。
};
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 =图片的位置
x.send（）;
}
}）;
您可以将URL显示给用户（最简单的方法是 prompt（这里是URL：，url）; ，或者使用 localStorage 将先前的URL映射到新主机和/或使用 chrome.webRequest 重定向API图像请求到新的主机。
使用不同的网络服务/图像主机上传图片 http://picstore.eu/ 不提供API，所以我们以编程方式提交表单。
// background.js
chrome.contextMenus.create（{
title：Rehost image，
contexts：[ （）;
onclick：function（info）{
//从缓存中获取图片：
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（搜索文件，浏览）;
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）; //使用b54创建短网址
fd.append（new_height []，）;
fd.append（new_width []，）;
fd.append（submit，上传）;
var y = new XMLHttpRequest（）;
y.responseType ='document'; // Chrome 18+（但blob为19+）
y.onload = function（）{
var url = y.response.getElementById（'codedirect'）。value;
提示符（URL：，url）;
//现在，用新的网址做一些事情。
};
y.open（'POST'，'http://picstore.eu/upload.php'）;
y.send（fd）;
};
x.responseType ='blob'; // Chrome 19+
x.open（'GET'，info.srcUrl）; //< - info.srcUrl =图片的位置
x.send（）;
}
}）;
I would like to have a Google Chrome extension to rehost any image I click on.
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.
Thanks for your help in advance!
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.
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 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://*/*"
]
}
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();
}
});
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.
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();
}
});
这篇关于Google Chrome重新推介图片扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
