Come si usa la funzione drawWindow canvas in un addon creato usando l'addon sdk?

Question

Ho creato un addon di Firefox utilizzando lo addon sdk. Sto cercando di utilizzare la funzione canvas drawWindow.

Ho il seguente codice per utilizzare la funzione, dove ctx fa riferimento a un contesto canvas, che ho ottenuto con canvas.getContext("2d").

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

Quando ho eseguito questo codice, all'interno di uno script che viene fissato con

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

ottengo il seguente errore:

TypeError: ctx.drawWindow is not a function 

Questo errore non si verifica quando chiamo funzioni come strokeRect e fillRect sullo stesso oggetto ctx.

I documenti su this page indicano che è necessario disporre dei privilegi di Chrome per utilizzare il codice, pertanto potrebbe verificarsi un problema. Mi aspetterei un errore diverso, basato sullo code per la funzione.

Ho scoperto che è possibile utilizzare i privilegi di Chrome nel mio addon utilizzando this, ma cosa dovrei fare per utilizzare ctx.drawWindow?

Inoltre, quando ho eseguito il codice in this question, da uno scratchpad su una pagina, piuttosto che da un addon, piuttosto che un "Errore: l'operazione non è sicura", ottengo lo stesso "Eccezione: ctx.drawWindow è non una funzione ".

Quindi, in sostanza, quello che sto chiedendo è: come utilizzerei la funzione drawWindow canvas in addon creata usando l'addon sdk?

Modifica: Sto cercando di farlo perché ho bisogno di un metodo per accedere ai singoli pixel della pagina di rendering. Spero di disegnare la pagina su tela, quindi accedere al pixel usando getImageData. Se ci sono altri metodi per accedere ai singoli pixel (in un addon di Firefox), sarebbe utile anche questo.

Answer 1

Ecco uno snippet di codice, preso in prestito dal vecchio modulo tab-browser dell'SDK. Questo ti porterà una miniatura della scheda corrente senza allegare alla scheda stessa.

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()); 

Da qui si dovrebbe essere in grado di afferrare i dati tramite getImageData e basta ignorare le parti di scala, se non si vuole che.