构建镀铬扩展程序以上传图像(从剪贴板)

Question

我想编写一个简单的chrome扩展来替换以下一系列步骤,我必须经常为大学做这些步骤:

1. 制作一些东西的截图
2. 编辑Paint中的截图
3. 将unnamend.png保存到硬盘
4. 将unnamed.png上传到ima​​geshack.us/pic-upload.de或任何其他网站
5. 与他人分享图像链接.

我不关心使用哪个图片上传服务,我只想自动化这个用例以节省时间(我已经红色并且已经开始使用chrome扩展并检查了他们的API,但就是这样,这个页面:http://farter.users.sourceforge.net/blog/2010/11/20/accessing-operating-system-clipboard-in-chromium-chrome-extensions/似乎很有用,但我不能让它覆盖我的系统剪贴板 - 而且我找不到可以帮助我的教程.

Answer 1

为了回答你的问题,我会给你一些提示和资源来做你想做的事:

1 - 使用Chrome扩展程序API的屏幕截图

您可以使用chrome.tabs.captureVisibleTab来截取您看到的内容.

chrome.tabs.captureVisibleTab(null, {format:'png'}, function(dataURL) {
  // Your image is in the dataURL
});

2 - 使用HTML5编辑屏幕截图

好吧,这是一个棘手的问题,你为什么要使用Paint,同时你可以使用HTML5或Web服务？如果你想使用paint,那么这样做的唯一方法就是通过NPAPI(C++).实际上暴露一些东西是非常气馁的,因为它给用户带来了额外的安全风险.它需要手动审查提交和安装时的致命警告.

为什么不能使用HTML5 Canvas来修改屏幕截图？甚至,使用Picnik在线照片编辑http://www.picnik.com/

var image_buffer = document.createElement('img');
image_buffer.src = dataURL; // From #1 capture tab
image_buffer.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image_buffer, 0, 0);

  // Draw something extra ontop of it such as a circle.
  ctx.beginPath();
  ctx.arc(0, 0, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

  // Convert that back to a dataURL
  var dataURL = canvas.toDataURL('image/png');

  // Base64 image only.
  var image64 = dataURL.replace(/data:image\/png;base64,/, '');
};

3 - 将图像保存到硬盘

这是另一个棘手的问题,现在,如果您使用像Picnick这样的"服务",那么您可以使用他们的保存实用程序保存到您的硬盘,否则您可以使用当前正在开发的HTML5 FileWriter API.

如果您真的想使用MSPaint路线,那么您需要使用如上所述的NPAPI.

但是,当您使用HTML5时,您可以执行以下操作,但它仍然在规范的早期:

var bb = new BlobBuilder();
bb.append(image64); // From #2 when done editing.
var blob = bb.getBlob(); 
location.href = createObjectURL(blob);

4 - 将图像上传到在线图像服务

您也可以使用http://imgurl.com上传,它有一个可以使用的简洁API.您需要知道的只是普通的旧javascript,只需发送XHR请求即可请求服务并与之通信.

要做到这一点,只需使用他们的API:

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://api.imgur.com/2/upload.json?key=' + apikey, true); 
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.onreadystatechange = function() {
  if (this.readyState == 4) {
      var response = JSON.parse(xhr.response);
      if (response.error) {
        alert('Error: ' + response.error.message);
        return;
      }
      var image_url = response.upload.links.original;
  }
};
xhr.send(image64); // From #2 where we edit the screenshot.

5 - 与他人分享图像链接.

同上,这只是普通的旧javascript,取决于服务(Facebook,Twitter,Buzz),你使用他们的API或其他服务已经为你分享图像.

注意:

我想说进行此扩展的最佳方法是使用HTML5.您可以使用XHR与外部网站进行通信,使用Canvas编辑照片,使用FileWriter将其保存到磁盘.

我非常不鼓励NPAPI方法进行此类扩展,因为它不需要.另外,如果您通过NPAPI,则需要跨平台并为每个浏览器开发插件.