How to use drawWindow canvas function in addon created using addon sdk?

Question

I created a Firefox addon using addon sdk . I am trying to use the canvas drawWindow function.

I have the following code to use a function where ctx refers to the canvas context that I got with canvas.getContext("2d") .

 ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); 

When I run this code in a script that connects with

 tabs.activeTab.attach({ contentScriptFile: data.url("app.js") // app.js contains the above line of code }); 

I get the following error:

 TypeError: ctx.drawWindow is not a function 

This error does not occur when I call functions, such as strokeRect and fillRect, on the same ctx object.

The docs on this page say you need chrome privileges to use the code, so this can be a problem. I would expect another error based on the code for the function.

I found out that I can use chrome privileges in my addon using this one , but what should I do after using ctx.drawWindow?

In addition, when I ran the code for this question , from the notepad on the page, and not from the add-on, and not to "Error: the operation is unsafe", I get the same "Exception: ctx.drawWindow is not a function".

So basically, what I'm asking is, how could I use canvas drawWindow in an addon created using addon sdk?

Edit: I am trying to do this because I need a method to access the individual pixels of the displayed page. I hope to draw a page on the canvas and then access the pixel using getImageData . If there are other ways to access individual pixels (in the Firefox add-on), this will also be useful.

Answer 1

Here is a snippet of code borrowed from the old tab-browser SDK. This will give you a thumbnail of the current tab without being tied 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 can get data through getImageData and just ignore the scaling parts if you don't want to.