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

ValacarValacar
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 wondering...is 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">
    #document
        <html>
            <head></head>
            <body class="channel_new columns ember-application" data-page="ember#ember">
            ...
and the URL looks something like this: 
chrome://alertbox/content/inbox.html#inbox/8cfc71c3-703a-922b-01eb-8078de8d4878
with my stylish code looking like this: 
@namespace url(http://www.w3.org/1999/xhtml);

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

Comments

  • LouCypherLouCypher
    edited February 2014
    Try 
    @namespace url(http://www.w3.org/1999/xhtml);

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

      body.channel_new.columns.ember-application element2 {
        property: value;
      }
    }
  • ValacarValacar
    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.