Question

I’m trying to write a Firefox extension that adds elements to the loaded page. So far, I get the root element of the document via

var domBody = content.document.getElementsByTagName("BODY").item(0);

and create the new elements via

var newDiv = content.document.createElement("div");

and everything worked quite well, actually. But the problems came when I added a button with on onclick attribute. While the button is correctly displayed, I get an error. I already asked asked here, and the answer with document.createElement() (without content) works.

But if I remove the ‘content.’ everywhere, the real trouble starts. Firstly, domBody is null/undefined, no matter how I try to access it, e.g. document.body (And actually I add all elements _after_the document is fully loaded. At least I think so). And secondly, all other elements look differently. It’s seem the style information, e.g., element.style.width=”300px” are no longer considered.

In short, with ‘content.document’ everything looks good, but the button.onclick throws an error. with only ‘document’ the button works, but the elements are no longer correctly displayed. Does anybody see a solution for that.

Answer 1

It should work fine if you use addEventListener ^[MDN] (at least this is what I used). I read somewhere (I will search for it) that you cannot attach event listener via properties when creating elements in chrome code.

You still should use content.document.createElement though:

 Page = function(...) {
   ...
 };

 Page.prototype = {
   ...
   addButton : function() {
     var b = content.document.createElement('button');
     b.addEventListener('click', function() { 
         alert('OnClick'); 
     }, false);
   },
   ...
 };

I would store a reference to content.document somewhere btw.