我有一个雷鸟扩展插件。它使用XBL更改Thunderbird菜单栏中的Help菜单,在其中用单个“ Hello,World!”替换原始菜单项。菜单项。
作为XBL is on its way out,我想更新扩展名以使用custom element。
当前绑定是这样附加的:
bindings.css
menu#helpMenu {
-moz-binding: url("./test.xml#helpMenu");
}
test.xml
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<!-- Original helpMenu implementation found in omi.ja/chrome/messenger/content/messenger/mailWindowOverlay.xul -->
<binding id="helpMenu">
<content>
<xul:menupopup>
<xul:menuitem
label="Hello, World!"
oncommand="alert('Hello, World!')"
/>
</xul:menupopup>
<children />
</content>
</binding>
</bindings>
如何转换此代码以使用自定义元素?
我已经在线搜索了,但是我发现的所有材料(example)都演示了如何创建自定义元素并将其插入成为父元素。
我不想这样做。我想创建一个自定义元素,然后将其用于replace在Thunderbird界面中已经存在的元素(在本例中为<menupopup>
)。
有人可以帮我吗?
扩展名的完整代码在GitHub上。
我通过挂钩XUL文件中的<menupopup>
元素并在其中嵌套我的自定义元素来解决了自己的问题。然后,我使用JavaScript删除了不需要的菜单元素。
我不确定这是否是最好的解决方案,但是它满足了我的需要。不过,我仍然想听听是否有更好的方法。
test.xul
<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
const popup = document.getElementById('menu_HelpPopup');
const separators = popup.querySelectorAll('menuseparator');
const items = popup.querySelectorAll('menuitem:not(#test)');
[...items, ...separators].forEach((item) => { item.parentNode.removeChild(item) });
</script>
<script src="test.js"></script>
<menupopup id="menu_HelpPopup">
<help-menu />
</menupopup>
</overlay>
test.js
"use strict";
// This is loaded into all XUL windows.
// Wrap in a block to prevent leaking to window scope.
{
class MozHelpMenu extends MozXULElement {
connectedCallback() {
this.appendChild(MozXULElement.parseXULToFragment(`
<menuitem id="test" label="Hello, World!" oncommand="alert('Hello, World!')" />
`));
}
}
customElements.define('help-menu', MozHelpMenu);
}