Question

对于踢腿和咯咯笑声，我正在尝试编写Firefox扩展程序。只是一个非常简单的。我已经完成了我找到的教程，并且我已经获得了基本的“Hello，World”应用程序。

我想做的是将事件监听器添加到~~浏览器的~~ Firefox应用程序DOM（即选项卡）中的现有元素。到目前为止，我能够找到的所有资源都显示了如何向应用程序添加新元素，然后使用javascript向其添加操作。我已经尝试了几种方法来添加一个javascript函数（我知道它可以工作，因为我已经成功地将函数添加了元素）到现有元素。

我最近的尝试结构如下：

<?xml version="1.0"?>
<!-- in myExtension.xul -->

<overlay  id="myExtension"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript">
    var tabs = document.getElementsByTagName("tabbrowser-tab")
    var len = tabs.length;
    for (var i = 0; i < len; i++) {
      tabs[i].ondblclick = function() {
        alert('bam!');
      }
    };
  </script>

</overlay>

这些东西都不起作用。就像我说的那样，我对这些东西都很陌生，而且我对周末项目有点启发。也许有一些方法可以确保我访问chrome文档而不是页面文档？ ~~虽然当我尝试使用这种技术获取页面元素（即“p”）时，这也不起作用，所以这可能是一个死胡同。~~

[编辑] 试图澄清一些困惑：

我的意思是“浏览器的 DOM”是属于chrome界面的元素，不是网页元素。我正在谈论将事件监听器专门放在已作为Firefox应用程序UI的一部分存在的元素上，例如选项卡（不是选项卡的内容，而是选项卡本身），或者说是主页按钮。我想重新定义Firefox应用程序GUI部分的行为。

例如，假设我想在每次有人点击“新标签”按钮或“关闭标签”按钮时添加提醒。或者，如果我想重新定义“重新加载”按钮以重定向到当前选项卡的域的根，而不是仅重新加载页面。这些都是Firefox的现有部分，我想重新定义它们/通过扩展覆盖它们，特别是通过向它们添加javascript操作。

[/编辑]

[sidenote]是否允许在xul中嵌入javascript？或者它需要在一个单独的文件中？[/ sidenote]

有人对此有任何建议吗？感谢。

Answer 1

重叠代码中的javascript代码不起作用，因为它比gbrowser包含任何标签更早运行。

在Firefox（或Thunderbird）扩展程序中，您通常会在加载事件侦听器中启动扩展程序：

window.addEventListener("load",
                         pinfresh.init,
                         false);

然后，init函数需要为各种tab事件注册事件监听器：

  pub.init = function() {
    var container = gBrowser.tabContainer;

    container.addEventListener("TabOpen", tabOpened, false);
    container.addEventListener("TabClose", tabRemoved, false);
  };

当打开一个新选项卡时，我们会注册另一个监听器，当用户双击选项卡时会触发选项卡重新加载：

  tabOpened = function(e) {
    var tab = e.target;
    tab.addEventListener("dblclick", tabDoubleClicked, false);
  }

  tabDoubleClicked = function(e) {
    gBrowser.reloadTab(e.target);
  }

完整的代码如下所示：

<overlay  id="pinfresh"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript">
    pinfresh = function() {
      var pub = {};

      tabOpened = function(e) {
        var tab = e.target;
        tab.addEventListener("dblclick", tabDoubleClicked, false);
      }

      tabRemoved = function(e) {
        var tab = e.target;

        tab.removeEventListener("dblclick", tabDoubleClicked, false);
      }

      tabDoubleClicked = function(e) {
        gBrowser.reloadTab(e.target);
      }

      pub.init = function() {
        var container = gBrowser.tabContainer;

        container.addEventListener("TabOpen", tabOpened, false);
        container.addEventListener("TabClose", tabRemoved, false);
      };

      return pub;
    }();

    window.addEventListener("load",
                            pinfresh.init,
                            false);

  </script>
</overlay>

对于使用标签的代码段，我建议您在Mozilla开发中心的Tab Browser页面。

我建议将Javascript代码放在自己的文件中，而不是将其包含在XUL文件中。外部Javascript文件中的错误显示在Firefox的错误控制台中，这使调试变得更加容易。

Answer 2

为了获取当前查看选项卡的页面元素，首先需要使用gBrowser.selectedBrowser.contentDocument获取文档本身

所以基本上如果你有一个<p id='test'>blah</p>元素，并且你想操纵它，你可以做var p = gBrowser.selectedBrowser.contentDocument.getElementById('test');，然后随心所欲地做它。

关于“向浏览器的DOM（即标签）中的现有元素添加事件监听器”，我很抱歉，但我不明白你想要什么，你想操纵浏览器GUI（即添加按钮到导航栏）或者您是否想要操纵选项卡的DOM内容（即查看过的网站）？（基本上“浏览器”可能意味着很多东西:)）。

Firefox Extensions：为现有的chrome XUL元素添加功能

2 个答案: