从引导的扩展中绘制UI覆盖

Question

我正在阅读MDN上关于自举扩展的文档，发现了以下内容：https://developer.mozilla.org/en-US/docs/Extensions/Bootstrapped_extensions#Adding_user_interface_manually

根据这一点，您必须从引导的扩展"手动"添加持久的UI元素。你不能只添加xul覆盖。我在任何地方都找不到一个关于你如何做到这一点的例子。

我正在尝试将菜单项添加到上下文菜单中。此：

var contextMenu = window.document.getElementById("contentAreaContextMenu");

获取contentAreaContextMenu对象，但它的行为似乎根本不像源代码中描述的DOM树或nsContextMenu

这个问题真的很古老：如何从引导的Firefox插件中添加UI元素有什么变化吗？该帖子的所有链接页面都是404。

有什么想法吗？

Answer 1

普通的自启动插件是最复杂的创建插件，因为基本上你必须自己做很多XUL或add-on-SDK插件或多或少免费获得的事情。（实际上，SDK只不过是引导加载项之上的一层脂肪而已）。因此，除非你愿意学习大量的Gecko/toolkit/Firefox内部，否则你应该更喜欢XUL覆盖插件或SDK插件，而不是引导插件。

为了回答您的问题：您必须使用常规的DOM API创建XUL元素（例如<menuitem>），因此如下所示：

// Provided you already obtained a reference to some |window|
var document = window.document;
var contextMenu = document.getElementById("contentAreaContextMenu");
var menuItem = document.createElement("menuitem");
menuItem.setAttribute("label", "my item");
contextMenu.appendChild(menuItem);
menuItem.addEventListener("command", function() {
  window.alert("clickety-click");
}, false);

您还必须编写一些代码，以确保在窗口关闭时（避免窗口泄漏）或在禁用/删除附加组件时（避免留下混乱）删除菜单项和侦听器。

我建议您看看其他自启动的附加组件。例如，restartless restart是一个非常小的插件，应该不会太难遵循，但它还添加了一个工具栏按钮和菜单项等。免责声明：我为这个插件做了一些贡献，但它不是"我的"。

我自己写了一个小工具集来帮助我创建我称之为extsdk的附加组件，因为我不喜欢SDK太胖和有限（从那时起，SDK的情况有所改善）。