How to create a browser extension that records screenshots


Author: Amir Nathoo (Co-founder)

Level: Intermediate

Description: knows their way around Chrome and Firefox extension development

Google Chrome has a built-in API call that lets extensions take screenshots of the pages users see:


In fact, there’s even a code sample showing how to do this in the Google Chrome Extension documentation.

It’s a little trickier on Firefox but perfectly possible using a canvas element in your overlay XUL. Here’s how.. add this element:

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

Then in your overlay javascript, listen for new document loads and this snippet will create a data url of a screenshot:

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

//Find the window dimensions
//doc is the content document that you listened for
canvas.height = doc.defaultView.innerHeight; 
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");

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

Let us know if this helps you!


%d bloggers like this: