Loading CSS dynamically into the active document using a firefox extension and jquery

Question

I came upon this article on using jQuery in Firefox add ins. I have it working just fine but am having a CSS issue. How in the world do you get a CSS file into the current browser document? I've done the obvious:

$mb = jQuery.noConflict(); 
doc = window.content.document;
jQuery('body', doc)
    .append('<link rel="stylesheet" href="chrome://ThriftyHippo/content/styles.css" />');

and that adds the node you think it would to the document's dom. I've also verified that the chrome:// link included resolves to the right CSS file. However, when I add a div to the document after with an ID defined in the stylesheet it doesn't get styled! Any idea what to do?

Answer 1

I am pretty sure the link tag has to be added to the head of the document, not the body. Try that first.

jQuery(document.createElement("link"))
 .attr({type: "text/css",href: "chrome://ThriftyHippo/content/styles.css",rel:"stylesheet"})
 .appendTo("head");