Question

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

制作某些内容的屏幕截图

在Paint
中编辑屏幕截图
将unnamend.png保存到harddrive

将unnamed.png上传到imageshack.us/pic-upload.de或任何   其他网站

与他人分享图片链接。

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

Answer 1

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

1 - 使用Chrome Extensions 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，你需要跨平台并为每个浏览器开发插件。

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

1 个答案:

1 - 使用Chrome Extensions API的屏幕截图

2 - 使用HTML5编辑屏幕截图

3 - 将图像保存到硬盘

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

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