如何使用Firefox扩展将选项卡栏移动到窗口底部？

Question

我需要我的扩展程序将具有标签栏的工具栏（ID为TabsToolbar的元素）移动到窗口底部，在#browser 元素下方。

我知道如何使用扩展添加和修改元素，但我不确定如何使用覆盖在页面的其他位置放置现有元素。正确的方法是什么？

更新：

我找到了另一个可以实现此功能的插件，名为https://addons.mozilla.org/en-US/firefox/addon/tab-mix-plus/。

当选项卡设置为底部时，此插件会在#browser 元素下方添加一个空的元素，其ID为tabmix-bottom-toolbox。即使选项卡出现在底部，实际的选项卡XUL标记仍位于顶部的TabsToolbar 元素内。

我认为作者所做的是：

1. 在浏览器区域下插入一个XUL占位符元素，并将占位符元素设置为TabsToolbar的高度。
2. 然后通过css给TabsToolbar设置固定位置，
3. 根据占位符的偏移量设置“top”属性。

我还没有在自己的插件中尝试确认这一点。我也发现，在XUL中绝对定位会产生奇怪的效果。

- Nick

---

“Firefox”，不是“FireFox”……这不是什么大问题，只是提醒一下 ;) - nmaier

我找到了一个插件（https://addons.mozilla.org/en-US/firefox/addon/tab-mix-plus/），可以让你把选项卡放在底部，还有很多其他功能。我正在尝试浏览代码，看看能否找出作者是如何实现的。 - Nick

Answer 1

你可以试一下以下方式：

1. Insert a hbox (lets say with id bottom-tabs-container) before vbox with id "browser-bottombox"

2. In javascript, use something like

   var tabsToolbar = document.getElementById("TabsToolbar");
   document.getElementById("bottom-tabs-container").appendChild(tabsToolbar);
   

这会保留所有已经绑定的事件处理程序。但是请注意，您可能会破坏很多与外观相关的东西。

- Kashif

---

这似乎是最好的答案。我上面提到的Tab Mix插件使用绝对定位和事件来在窗口创建/调整大小时重新调整大小。这似乎是更好的选择。 - Nick