The Piggy Bank extension to the Firefox browser consists primarily of 3 parts:

  • Chrome additions to the browser, including menu commands, toolbars, etc., written in XUL and Javascript;
  • Back-end Java code that manages the collected “pure” information in databases and serves it up through an HTTP interface.
  • XPCOM components written in Javascript that bridge the chrome part and the Java part.

We are in the process of porting over as many of the XPCOM components as we can to operate over HTTP instead to separate the browser functions of Piggy Bank from its storage functions. The new method of publishing via an icon in the status bar is part of the move.

The figure below shows Piggy Bank’s architecture. Note that much of the Java part of Piggy Bank can be considered a 3-tier web server application, as it contains a Jetty web server that uses the Velocity templating engine to serve information in databases through a DHTML+Javascript-based user interface.

Piggy Bank Architecture.png

Commands such as tag, save, and publish are sent as HTTP POSTs to the embedded web server. The Ajax technique is used to provide suggestions during tagging and to refresh individual items’ views.

Piggy Bank employs XSLT and Javascript for screen scraping web pages. In order to deal with the complexity of HTML code, screen scrapers can leverage XPath support in Firefox to traverse DOM trees rather than using regular expression. This way, screen scrapers “see” what Firefox “see”, including dynamic transformations of documents after loading.


  • Firefox, as the application platform
  • XUL, as the extension’s user interface language
  • HTML, as the clientside user interface language
  • Javascript, as the clientside and extension’s scripting language
  • Java, as the serverside core programming language
  • Batik, for encoding PNG files
  • Informa, for parsing RSS feeds
  • Jetty, as the embedded web server
  • JTidy and JDom, for applying XSLT on HTML
  • Log4j, as the logging framework
  • Lucene, as the text indexer
  • Sesame, as the RDF access and storage API
  • Velocity, as the templating engine for generating HTML