如何在Firefox中扩展内容文件中创建画布?
我正在开发一个firefox扩展,这样我就可以在扩展中创建内容文档(在浏览器中加载的网页)中的画布元素。如何在Firefox中扩展内容文件中创建画布?
我的函数如下所示:当我调用函数从网页内
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
请帮我解决这个问题。
为什么不只是添加一个html:在您的overlay.xul canvas元素:
<html:canvas id="my-canvas" style="display: none;" />
,然后通过ID在你的JavaScript引用它:
var canvas = document.getElementById('my-canvas');
我已经blogged about how to use canvas elements to let browser extensions take screenshots。
我需要创建'工具栏中的网页内的“画布”元素。 我在那里得到错误。 – 2011-06-10 09:56:52
我不确定为什么在加载项代码中将canvas元素添加到页面时出现问题,但您可以尝试的一种方法是将
谢谢@AmirNathoo。这对我有效。我没有找到实际的逻辑。 谢谢无论如何。 – 2011-06-15 11:42:35
通过示例学习通常是最容易的,使用画布的扩展的一个很好的例子是https://addons.mozilla.org/en-us/firefox/addon/tab-preview/ – MatrixFrog 2011-06-09 22:26:55