Как создать холст в контенте документа с расширением Firefox?

Question

Я разрабатываю расширение Firefox, чтобы я мог создавать элементы canvas в документе содержимого (веб-странице, загруженной в браузер) из расширения.

Моя функция ниже:

function createCanvas(el, e, count)
{
    try{
    alert("create canvas");
    var x = getImgOffset(el).left;
    var y = getImgOffset(el).top;
    var body = window.content.document.getElementsByTagName('body')[0];
    //removeSelection();
    var canvas = {};
    canvas.node = window.content.document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.setAttribute('id','canvas');
    canvas.node.setAttribute('height',el.offsetHeight+'px');
    canvas.node.setAttribute('width',el.offsetWidth+'px');
    canvas.node.setAttribute('style','left:'+x+';top:'+y+';border: 1px solid grey; position:absolute; z-index:2;');
    body.appendChild(canvas.node);
    alert("d");
    canvas.node.onmouseover = function(event){ 
        var t = (event && event.target) || (event && event.srcElement); 
        //alert("d : "+t.tagName);
        initCanvas(event);
    }
    initCanvas(e);
    }catch(er)
    {
        alert("crt canvas : "+er.name+"\n"+er.message);
    }
}

Этот код работает, когда я вызываю функцию изнутри веб-страницы. Но возникает исключение, когда я пытался вызвать эту функцию createCanvas с панели инструментов.

Я получаю сообщение об ошибке в следующей строке:

canvas.node = window.content.document.createElement('canvas');

Я пробовал также следующие строки:

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');

&

canvas.node = window.content.document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');

Но все равно появляется та же ошибка:

Error Name:  NS_ERROR_NOT_AVAILABLE
Error Message: Component is not available

Пожалуйста, помогите мне в этом вопросе.

Answer 1

Почему бы просто не добавить элемент html: canvas в ваш overlay.xul:

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

, а затем сослаться на него по id в вашем javascript:

    var canvas = document.getElementById('my-canvas');

Я писал о том, как использовать элементы canvas, чтобы расширения браузера делали снимки экрана .