add: remove addon elements

src/addon.ts

@@ -8,7 +8,7 @@ class Addon {
   public events: AddonEvents;
   public views: AddonViews;
   public prefs: AddonPrefs;
-  public utils: AddonUtils;
+  public Utils: AddonUtils;
   // root path to access the resources
   public rootURI: string;
 
@@ -16,7 +16,7 @@ class Addon {
     this.events = new AddonEvents(this);
     this.views = new AddonViews(this);
     this.prefs = new AddonPrefs(this);
-    this.utils = new AddonUtils(this);
+    this.Utils = new AddonUtils(this);
   }
 }
 

src/utils.ts

@@ -94,6 +94,7 @@ class AddonUtils extends AddonModule {
       },
     };
     this.UI = {
+      addonElements: [],
       createElement: (
         doc: Document,
         tagName: string,
@@ -107,13 +108,26 @@ class AddonUtils extends AddonModule {
         if (tagName === "fragment") {
           return doc.createDocumentFragment();
         } else if (namespace === "xul") {
-          return this.Compat.createXULElement(doc, tagName);
+          const e = this.Compat.createXULElement(doc, tagName);
+          this.UI.addonElements.push(e);
+          return e;
         } else {
-          return doc.createElementNS(namespaces[namespace], tagName) as
+          const e = doc.createElementNS(namespaces[namespace], tagName) as
             | HTMLElement
             | SVGAElement;
+          this.UI.addonElements.push(e);
+          return e;
         }
       },
+      removeAddonElements: () => {
+        this.UI.addonElements.forEach((e) => {
+          try {
+            e?.remove();
+          } catch (e) {
+            this._Addon.Utils.Tool.log(e);
+          }
+        });
+      },
       creatElementsFromJSON: (doc: Document, options: ElementOptions) => {
         this.Tool.log(options);
         if (

src/views.ts

@@ -4,7 +4,6 @@ const { addonRef, addonID } = require("../package.json");
 
 class AddonViews extends AddonModule {
   // You can store some element in the object attributes
-  private testButton: XUL.Button;
   private progressWindowIcon: object;
 
   constructor(parent: Addon) {
@@ -24,7 +23,7 @@ class AddonViews extends AddonModule {
     const menuIcon =
       "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAC9klEQVQ4jU1TzW/UZRB+Zub9fexXt7s0YG0RAlTAg6EqjfUkMYYDN2OiJngxXOBEBP0T9KY3LiQe1JgYP4BEw0laBSGgSSVIYhNLw5cuaaXdbnf39/G+73jo/hommcxhMk9m5nkeUlUU4RQkBJ25kwRHv358LmAcEUbKRNxJfRAb8kbIqip1Mw2mn4nOMJ4IVWUAuHE/e3m1748IAyt9bxZXbPDCWHiJGa37qzZcz9SUAsK1e+kJowBtAoAIAEJDVcNAKaCZYweHzjPRyORo8P1fS/apwGBqZiGpzN5JT9UiEkPFLAAa1FCos5Z4fdBG9cf5ZO7geGhOX+y+Hwq1XhwLPv234z8UhjgFTGLBACoFiir828+Xb/etTnVT3TpSZrPw2D7993L+7njdLN5q5Tfnl+3JekRwCpgPLvW/AXAYQD7YQgwTanHUowj2P4eSC+W3Stz7dXtdzjngQCSAV1gAht77obdJAxPQy9VZjywOUFKFEkBeCZNbcWjhUd9+Mde73CwzVKEAiIXghaABw/VyxfSYHD+8y7yqCpQMaSzkmYDMYWhXw7R3NsxnTMgGz1dWgBWAVUgtpKUddfllelwe1SOayz3YKWgo5uy7W739H8+uff7sSHCtHNAp9VAhwAzu9pmDbB+mC/90/Ru/t3R07xb58vpDNxkbqFOloZhzJuz4eTE5GzB1haGdVJmL2zOn2NOUq3dX/XPtxB/aVqE/AFUCGAoOGL3hEi+N1qS7pUwaCdLXJ+JPDAC1HjIc03okuLKS6EPrcX5nnf9slni+m+u+1cTLsanq4pv7GnvbqTaEYBVAJFhnAnzugW0VvpA5vLKW6sXU4dvL9+w7E03+yroNhkLZqNWQ1qohdWohdQwTmAjqVLGnwT/dXnavhUIsBLS6+tZIiW74jR9t6l0BKpIIMF5hYkO4+sCeth67zcBe7VRfmr1rPyobuJUEknv4Qu6F5AGAAVwhAJnHfgWiouEVgVUc8AqphHRzosnXC8aedPD/kPxathRorWcAAAAASUVORK5CYII=";
     // item menuitem with icon
-    this._Addon.utils.UI.insertMenuItem("item", {
+    this._Addon.Utils.UI.insertMenuItem("item", {
       tag: "menuitem",
       id: "zotero-itemmenu-addontemplate-test",
       label: "Addon Template: Menuitem",
@@ -32,7 +31,7 @@ class AddonViews extends AddonModule {
       icon: menuIcon,
     });
     // item menupopup with sub-menuitems
-    this._Addon.utils.UI.insertMenuItem(
+    this._Addon.Utils.UI.insertMenuItem(
       "item",
       {
         tag: "menu",
@@ -50,8 +49,11 @@ class AddonViews extends AddonModule {
         "#zotero-itemmenu-addontemplate-test"
       )
     );
+    this._Addon.Utils.UI.insertMenuItem("menuFile", {
+      tag: "menuseparator",
+    });
     // menu->File menuitem
-    this._Addon.utils.UI.insertMenuItem("menuFile", {
+    this._Addon.Utils.UI.insertMenuItem("menuFile", {
       tag: "menuitem",
       label: "Addon Template: File Menuitem",
       oncommand: "alert('Hello World! File Menuitem.')",
@@ -70,10 +72,7 @@ class AddonViews extends AddonModule {
   public unInitViews() {
     const Zotero = this._Addon.Zotero;
     Zotero.debug("Uninitializing UI");
-    const _window: Window = Zotero.getMainWindow();
+    this._Addon.Utils.UI.removeAddonElements();
-    _window.document
-      .querySelector("#zotero-itemmenu-addontemplate-test")
-      ?.remove();
   }
 
   public showProgressWindow(

typing/global.d.ts

@@ -17,11 +17,13 @@ declare interface ZoteroTool {
 }
 
 declare interface ZoteroUI {
+  addonElements: Element[];
   createElement: (
     doc: Document,
     tagName: string,
     namespace: "html" | "svg" | "xul"
   ) => XUL.Element | DocumentFragment | HTMLElement | SVGAElement;
+  removeAddonElements: () => void;
   creatElementsFromJSON: (
     doc: Document,
     options: ElementOptions
@@ -60,9 +62,9 @@ declare interface ElementOptions {
 }
 
 declare interface MenuitemOptions {
-  tag: "menuitem" | "menu";
+  tag: "menuitem" | "menu" | "menuseparator";
   id?: string;
-  label: string;
+  label?: string;
   // data url (chrome://xxx.png) or base64 url (data:image/png;base64,xxx)
   icon?: string;
   class?: string;