How to create a firefox addon which injects CSS into a page? [closed]


Tags: css,firefox,firefox-addon

Problem :

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.



Solution :

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

    CSS Howto..

    How do I alter my Jquery slideshow to change size in different screen resolutions

    Sub menu wont show when menu item hovered over (css html)

    How to put four images 2x2 on other image as background, CSS?

    How to implement vertical tables using html5/CSS

    How to make each element to be fully independend with CSS?

    CSS question: how to remove the border from an image in WordPress

    How can I style this php with divs?

    How to copy a CSS style from a website for re-use

    How to make a multi step header

    How does the DiggBar work?

    How to position nav element center under parent div?

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    how to select a input using jquery

    Font-family not showing correctly on my website

    How to change css properties depending on parent, but with the same class name [closed]

    How to handle this CSS mouse hover issue?

    How to make a div 100% width minus a certain amount?

    How to find and delete specific row in blogger css with span tag?

    HTML/CSS: How to make the sidebar and content follow each other

    How to prevent an absolutely positioned element to affect the scrollbar?

    How to make the contents of a div not wrap?

    How to apply SVG filter to an element?

    CSS flex, how to display one item on first line and two on the next line

    Chrome and Firefox handle zoom differently. How to deal with this in my CSS

    W3.CSS how to get a standard header-[left-right]footer layout?

    how to remove a TR which have a TD that contain specific text

    How do I create triangle shaped vertical breadcrumbs

    Can someone tell me how to implement this Javascript? HTML CSS

    How to add a class to an element with CSS

    how to display a list inline using HTML and CSS