firefox-addon - 如何在没有id的情况下覆盖xul？

Question

我正在编写一个 Firefox 插件，并尝试使用 xul 覆盖来插入 Canvas 元素。问题是，我要插入canvas元素的父xul节点没有id。如果没有id可以吗？我还尝试对没有 id 的元素使用 anonid，如下所示，但也没有成功。

我的 xul 叠加层:

<?xml version="1.0"?>
<overlay id="myOverlay" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">

    <tabbrowser id="content">
        <tabbox anonid="tabbox">
            <tabpanels anonid="panelcontainer">
                <notificationbox>
                    <stack anonid="browserStack">
                        <html:canvas id="myCanvas" height="100%" />
                    </stack>
                </notificationbox>
            </tabpanels>
        </tabbox>
    </tabbrowser>

</overlay>

我希望在每个选项卡中的每个浏览器元素之后插入 Canvas 元素，如下所示:http://img.photobucket.com/albums/v215/thegooddale/80eae9ee.jpg

Answer 1

尝试使用叠加层时会出现多个问题:

1. 如果没有 ID，叠加层就无法工作，它们根本没有其他方法来寻址元素。
2. 叠加层不能应用于窗口加载时不存在的内容 - 它们是一次性的，不能考虑稍后创建的动态元素。
3. 叠加层不能应用于匿名元素(在 DOM Inspector 中显示为红色)。这些元素由 XBL 绑定(bind)注入(inject)，不是 XUL 文档的一部分。

您必须使用 JavaScript 并每次“手动”注入(inject) Canvas 。您可以使用 TabOpen event每当打开选项卡时收到通知。像这样的东西应该可以工作(未经测试的代码):

// Always wait for the window to initialize first
window.addEventListener("load", function()
{
  function initTab(tab)
  {
    var browser = window.gBrowser.getBrowserForTab(tab);
    var canvas = document.createElementNS("http://www.w3.org/1999/xhtml",
                                          "canvas");
    canvas.setAttribute("anonid", "myCanvas");
    canvas.setAttribute("height", "100%");
    browser.parentNode.appendChild(canvas);
  }

  // Init all existing tabs first
  var tabs = window.gBrowser.tabs;
  for (var i = 0; i < tabs.length; i++)
    initTab(tabs[i]);

  // Listen to TabOpen to init any new tabs opened
  window.gBrowser.tabContainer.addEventListener("TabOpen", function(event)
  {
    initTab(event.target);
  }, false);
}, false)

请注意，此代码设置 anonid 属性而不是 id - ID 应该是唯一的，您不应将相同的 ID 分配给十几个元素。