toolbar-widget.js

let XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

let makeToolbar = (options) => {
  let view = document.createElementNS(XUL_NS, "toolbar");
  view.setAttribute("id", options.id);
  view.setAttribute("collapsed", !!options.collapsed);
  view.setAttribute("toolbarname", options.title);
  view.setAttribute("defaultset", options.items.join(","));
  view.setAttribute("customizable", true);
  view.setAttribute("style", "max-height: 40px;");
  view.setAttribute("mode", "icons");
  view.setAttribute("iconsize", "small");
  view.setAttribute("context", "toolbar-context-menu");
    
  let closeButton = document.createElementNS(XUL_NS, "toolbarbutton");
  closeButton.setAttribute("id", "close-" + options.id);
  closeButton.setAttribute("class", "close-icon");
  closeButton.setAttribute("customizable", true);

  view.appendChild(closeButton);

  return view;
}

let addToolbar = options => {
  CustomizableUI.registerArea(options.id, {
    type: CustomizableUI.TYPE_TOOLBAR,
    defaultPlacements: [...options.items, "close-" + options.id]
  });
  let toolbar = makeToolbar(options);
  let toolbox = document.getElementById("navigator-toolbox");
  toolbox.appendChild(toolbar);
}

let removeToolbar = id => {
  CustomizableUI.unregisterArea(id);
  let view = document.getElementById(id);
  if (view) view.remove();
}

let addFrame =  ({id, url}) => {
  CustomizableUI.createWidget({
    id: id,
    type: "custom",
    removable: true,
    onBuild: document => {
      let view = document.createElementNS(XUL_NS, "toolbaritem");
      view.setAttribute("id", id);
      view.setAttribute("flex", 2);

      let frame = document.createElementNS(XUL_NS, "iframe");
      frame.setAttribute("src", url);
      frame.setAttribute("type", "content");
      frame.setAttribute("transparent", true);
      frame.setAttribute("flex", 2);
      frame.setAttribute("style", "overflow: hidden;");
      frame.setAttribute("disablehistory", true);
      frame.setAttribute("sdk-toolbar-frame", true);
      frame.setAttribute("seamless", "seamless");

      view.appendChild(frame);

      return view;
    }
  });
};

let removeFrame = CustomizableUI.destroyWidget


let load = () => {
  addFrame({
    id: "example-frame",
    url: "data:text/html,<button>post</button>"
  });

  addToolbar({
    id: "example-toolbar",
    items: ["example-frame"],
    title: "Example toolbar"
  });
}

let unload = () => {
  removeFrame("example-frame");
  removeToolbar("example-toolbar");
}

load()
unload()
// "[CustomizableUI]" "Widget not found, unable to remove" CustomizableUI.jsm:149