How do I use the canvas drawWindow function in an addon created using the addon sdk?

Question

I\'ve create a Firefox addon using the addon sdk. I\'m trying to use the canvas drawWindow function.

I\'ve got the following code to use the function, where ctx refe

Answer 1

Here's a code snippet, borrowed from the old tab-browser module of the SDK. This will get you a thumbnail of the current tab without attaching to the tab itself.

var window = require('sdk/window/utils').getMostRecentBrowserWindow();
var tab = require('sdk/tabs/utils').getActiveTab(window);
var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
thumbnail.mozOpaque = true;
window = tab.linkedBrowser.contentWindow;
thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);
var aspectRatio = 0.5625; // 16:9
thumbnail.height = Math.round(thumbnail.width * aspectRatio);
var ctx = thumbnail.getContext("2d");
var snippetWidth = window.innerWidth * .6;
var scale = thumbnail.width / snippetWidth;
ctx.scale(scale, scale);
ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
// thumbnail now represents a thumbnail of the tab
console.log(thumbnail.toDataURL());

From here you should be able to grab the data via getImageData and just ignore the scaling parts if you don't want that.