Styling an iframe within a Firefox extension's chrome:// page?

edited February 2014 in Style Development
I've got a Firefox extension I use called Alertbox (v1.0.6.20140206), and it uses a chrome:// url for it's configuration page. Within that config page is an IFRAME element whose src attribute is "about:blank" (note: you need to make an "alert" for a web page and then open it in the inbox). I'm it even possible to style that iframe. The HTML looks like this:
<iframe width="100%" height="1855" frameborder="0" src="about:blank" data-id="a512bec0-a0ed-112f-4ba7-454be6b9bb8b" viewclass="SieveHTMLView">
            <body class="channel_new columns ember-application" data-page="ember#ember">
and the URL looks something like this:
with my stylish code looking like this:
@namespace url(;

@-moz-document url-prefix("chrome://alertbox/") {
    iframe body { background: #000 !important; }  /* this won't work of course */
Of course that style would only apply to the chrome page itself and not the iframe embedded within it, but I thought I'd post it just to show basically what I'm attempting to do. If it were a normal iframe on a regular web page, I could just style the page that its src attribute points to, but for this it's using about:blank. Anyway, I don't expect this to be answered, but whatever...maybe someone can give me a clue, and whether or not it's possible ;)


  • edited February 2014
    @namespace url(;

    @-moz-document url(about:blank) {
    body.channel_new.columns.ember-application element1 {
    property: value;

    body.channel_new.columns.ember-application element2 {
    property: value;
  • Oh wow, that actually worked. I coulda swore I tried styling about:blank, but maybe I typed about:config or something, lol. Only problem is that it's very general and could end up applying to other extensions that use about:blank for stuff like this. I'll just be very specific with my CSS selectors and hopefully it won't be a problem. Thanks LouCypher.
Sign In or Register to comment.