insert xul element into browser so it scrolls with it

Question

I'm trying to insert an xul element into the gBrowser.selectedBrowser element so that this xul element scrolls with the document node.

I used this code to create and add a box:

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','box');
var props = {
    style: 'width:300px;height:100px;background-color:red;'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}

gBrowser.selectedBrowser.appendChild(panel);

problem is that the box is not seen anywhere. it is in the dom inspection though:

Answer 1

As outlined in the comments above the issue is that the <browser> element does not render its contents, similar to an <iframe>.

Your options to have the box scroll with the content are a) reposition your box via javascript on scroll events b) build the HTML equivalent of your box and inject it into the content directly. If the page content is untrusted you have to consider security concerns into accounts since it could manipulate the DOM used by your addon.