Firefox 扩展：向现有 Chrome XUL 元素添加功能

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 的一部分已经存在的元素上，例如选项卡（不是选项卡的内容，而是选项卡本身），或者说 Home 按钮。我想重新定义 Firefox 应用程序 GUI 部分的行为。

举例来说，我想在每次有人单击“新选项卡”按钮或“关闭选项卡”按钮时添加警报。或者，如果我想重新定义“重新加载”按钮以重定向到当前选项卡的域的根目录，而不仅仅是重新加载页面。这些都是 Firefox 的现有部分，我想通过扩展重新定义它们/覆盖它们，特别是通过向它们添加 JavaScript 操作。

[/edit]

[sidenote]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>

对于使用选项卡的代码片段，我建议使用 Mozilla 开发中心的选项卡浏览器页面。

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

Answer 2

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

所以基本上，如果您有一个

blah

元素，如果你想要操作它，你可以执行 var p = gBrowser.selectedBrowser.contentDocument.getElementById('test'); 然后用它做任何你想做的事情。

关于“向浏览器DOM（即选项卡）中的现有元素添加事件侦听器”，很抱歉，但我无法理解您想要什么，您想操作浏览器GUI吗（即向导航栏添加按钮） ）或者你想操作选项卡的 DOM 内容（即查看的站点）？ （基本上“浏览器”可以意味着很多东西:)）。