inserting local css file with firefox extension

I am building a firefox extension and need to insert some elements and css into the doc.

I tried following How can a Firefox extension inject a local css file into a webpage? and Inserting CSS with a Firefox Extension, but had no luck.

I know am missing some silly point but I cant really make out what it is,and would really appreciate if some one can point it out to me.

Heres my chrome.manifest:

 content    helloworld content/
overlay chrome://browser/content/browser.xul    chrome://helloworld/content/overlay.xul

locale  helloworld  en-US   locale/en-US/

skin    helloworld  classic/1.0 skin/

And my overlay.js:

var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://helloworld/skin/global.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);

I even tried this inside my overlay.js

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI(url, null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

No luck again.

What am I missing? I seriously can't figure out.

• Tried using the console,shows nothing
• When I copy and paste my href "chrome://helloworld/skin/global.css", I can see my css file in the browser.