1

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.

programmingaddict
  • 300
  • 3
  • 15

2 Answers2

2

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
Knuckles
  • 153
  • 1
  • 5
  • Are you suggesting to host my stylesheet externally? Moreover, it looks like your answer has **nothing to do with a firefox extension**. Right? Moreover, this does not look to be accurate. – programmingaddict Apr 28 '13 at 16:00
  • 2
    No, I don't. If you read carefully, you'll notice a comment saying that stylesheet url may have "chrome" spec. Which means it can be loaded from the extension as usual. If you need the very basics of extensions, you should really read the tutorial at MDN: https://developer.mozilla.org/en-US/docs/Building_an_Extension – Knuckles Apr 29 '13 at 19:16
0

If you just want to override the CSS on a particular site, you don't need an extension.

Take a look at Firefox's User CSS, which lets you specify extra CSS to apply per-domain.

See, for example, How to override the CSS of a site in Firefox with userContent.css? at superuser.

Community
  • 1
  • 1
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
  • No. As I said in the question, I am trying to create an extension. I already know how to override css, That's not what I am trying to do. I am trying to build an extension. – programmingaddict Apr 26 '13 at 19:02
  • Understood. You also said the sole purpose was to inject CSS, so it seemed worth pointing out a simpler way to do that. – Paul Roub Apr 26 '13 at 19:03
  • 3
    But the WARNING is adorable. – Paul Roub Apr 26 '13 at 19:03
  • No, I did not say that. I said the objective is to **`have an extension` whose sole function** is to inject CSS into a page. **`Have an extension`** being the operative phrase. – programmingaddict Apr 26 '13 at 19:03