Inserting CSS with a Firefox Extension

Inserting CSS with a Firefox Extension

chrome:// won't work because the page you are inserting into isn't allowed to access files outside of it's domain (including chrome URIs). This is true even you are the one inserting the link, because the link is still executed in the context of the target page. Instead you have two options:

You can define a resource protocol alias in your manifest and then use a resource URI to access the CSS. For example, the following chrome.manifest will allow you to insert the css as resource://myextresource/myfile.css:

content myext content/
resource myextresource content/css/
See MDN Chrome registration for more info. Also see How can a Firefox extension inject a local css file into a webpage? for a similar question.

Or, you can add the CSS as a USER_SHEET using the following. This will make your CSS available across all pages, so be sure you use very unique selectors. One caveat with this approach is that the page CSS has precedence over user sheets. You can use !important to override that, but the page CSS can still trump you if it uses !important as well.

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);

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

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

How do you use firefox Extensions to change CSS of a web site?

I think you are looking for how to inject the style to a webpage using Firefox extension. You can try this way:

pageMod.PageMod( {
  include: '*',
  contentStyleFile: [
    data.url( 'style1.css' ),
    data.url( 'style2.css' )
  ]
})

For more information please refer: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod

inserting local css file with firefox extension

You should set the javascript.options.showInConsole, restart, then check the Error Console.

The nsIStyleSheetService snippet should be the simplest to get working.

What's the url in it? The other snippets/comments you posted contradict each other -- the chrome.manifest and your comment "When I copy and paste my href ..., I can see my css file in the browser" imply you're using chrome://helloworld/skin/global.css, but your other snippet shows you use a resource:// URL, which is a different beast.

How do you determine the snippet is not working? Could you have your stylesheet wrong? Did you try something simple like * {color:red !important;} as your CSS?

P.S. If you use nsIStyleSheetService, please note the comment on MDC about taking care not to register the same sheet multiple times.

Also note that when using nsIStyleSheetService you should be careful not to make your styles apply to the pages you didn't intend to modify. @-moz-document can be very useful for that.

Firefox extension: apply content_scripts on all web pages but css on specific web page?

My friend came up with a solution, change your manifest file to this:

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js":["contentScript.js"]
    },
    {
      "matches": ["*://*.website.org/*"],
      "css": ["background.css"]
    }
  ]

Life saver.

How can a Firefox extension inject a local css file into a webpage?

Use resource: instead of chrome:?

---

Related Topics