ボタンと右クリックメニュー - userChrome.js作成メモWiki

ツールバーボタンとボタン右クリック時のメニュー追加

// ツールバーボタン作成
const { Services } = ChromeUtils.import('resource://gre/modules/Services.jsm');
const uri = Services.io.newURI('data:text/css;charset=utf-8,' + encodeURIComponent(
`
#MyToolbarButton {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle fill="context-fill" cx="8" cy="8" r="6"/></svg>');
}
`
), null, null);
const sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
 
const { CustomizableUI } = ChromeUtils.import('resource:///modules/CustomizableUI.jsm');
CustomizableUI.createWidget({
  id: 'MyToolbarButton',
  defaultArea: CustomizableUI.AREA_NAVBAR,
  label: 'テストボタン',
  tooltiptext: 'テストボタン',
  onCommand(event) {
    event.target.ownerGlobal.alert('ボタン テスト');
  },
});
 
// ツールバーのコンテキストメニュー追加
const ToolbarContextMenu = {
  handleEvent(event) {
    const popup = event.target;
    switch (event.type) {
      case 'popupshowing': {
        const trigger = popup.triggerNode;
        const node = popup.ownerDocument.getElementById('MyToolbarButton');
        if (popup.id === 'toolbar-context-menu' && node && node.contains(trigger)) {
          popup.addEventListener('popuphidden', this);
          this.build(popup);
        }
        break;
      }
      case 'popuphidden': {
        if (popup.id === 'toolbar-context-menu') {
          popup.removeEventListener('popuphidden', this);
          this.clear(popup);
        }
        break;
      }
    }
  },
 
  build(popup) {
    const window = popup.ownerGlobal;
    const df = window.MozXULElement.parseXULToFragment(
`
<menuitem id="MyToolbarButton_test" label="テスト"
  oncommand="window.alert('コンテキスト テスト');"/>
<menuseparator id="MyToolbarButton_sep"/>
`
    );
    popup.firstElementChild.before(df);
  },
 
  clear(popup) {
    const elements = popup.querySelectorAll('*[id^=MyToolbarButton_]');
    for (const e of elements) e.remove();
  },
};
document.addEventListener('popupshowing', ToolbarContextMenu);