I am currently working on a Firefox extension project and require assistance with inserting elements and CSS into the document.
I have attempted to follow tutorials on injecting a local CSS file into a webpage with a Firefox extension and inserting CSS using a Firefox extension, but have had no success.
I feel like there may be a small detail that I am overlooking, but I'm unable to pinpoint what it is. Any guidance would be greatly appreciated.
Here is my chrome.manifest file:
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/
Additionally, here is my overlay.js code:
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 have also attempted the following script in 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);
Unfortunately, I am still facing issues.
Can anyone provide insight into what I may be missing? I seem to be at a standstill.
- Attempts to use the console yielded no results.
- After pasting the href "chrome://helloworld/skin/global.css", I could view my CSS file in the browser.