2

I wanted to write a simple chrome extension in order to substitute the following sequence of steps which i have to do very often for university:

  1. make screenshot of something
  2. edit screenshot in Paint
  3. save unnamend.png to harddrive
  4. upload unnamed.png to imageshack.us/pic-upload.de or any other website
  5. share link of image with others.

I don't care which image upload service to use, i just want automize this use-case in order to save time (I already red and did a getting-started chrome extension and checked out their API, but that's it, this page: http://farter.users.sourceforge.net/blog/2010/11/20/accessing-operating-system-clipboard-in-chromium-chrome-extensions/ seemed useful, but i couldn't make it overwrite my systems clipboard - moreover i can't find a tutorial which helps me further).

John Boker
  • 82,559
  • 17
  • 97
  • 130
dayscott
  • 457
  • 1
  • 6
  • 17
  • I don't know how to write a chrome extension. But I know there is a browser which can do exactly what you want without any extension. You can just right click in the file input box and select "Upload Clipboard Image" to get it to do what you want. Check out this link: http://www.slimbrowser.net/en/upload-clipboard-image.php – Stephen Cheng Nov 06 '13 at 21:16
  • Did you finish building? – Smart Manoj Sep 11 '20 at 07:30

1 Answers1

16

To answer your questions, I will give you some hints and resources to do what you want:

1 - Screenshot using Chrome Extensions API

You can use chrome.tabs.captureVisibleTab to screenshot what you see.

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

2 - Edit Screenshot using HTML5

Well, here is a tricky one, why do you want to use Paint while you can use HTML5 or a web service? If you want to use paint, then the only way doing this is natively through NPAPI (C++). Exposing something natively is really discouraged since it poses additional security risks to users. And it requires manual review for submission and a deadly warning when installing.

Why can't you use HTML5 Canvas to modify the screenshot? Or even, use Picnik online photo editing 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 - Save Image to Hard drive

This is another tricky one, right now, if you use a "service" like Picnick, then you can use their saving utility to save to your harddrive, otherwise you can use HTML5 FileWriter API which is currently being developed.

If you really want to with your MSPaint route, then you would need to use NPAPI as mentioned above.

But when you use HTML5, you can do the following, but it is still early in spec:

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

4 - Upload image to an Online Image Service

You can use http://imgurl.com to upload too, it has a neat API that you can use. All you need to know is plain old javascript, just send an XHR request to request the service and communicate with it.

To do that, just use their 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 - Share link of image with others.

Same as above, this is just plain old javascript, depends on the service (Facebook, Twitter, Buzz), you use their API or another service does that already for you to share the images.

Note:

I would say the best way to do this extension is using HTML5. You can use XHR to communicate to external websites, Canvas to edit the photos, and FileWriter to persist that to disk.

I would highly discourage the NPAPI approach for such extension since it isn't needed. Plus, if you go through NPAPI, you would need to make it cross platform and develop plugins for each browser.

zessx
  • 68,042
  • 28
  • 135
  • 158
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • thank you for you very elaborated answer. First, i want to focus on 4. (and asume that unnamed.png is in the folder of the extension), and this is how my code looks now: i couldn't find something usefull to write in the send(???) statement. – dayscott Dec 29 '10 at 23:00
  • Well, you put your POST data as a parameter in your xhr.send which are parameters of "image" and "key" where image is a base64 encoded string or URL. http://code.google.com/p/imgur-api/wiki/ImageUploading – Mohamed Mansour Dec 29 '10 at 23:44
  • in your posted link we can only see doku for php, java and so on. No javascript, and i couldn't find anything about that in google (searched for "javascript imgur upload") and there is no way i can do associative arrays like in php or java, so i tried kind of to copy the semantics of the java code, but unfortunately it does not work: http://paste-bin.com/view/29e9de82 – dayscott Jan 03 '11 at 16:31
  • dayscott, I see many problems with your code. First of all, you can't encode an image that way, no need to do it like that. The proper way is loading the image in an "image" tag, and using HTML5 Canvas to get the Base64 data out of it. Another thing I found wrong, your 'data' has invalid syntax, you cannot do += in the middle of a string. Your encode64 and decode64 is already built into Chrome. Something like the following should work: https://gist.github.com/763742 If you have more questions, create another stackoverflow question to make it more relevant. – Mohamed Mansour Jan 03 '11 at 18:15
  • I tried your code (https://gist.github.com/763742) but unfortunately it does not work (no alert). I can't see any problem in chrome's debugger though. – dayscott Jan 04 '11 at 10:46
  • Debug it in the inspector to see why it is not working. It works on my end. I get the URL of the uploaded image. Make sure you put your own API Anonymous Key from imgurl. – Mohamed Mansour Jan 04 '11 at 16:39