How to create a firefox addon which injects CSS into a page? [closed]
I want to modify page CSS of a website, with a firefox addon. I do not want to install an extension like greasemonkey and add CSS. I want to create an extension. The objective is to have an extension whose sole function is to inject CSS into a page.
WARNING: Don't tell me "you don't need an extension to change CSS". I already know that. This question is about building an extension. Thank you.
Basically, you'll need to perform 2 tasks:
Make a hook to watch all new pages open.
Here are some examples on how to do that. But it will require adding a script to all browser xul windows. That's simple: simply add your window script to an empty XUL overlay and add it to addon manifest.
After getting the access to the page DOM you can actually
Insert style sheet to the page.
To achieve this you make a stylesheet container like this:
// This may also be a data: or chrome: URL var stylesheetURL = "http://example.com/style.css"; var container = document.createElementNS("http://www.w3.org/1999/xhtml","style"); container.setAttribute("id", "your-extension-stylesheets"); // You should remove this when deactivating extension document.documentElement.appendChild(container); var stylesheet = conteiner.sheet; var addedIndex = stylesheet.insertRule("@import url('" + stylesheetURL + "');", stylesheet.cssRules.length); // Use stylesheet.deleteRule(addedIndex) when is's no longer needed