Как преобразовать расширение, использующее XBL, для использования пользовательского элемента?

У меня есть оверлейное расширение Thunderbird. Он использует XBL для изменения меню Справка в строке меню Thunderbird, где исходные пункты меню заменяются одним «Hello, World!» пункт меню.

Меню справки в строке меню Thunderbird, где исходные пункты меню были заменены одним пунктом меню Hello, World!.

Поскольку XBL уходит, я бы например, обновить расширение для использования настраиваемого элемента.

В настоящее время привязка прикреплена так:

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>

Как я могу преобразовать этот код для использования пользовательского элемента?

Я провел поиск в Интернете, но все материалы, которые я нашел (пример), демонстрируют как создать пользовательский элемент и вставить его в родительский элемент.

Я не хочу этого делать. Я хочу создать пользовательский элемент, а затем использовать его для замены элемента, который уже существует в интерфейсе Thunderbird (в данном случае <menupopup>).

Может кто-нибудь мне помочь?

Полный код расширения доступен на GitHub.


javascript custom-element thunderbird-addon xbl
person James Hibbard    schedule 13.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я решил свою собственную проблему, подключившись к элементу <menupopup> в файле XUL и вложив в него свой пользовательский элемент. Затем я использовал 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);
}
person James Hibbard    schedule 13.10.2019