javascript - Firefox 扩展 : adding functionality to existing Chrome XUL elements

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 操作。

[/编辑]

[旁注]xul 中是否允许嵌入 javascript？还是需要放在单独的文件中？[/sidenote]

有人对此有什么建议吗？

Answer 1

覆盖代码中的 javascript 代码不起作用，因为它运行早于 gbrowser 包含任何选项卡。

在 Firefox(或 Thunderbird)扩展中，您通常在加载事件监听器中启动扩展:

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

然后 init 函数需要为各种选项卡事件注册事件监听器:

  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>

对于与选项卡一起使用的代码片段，我推荐 Tab Browser Mozilla 开发中心的页面。

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