Creating a Screenshot Plugin

Question

Does anyone have a good tutorial on creating a simple screen capture plugin for Firefox and/or Chrome?

Some sample code to get you going would be found in the source of https://addons.mozilla.org/en-us/firefox/addon/tab-preview/ — Tyler, Jun 05 '11 at 23:30

score 5 · Answer 1 · answered Jun 06 '11 at 16:58

Here's a snippet for Firefox. In your overlay XUL add:

    <html:canvas id="my-canvas" style="display: none;" />

Then in your overlay javascript, listen for new document loads and this snippet will save the screenshot to a file:

    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');

    //Find the window dimensions
    canvas.height = doc.defaultView.innerHeight; //doc is the content document that you listened for
    canvas.width = doc.defaultView.innerWidth;

    context.drawWindow(doc.defaultView, 0, 0, canvas.width, canvas.height, "rgba(0,0,0,0)");

    //Create a data url from the canvas
    var dataUrl = canvas.toDataURL("image/png");

Read about nsiIOService and nsiWebBrowserPersist to create an nsiURI from data url and then persist it locally.

score 2 · Answer 2 · answered Jun 05 '11 at 22:55

2

There's a sample extension on how to do this with Chrome http://code.google.com/chrome/extensions/dev/samples.html#e1697cacebad05218798bf3e8a0f724517f0e8c3

answered Jun 05 '11 at 22:55

MrD

2,405
3
22
23

score 1 · Answer 3 · answered Jun 05 '11 at 22:52

1

No sure about Firefox, but in Chrome extension you can capture a tab with chrome.tabs.captureVisibleTab(), which would return image in Data URI format. After that you would be able to manipulate the image with Canvas element, if needed.

answered Jun 05 '11 at 22:52

serg

109,619
77
317
330

Creating a Screenshot Plugin

3 Answers3