如何在Firefox Extensions上使用visibilitychange事件

时间:2012-11-22 16:37:47

标签: javascript javascript-events firefox-addon

我正在尝试学习如何制作firefox扩展程序。我想创建一个仅显示在特定页面上的工具栏。我可以使工具栏显示,但是当我打开或切换到新选项卡或关闭具有该特定页面的选项卡时它应该被隐藏。我不明白如何使visibilitychange事件工作,无论我尝试什么都没有发生。

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;
    }
  } 
}

2 个答案:

答案 0 :(得分:1)

mozVisibilityState可以是visiblehidden

答案 1 :(得分:0)

我设法通过使用TabSelect事件来达到预期的效果。

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;

         var container = gBrowser.tabContainer;
         container.addEventListener("TabSelect", myExtension.toggleToolbar, false);
      }
   },

   toggleToolbar: function(aEvent) {
      eToolbar=document.getElementById("nav-toolbar");
      if(window._content.document.location.href=="http://www.google.ca/"){
         eToolbar.hidden=false;
      } else {
         eToolbar.hidden=true;
      }
   } 
}