Creating a screenshot plugin

Question

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

Answer 1

Here is a snippet for Firefox. In your XUL overlay, add:

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

Then, in your javascript overlay, listen for new document downloads , and this fragment will save the screenshot in 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 nsiURI from a data URL, and then save it locally.

Answer 2

, Chrome http://code.google.com/chrome/extensions/dev/samples.html#e1697cacebad05218798bf3e8a0f724517f0e8c3

Answer 3

Not sure about Firefox, but in the Chrome extension you can grab a tab with chrome.tabs.captureVisibleTab()that will return the image to the URI data format . After that, you can manipulate the image using Canvas , if necessary.