如何将使用 XBL 的扩展转换为使用自定义元素？答案

【问题标题】：How do I convert an extension which uses XBL to use a custom element?如何将使用 XBL 的扩展转换为使用自定义元素？
【发布时间】：2019-10-13 08:59:13
【问题描述】：

我有一个覆盖式 Thunderbird 扩展。它使用 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) 都演示了如何创建自定义元素并将其插入到父元素中。

我不想这样做。我想创建一个自定义元素，然后用它替换 Thunderbird 界面中已经存在的元素（在本例中为<menupopup>）。

谁能帮帮我？

扩展程序的完整代码可在GitHub 上获得。

【问题讨论】：

标签： javascript custom-element thunderbird-addon xbl

【解决方案1】：

我通过挂钩 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);
}

【讨论】：