function getBackgroundPage(id, src) {

    // get the firefox hidden window
    var win = Components.classes["@mozilla.org/appshell/appShellService;1"].
                   getService(Components.interfaces.nsIAppShellService).
                   hiddenDOMWindow;

    // if the iframe was previously loaded store it and callback
    var iframe = win.document.getElementsById(id);
    if (iframe)
      return iframe.contentWindow;

    // create the iframe
    iframe = win.document.createElement("iframe");
    iframe.setAttribute("id", id);
    iframe.setAttribute("style", "display:none;");

    // load the source
    iframe.setAttribute("src", src);
    win.document.documentElement.appendChild(iframe);

    // return the content window
    return iframe.contentWindow;

Now you can access your background page by including the script in your overlay and doing:

  var bgp = getBackgroundPage("id for background page", "url of the background page");

** UPDATE **
instead of setting the style to display:none you should instead set the attribute “collapsed” to true. This causes docshell errors in some cases.

iframe.setAttribute(“style”, “display:none;”);
iframe.setAttribute(“collapsed”, “true”);

With Firefox 3.5 we were able to fix this by creating the diamond using only html and some specialized css tags. Using the tags: -moz-transform, -moz-border-radius, and -moz-box-shadow we rotate the div 45 degrees and add a shadow to them.

  display: inline-block !important;
  border: 2px solid #494949 !important;
  background: none !important;
  background-color: white !important;
  -moz-transform: rotate(45deg) !important;
  -moz-border-radius: 4px !important;
  -moz-box-shadow: grey 2px 2px 2px !important;

This also rotates the content within the div. To fix that we rotate the image back 45 degrees.

  -moz-transform: rotate(-45deg) !important;

And viola, a diamond with all the html event goodness, made with only html and css. Safari and Chrome support these transforms with -webkit-transform so this same effect can be used there.

• New Search Clovers for selection based searching functionality
• Updated Bing provider
• Updated compatibility for ff 3.6betas
• Improve sqlite performance
• Trim leading and trailing spaces from searches to improve accuracy
• Updated kwiclick skin
• Replace getBoxObjectFor with getBoundingClientRect
• Clover preferences to fine tune functionality
• Turn on/off clover from statusbar button
• Updated wikipedia provider increases accuracy of searching and results

Here is the video for the 2.4 release which was submitted to the extend firefox contest. This is a pretty good explanation of the things you can do with KwiClick.

I install the Gecko 1.9.1 SDK from developer.mozilla.org. I then install libidl using the following commands in MacPorts:

sudo port selfupdate
sudo port sync
sudo port install libidl

Now, when I run my build script I get the error:

     [exec] dyld: Library not loaded: /opt/local/lib/libIDL-2.0.dylib
     [exec]   Referenced from: /Developer/xulrunner-sdk-1.9.1/bin/xpidl
     [exec]   Reason: no suitable image found.  Did find:
     [exec] 	/opt/local/lib/libIDL-2.0.dylib: mach-o, but wrong architecture

Figuring that libidl is compiled as 64 bit and the gecko sdk is 32 bit, I go searching the web. This leads me to a forum post on compiling Camino on Snow Leopard.

Mac OS 10.6 is 64-bit as native, while Camino is far from 64-bit ready. So cross-compiling to 32-bit is required.
First hurdle was to cross-compile and install the required libIDL library, in 32-bit. Luckily MacPorts contain a universal libIDL, so after I got the hint about “versions” I got that going using the command – “sudo port install libIDL +universal”.

Alright, so now I’m trying to install the universal libIDL file and I hit another error.

Command output:       _IDL_inhibit_get in libIDL_2_la-parser.o
      _IDL_queue_new_ident_comment in libIDL_2_la-parser.o
      _IDL_file_set in libIDL_2_la-parser.o
      ___IDL_do_pragma in libIDL_2_la-parser.o
      _IDL_ns_scope_levels_from_here in libIDL_2_la-ns.o
      _IDL_tree_properties_copy in libIDL_2_la-util.o
      _IDL_tree_walk2 in libIDL_2_la-util.o
      _IDL_tree_to_IDL in libIDL_2_la-util.o
      _IDL_tree_get_scope in libIDL_2_la-util.o
      _IDL_tree_remove_inhibits in libIDL_2_la-util.o
      _IDL_tree_property_remove in libIDL_2_la-util.o
      _IDL_tree_property_get in libIDL_2_la-util.o
      _IDL_tree_property_set in libIDL_2_la-util.o
  "_g_log", referenced from:
      _IDL_check_type_cast in libIDL_2_la-util.o
      _IDL_tree_walk_real in libIDL_2_la-util.o
      _IDL_tree_walk_real in libIDL_2_la-util.o
      _IDL_emit_IDL_literal in libIDL_2_la-util.o
      _IDL_tree_get_node_info in libIDL_2_la-util.o
      _IDL_tree_get_scope in libIDL_2_la-util.o
      _IDL_tree_remove_empty_modules in libIDL_2_la-util.o
      _IDL_tree_remove_inhibits in libIDL_2_la-util.o
      _IDL_tree_process_forward_dcls in libIDL_2_la-util.o
      _load_inhibits in libIDL_2_la-util.o
      _IDL_tree_free in libIDL_2_la-util.o
ld: symbol(s) not found
collect2: ld returned 1 exit status
make[2]: *** [libIDL-2.la] Error 1
make[1]: *** [all-recursive] Error 1
make: *** [all] Error 2

Here is where I’m stuck. I have no idea what symbols are missing. Please, leave me a comment if you have any ideas on how to make this work.

** Update **
This is what I did to get this to work.

sudo port -f uninstall installed
sudo port install libIDL universal

/*******************************************************************************
 *  Object used to store information on a per tab basis.  This should be passed
 *  into the TabListener as the func argument.
 *
 *  @version 1.0
 ******************************************************************************/
function TabController() {}
TabController.prototype = {

  /**
   * IMPORTANT!!! Add the properties here that you need to keep track of.
   */

  /**
   * Called when a tab is being restored so that we restore the controllers state.
   *
   * @param   data           A string of json data stored in the session store.
   */
  fromString: function TabController_fromString(data) {
    var json = window.JSON.parse(data);
    for (var property in json)
        this[property] = json[property];
  },

  /**
   * Called when a tab is being closed so that we can store the controllers state.
   *
   * @returns                A string of json data stored in the session store.
   */
  toString: function TabController_toString() {
    var json = {};
    for (var property in this)
      json[property] = this[property]
    return window.JSON.stringify(json);
  }
};

/*******************************************************************************
 *  Object used to listen to tab events and keep track of controllers
 *
 *  @param    func           The controller function to instantiate.
 *
 *  @version 1.0
 ******************************************************************************/
function TabListener(func) {
  this.func = func;

  // get the session store
  this.store = Components.classes["@mozilla.org/browser/sessionstore;1"].
               getService(Components.interfaces.nsISessionStore);

  // prefill the controller array
  this.prefill();

  // add session event listeners
  document.addEventListener("SSTabRestoring", this, false);
  document.addEventListener("SSTabClosing", this, false);

  // add tab event listeners
  var container = getBrowser().tabContainer;
  container.addEventListener("TabOpen", this, false);
  container.addEventListener("TabMove", this, false);
  container.addEventListener("TabClose", this, false);
  container.addEventListener("TabSelect", this, false);

  // add the private browsing observer
  var os = Components.classes["@mozilla.org/observer-service;1"].
           getService(Components.interfaces.nsIObserverService);
  os.addObserver(this, "private-browsing", true);
}
TabListener.prototype = {
  func: null,
  store: null,

  /**
   * Array of controllers stored in the same order as tabs.
   */
  _controllers: null,
  get controllers() { return this._controllers; },
  set controllers(val) { this._controllers = val; },

  /**
   * Index of the selected tab.
   */
  _index: null,
  get index() { return this._index; },
  set index(val) { this._index = val; },

  /**
   * Controller for the selected tab.
   */
  get selected() { return this.controllers[this.index]; },

  /**
   * Prefill the array of controllers.
   */
  prefill: function TabListener_prefill() {

    // set the index to the selected tab index
    this.index = getBrowser().selectedTab._tPos;

    // loop through the open tabs and instantiate a controller for each tab.
    controllers = []
    var container = getBrowser().tabContainer;
    for (var i=0; i<container.childNodes.length; i++)
      controllers.append(new this.func());
    this.controllers = controllers;
  },

  /* ::::: nsIDOMEventListener ::::: */
  handleEvent: function urlnavOverlay_handleEvent(event) {
    var index = event.originalTarget._tPos;
    var controller;

    switch (event.type) {

    // tab open - store a new controller in the array
    case "TabOpen":
      this.controllers.splice(index, 0, new this.func());
      break;

    // tab is being restored - restore controller from the session store
    case "SSTabRestoring":
      controller = this.controllers[index];
      var data = this.store.getTabValue(event.originalTarget, "tab-controller");
      if (data != "undefined")
        controller.fromString(data);
      break;

    // user moved the tab - move the controller in the array
    case "TabMove":
      var oldIndex = event.detail;
      this.controllers.splice(index, 0, this.controllers.splice(oldIndex, 1)[0]);
      break;

    // tab is closing - save state to the session store
    case "SSTabClosing":
      controller = this.controllers[index];
      this.store.setTabValue(event.originalTarget, "tab-controller", controller.toString());
      break;

    // tab is closed - remove the controller from the array
    case "TabClose":
      this.controllers.splice(index, 1);
      break;

    // tab is selected - change the stored tab index
    case "TabSelect":
      this.index = index;
      break;

    default:
      return;
    }
  },

  /* ::::: nsIObserver ::::: */
  observe: function urlnavOverlay_observe(subject, topic, data) {

    // make sure it's the private browsing topic
    if (topic != "private-browsing")
      return;

    // reset the controllers
    this.prefill();
  },

  /* ::::: nsISupports ::::: */
  QueryInterface: function TabListener_QI(iid) {
    if (iid.equals(Components.interfaces.nsIDOMEventListener) ||
        iid.equals(Components.interfaces.nsIObserver) ||
        iid.equals(Components.interfaces.nsISupportsWeakReference) ||
        iid.equals(Components.interfaces.nsISupports))
      return this;
    throw Components.results.NS_ERROR_NO_INTERFACE;
  }
}

Here is a version you can download and use for yourself.

/*******************************************************************************
 * Object used to store values in the expiring cache.
 *
 * @param     key            The key used to store the object in the cache.
 * @param     value          Value to store in the cache.
 ******************************************************************************/
function CacheItem(key, value) {
  this.key = key;
  this.value = value;
  this.updateAccessed();
}
CacheItem.prototype = {

  _key: null,
  get key() { return this._key; },
  set key(val) { this._key = val; },

  _value: null,
  get value() { return this._value; },
  set value(val) { this._value = val; },

  _lastAccessed: null,
  get lastAccessed() { return this._lastAccessed; },
  set lastAccessed(val) { this._lastAccessed = val; },

  updateAccessed: function ci_updateAccessed() {
    this.lastAccessed = (new Date()).getTime();
  }
};

/*******************************************************************************
 * Interface used to store an item in memory for a finite amount of time.  A
 * maximum size and percentage of fill can be specified to limit the amount of
 * data stored.
 *
 * @param     maxSize        The maximum number of objects to store in the cache.
 * @param     expireRate     How often to expire items out of the cache (milliseconds)
 * @param     updateAccessed Update the lastAccessed time on an object when
 *                           retrieving an object or checking if it's in the cache.
 * @version   1.0
 ******************************************************************************/
function Cache(maxSize, expireRate, updateAccessed) {
  this.maxSize = maxSize;
  this.expireRate = expireRate;
  this.updateAccessed = updateAccessed;

  var self = this;
  this._items = {}
  this._timer = window.setInterval(self.purge(), this.expireRate)
}
Cache.prototype = {
  _timer: null,
  _items: null,

  _maxSize: null,
  get maxSize() { return this._maxSize; },
  set maxSize(val) { this._maxSize = val; },

  _expireRate: null,
  get expireRate() { return this._expireRate; },
  set expireRate(val) { this._expireRate = val; },

  _updateAccessed: null,
  get updateAccessed() { return this._updateAccessed; },
  set updateAccessed(val) { this._updateAccessed = val; },

  /**
   * Destroys the cache when you are done using it.  This stops the expire
   * timer and removes any items in the cache.  It also clears all the internal
   * state variables.
   */
  destroy: function Cache_destroy() {

    // stop the timer
    if (this._timer)
      window.clearInterval(this._timer);

    // remove the items
    this.clear();

    // cleanup the variables
    this.maxSize = null;
    this.expireRate = null;
    this._timer = null;
    this._items = null;
  },

  /**
   * Check to see if a key/value pair is stored in the cache.  If updateAccessed
   * has been specified then the items lastAccessed time will be updated.
   *
   * @param   key            The key to check for.
   * @returns boolean        True if found, otherwise false.
   */
  hasKey: function Cache_hasKey(key) {
    if (this._items.hasOwnProperty(key)) {
      if (this.updateAccessed)
        this._items[key].updateAccessed();
      return true;
    }
    return false;
  },

  /**
   * Get an array of all the keys stored in the cache.
   *
   * @returns array          An array of cache keys sorted alphanumerically.
   */
  getKeys: function Cache_getKeys(count) {
    var keys = [];
    for (var key in this._items)
      keys.push(key);

    keys.sort();
    return keys;
  },

  /**
   * Get the value from a key/value pair if the key is present in the cache.
   * If updateAccessed has been specified then the items lastAccessed value
   * will be updated.
   *
   * @param   key            Key for the value to return.
   * @returns object         Value stored in the cache.  If the key is not found,
   *                         then null is returned.
   */
  getValue: function Cache_getValue(key) {

    // return null if we do not have the item
    if (!this.hasKey(key))
      return null;

    // return the item
    return this._items[key].value;
  },

  /**
   * Set a key/value pair.
   *
   * @param   key            The key used to access an object.
   * @param   value          The value to be stored.
   */
  setValue: function Cache_setValue(key, value) {
    var item = new CacheItem(key, value);
    this._items[key] = item;
  },

  /**
   * Delete a key/value pair from the cache.
   *
   * @param   key            The key of the pair to remove.
   */
  deleteValue: function Cache_deleteValue(key) {

    // return early if key not stored
    if (!this.hasKey(key))
      return;

    // remove the item
    delete this._items[key];
  },

  /**
   * Clear all items out of the cache.
   */
  clear: function Cache_clear() {
    var keys = this.getKeys({});
    for (var i=0; i this.maxSize) {

      // sort this array last accessed date
      temp = temp.sort(function(a, b) { return b.lastAccessed - a.lastAccessed; });       

      // remove items from the end of the array
      while (temp.length > purgeSize) {
        var ritem = temp.pop();
        this.deleteValue(ritem.key);
      }
    }
  },

  /**
   * Internal function called from purge used to determine if an item has passed
   * it's expiration.
   *
   * @param   item           The CacheItem to check.
   */
  _isExpired: function Cache__isExpired(item) {
    var now = (new Date()).getTime();
    var expires = item.lastAccessed + this.expireRate;
    if (expires < now)
      return true;
    return false;
  }
};

To use the cache you can either include a copy in your code or download the attached file. Then you simply call:

jsec = new Cache(maxSize, expireRate, updateAccessed);
jsec.setValue(key, value);
value = jsec.getValue(key);
jsec.destroy();

Here is a version you can download and use for yourself.

• I’ve added prefetching for up/down navigation.
• Improved the way navigation operations are stored in the back-end.
• Made prefetch, history, and valid checking asynchronous operations.
• Integrated into the new Session Store API.
• Integrated into the tab events for faster capturing.
• Added min/max guessing to the capture dialog.
• The numeric builder now ignores character encoding.

• Added locales: es-AR and pt-Br.
• Added support for Bon Echo, and nightly trunk builds.

• Added locales: cs-CZ, fr-FR, it-IT, pt-Br, and zh-CN
• Added support for Bon Echo, and nightly trunk builds.
• Removed anonymous functions for better debugging.
• Fixed empty menu item by falling back to the username if the realname doesn’t exist for a contact.