I'm trying to learn how to make a firefox extension. I want to create a toolbar that only shows up on a specific page. I can make the toolbar appear, but then it should become hidden when I open or switch to a new tab, or close the tab with that specific page. I don't understand how to make the visibilitychange event work though, no matter what I try nothing happens.

window.addEventListener("load", function load(event){
  window.removeEventListener("load", load, false);
  myExtension.init();  
},false);


var myExtension = {

  init: function (aEvent) {
    gBrowser.addEventListener("DOMContentLoaded", this.showToolbar, false);
  },

  showToolbar: function(aEvent) {
    var doc = aEvent.originalTarget;

    if(doc.location.href=="http://www.google.ca/"){
      eToolbar=document.getElementById("nav-toolbar");
      eToolbar.hidden=false;

      //no matter how I change this line below it never does anything
      gBrowser.addEventListener("mozvisibilitychange", this.toggleToolbar, false);
    }
  },

  toggleToolbar: function(aEvent) {
    eToolbar=document.getElementById("nav-toolbar");
    if(document["mozVisibilityState"]=="mozHidden"){
        eToolbar.hidden=true;
    } else {
        eToolbar.hidden=false;
    }
  } 
}