Creating a Screenshot Plugin [closed]

Question

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

Answer 1

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.

Answer 2

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