XBL : our userstyles on steroids...

edited September 2007 in Style Development

Mikado with its style has introduced to us a new and very powerful way of getting our styles to interact with the pages.

Indeed he has showed that we can implement AJAX through our userstyles to any page...

Some more informations can be found here.

I encourage every one to go, look, try to apply and then post about their achievements.

It would although be very useful if Mikado could tell us a bit more about its experience with the subject, but I don't want to sound too pushy on that... ;o)


  • edited September 2007
    This was showed to me by np, so all the credits should go to him.

    And take a look at the textarea on the bottom of this page. It has the XBL binding attached via CSS. This technology was always around in Firefox.
  • It's not in wide use because it's normally easier to do these things with a user script. Also, in Firefox 2, there's no way to have inline XBLs like you have images - you need to host the XBL somewhere.

    Also, it potentially could have security implications. Not take-over-your-computer type-stuff, but XSS and phishing.
  • Ok, so here is my found for the moment:

    How to get to parents and much more...

    Create an xml file that you store on a server, call it whatever you want (here we call it "stylish_hacks.xml"):

    <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="first_scrip"> <implementation> <constructor><![CDATA[ this.parentNode.style.display='none'; ]]> </constructor> </implementation> </binding> <binding id="other_scrip"> <implementation> <constructor><![CDATA[ javascript ]]> </constructor> </implementation> </binding> </bindings>

    Each script must have an ID that you will be calling for your style through the following property:

    img[src*="image1"] { -moz-binding: url(http://myserver.s.adress.com/stylish_hacks.xml#first_scrip) !important;}

    "this" in the xml represents the node you are calling from in your style, so if you are calling from an image for example you go back up the DOM tree...

    Yes you are getting to the parents...

    Now as I said earlier you can do much more ! Just look at what have been done in the script proposed in this first post.

    And if you want to share your understandings... do not hesitate
  • xmlns:html="http://www.w3.org/1999/xhtml"
    Useless, remove it. XHTML namespace can be included in <content> section when needed.
  • edited October 2007
    Another important thing: your server must provide correct mimetype for the files (text/xml or application/xml), and they should have utf8 or ansi encoding.
    Also, mozilla doesn't seem to cache these XML files like images, so you should provide some caching at server side.

    I ended with this php script:

    <?php $xmlpath = $_GET['f'].'.txt'; $etag = $_GET['f'].'@'.filemtime($xmlpath); if ($_SERVER['HTTP_IF_NONE_MATCH'] == $etag) { header ('HTTP/1.1 304 Not Modified'); exit(); } header('Content-Encoding: gzip'); header('Content-Type: text/xml'); header('ETag: '.$etag); echo gzencode(file_get_contents($xmlpath), 9); ?>
    It allows you to store XML's as .txt files, control caching, and gzip files when requested. Usage: http://yourserver/script.php?f=neededXMLfile

    PS. If anyone experienced with PHP sees anything bad with this code, please let me know :)

    PPS. I think that XBL is better than userscripts: it is a bit more secure (GM XHR is just great for XSS), it's applied to elements as they appear, and it can be applied via userContent.css without installing any extensions. You should be careful with XBL though, some scripts can crash FF or have weird effect.
Sign In or Register to comment.